기록저장소

State와 Lifecycle의 정의 state : 상태, 리액트 Components의 변경가능한 데이터(상태), 개발자가 정의함, 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함(성능저하), javascript 객체, 직접 수정 불가 class LikeButton extends React.Component{ constructor(props){//클래스가 생성될때 실행되는 함수 super(props); this.state={ liked: false } } } //직접 수정 불가 //state 직접 수정(잘못된 사용법) this.state={ name: 'Inje' }; //setState 함수를 통한 수정(올바른 사용법) this.setState({ name: 'Inje' }); Life..

Components와 Props의 정의 Components : 속성들을 입력으로 받아서 element 생성, 리액트를 구성하는 가장 작은 빌딩블록, JS객체형태, 화면에 보이는 것들 기술, 붕어빵 틀 Props : Property(속성)의 줄임말, components의 속성, 붕어빵의 재료, 컴포넌트에 전달할 다양한 정보를 담고있는 자바스크립트 객체 Props의 특징 및 사용법 Props의 특징 : Read-only(값 변경x), 값을 변경하기 위해서는 새로운 값을 컴포넌트에 전달하여 새로운 Element 생성, 모든 리액트 컴포넌트는 Props를 직접 바꿀수 없고 같은 Props에 대해서는 항상 같은 결과를 보여줄것 Props 사용법 //jsx 사용 function App(props){ return (..

Elements의 정의와 생김새 Elements : 리액트 앱을 구성하는 가장 작은 블록들 (Elements are the smallest building blocks of React apps.) Descriptor : 화면에 나타나는 내용을 기술하는 자바스크립트 객체 React Elements의 생김새 : 자바스크립트 객체(불변성) 형태로 존재 //JS 객체 { type: 'button',//DOM 노드 props: {//속성 className: 'bg-green', children: { type: 'b', props: { children : 'Hello, element!' } } } } //랜더링 결과 Hello, element! //React 컴포넌트 element, JS 객체형태 { type: B..

JSX의 정의와 역할 JSX : A syntax extension to JavaScript, JS 확장 문법, JavaScript + XML/HTML const element = Hello, world! JSX의 역할 : html -> JS React.createElement( type, [props], [..children] ) //JSX 사용 class Hello extend React.Component { render(){ return Hello {this.props.toWhat}; } } ReactDOM.render( document.getElementById('root'); ); //JSX 사용x class Hello extend React.Component { render(){ return R..

리액트는 무엇인가? UI 라이브러리 : AngularJS, React, Vue.js 라이브러리 : 자주 사용되는 기능들을 정리해 모아놓은것 리액트의 장점과 단점 리액트의 장점 1. 빠른 업데이트(Virtual DOM) & 랜더링 속도 2. Component-Based : 레고조립하듯 컴포넌트들을 모아서 개발 -> 재사용성 3. 재사용성(Reusability) : 계속해서 사용이 가능한 성질 -> 개발기간 단축, 유지보수 용이 4. Meta 5. 활발한 지식공유 & 커뮤니티 6. React Native를 활용하여 모바일 어플리케이션 구축 가능 리액트의 단점 1. 방대한 학습량 : Virtual DOM, JSX, Component, State, Props.., 지속적인 업데이트 2. 높은 상태관리 복잡도 :..

HTML과 CSS HTML(Hyper Text Markup Language) : 웹사이트의 뼈대를 구성하기위해 사용하는 마크업 언어 / Tag //실제로 웹사이트에서 보이는 콘텐츠 SPA(Single Page Application) : 하나의 페이지만 존재하는 웹사이트, 어플리케이션 CSS(Cascading Style Sheets) : 웹사이트의 디자인 요소 JavaScript 소개 및 자료형 JavaScript(ECMAScript) : 웹사이트의 동적요소, 주로 웹사이트에서만 사용되어왔으나 최근에는 ReactNV나 Electron에서도 사용됨, 프로그램이 실행되는 런타임에 코드가 실행됨(script 언어의 특징) 자료형(Data Type) //Number type let n1 = 1234; let n2..

https://inpa.tistory.com/m/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5 [JS] 📚 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기 HTML & JS 드래그 앤 드롭 드래그(drag)와 드롭(drop)은 컴퓨터를 이용하면서 정말 많이 사용하는 기능 중에 하나일 것이다. 파일 애플리케이션에서 문서를 복사해 이동하는 것 부터 주문 하려는 물건 inpa.tistory.com

https://okayoon.tistory.com/entry/input-%ED%83%80%EC%9E%85-range-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%8A%A4%ED%83%80%EC%9D%BC input 타입 range 스타일 수정하기_커스텀 스타일 ++ 추가 사항 태그로 제작한 부분이 모바일에서 터치 이동이 안되는 이슈가 있었습니다. 그래서 어쩔수 없이 태그를 사용하여 커스텀하는 형식으로 작업했습니다. 기록상 글을 작성합니다. 글 okayoon.tistory.com

https://stackoverflow.com/questions/29715655/html-5-input-type-date-disable-keyboard-input HTML 5 Input type='date' disable keyboard input I am working on a Chrome Packaged App so my code should only work in Chrome. I have the following input https://jsfiddle.net/jhbo4q2k/ On Chrome this automatically ... stackoverflow.com

Drag'n'Drop File Here .drop { min-height: 50px; width: 250px; border: 1px solid blue; margin: 10px; padding: 10px; } if(window.FileReader) { //var drop; addEventHandler(window, 'load', function() { var status = document.getElementsByClassName('status')[0]; var drop = document.getElementsByClassName('drop')[0]; var list = document.getElementsByClassName('list')[0]; function cancel(e) { if (e.prev..