Javascript/React.js
-
react 6Javascript/React.js 2020. 1. 8. 23:41
state 존재하지 않으면서 변화하는 dynamic data을 사용하기 위한 객체이다. class component 지금까지 배운 것은 function component이다. 그러나 이제는 메소드와 객체들을 사용하기 위해서, 그 중에서도 state를 사용하기 위해서 React.Component로부터 확장된 class component를 사용할 것이다. 예를 들어, 핸드폰이 React.Component 라면 우리가 만들 class App은 삼성이라고 볼 수 있다. render() 뷰를 렌더링 해주는 함수이다. Virtual DOM을 사용하기 때문에 refresh한 경우, 변화가 있는 부분만 업데이트된다. setState() state를 변경하기 위해서는 setState function을 이용해야 한다. 그..
-
react 3Javascript/React.js 2020. 1. 7. 11:38
Component component는 HTML을 반환하는 함수이다. react에서는 Javascript와 HTML 사이에 조합을 JSX하고 부른다. index.js 일반적으로 '' 이것을 컴포넌트라고 부른다. src/Potato.js 내가 만든 Potato라는 component이다. src/app.js react application은 하나의 component만 render할 수 있다. 그래서 potato component는 app.js 안에서 호출할 것이다. 출처 https://academy.nomadcoders.co
-
Virtual DOMJavascript/React.js 2020. 1. 7. 11:18
브라우저의 workflow - HTML 브라우저가 HTML 을 전달받으면, 브라우저의 render engine이 이를 파싱하고 DOM 노드로 이뤄진 트리를 만든다. 각 노드는 각 HTML 엘리먼트들과 연관되어있다. - CSS 외부 CSS 파일과 각 엘리먼트의 inline 스타일을 파싱한다. 스타일 정보를 사용해 DOM 트리에 따라 새로운 트리인 렌더트리를 만든다. - attachment Webkit 에서는 노드의 스타일을 처리하는 과정을 ‘attachment’ 라고 부른다. DOM 트리의 모든 노드들은 ‘attach’ 라는 메소드가 있는데 이 메소드는 스타일 정보를 계산해서 객체 형태로 반환한다. 이 과정은 동기적 작업이며 DOM 트리에 새로운 노드가 추가되면 그 노드의 attach 메소드가 실행된다. ..
-
react 2Javascript/React.js 2020. 1. 7. 11:01
div 태그 Division의 약자로 웹사이트의 레이아웃을 만들때 주로 사용한다. 웹 페이지에서 논리적 구분을 정의하는 태그이다. div 태그를 사용하여 각각의 공간을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있다. index.html div id = root는 비어있다. app.js 실행 시, 코드 캡쳐화면 react는 자바스크립트로 요소들을 생성하고, html에 밀어넣는다. 그래서 html 코드에는 보이지 않지만 실제로 구동하면 보이는 것을 알 수 있다. 출처 https://coding-factory.tistory.com/188 [Html] Div 태그 사용법 & 예제 오늘은 div태그에 대해 알아보겠습니다. div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때..
-
react 1Javascript/React.js 2020. 1. 7. 10:32
npx create-react-app [project name] 단 한 줄의 명령어로 react web app을 설정할 수 있다. yarn node.js의 npm과 동일하다. yarn 대신 npm을 써도 무관하다. code [project folder] visual studio code를 실행할 수 있다. 출처 https://academy.nomadcoders.co Academy 우버 백엔드 + 프런트엔드 + 배포 [고급]Typescript, NodeJS, GraphQL, React, Apollo % Complete academy.nomadcoders.co