본문 바로가기

CodeTech/React

(19)
React - 3 [React 구동원리] 기초 리액트 설명 강의 중에 간단히하기 위해서 이렇게 css파일들을 없애고 APP.js 와 index.js 파일의 코드 내용을 간소화 시켰습니다. 현재 동작중이지만 아무것도 안보입니다. App.js 코드를 위와 같이 바꾸면 웹을 재실행 하지 않아도 알아서 refresh해주며 값이 바뀝니다. 해당하는 div의 위치를 살펴보면 body안에 div id = "root" 인 박스안에 div가 들어있음을 알수 있다. 하지만 index.html을 들어가보면 그런 코드는 존재하지 않는다. 즉, react는 빈 웹페이지에서 돌아가는 즉시 필요한 모든 요소들을 구성해낸다. JS로 그러한 요소들을 만들고 html에 요소들을 밀어넣는다. react는 div id="root"라는 박스안에 모든것을 밀어넣는다. 보다 시피 Re..
React - 2 [create-react-app] npx create-react-app [project app name] - npx는 npm의 레지스트리 과정을 압축시켜주는 명령어인데, create-react-app 이라는 명령어 또한 마찬가지이다. 2016년도 이전에는 react앱을 만들기 위해서 다양한 과정을 겪어야 했다. react는 굉장히 멋진 코드를 만들어 냈지만 웹브라우저가 이를 이해하지 못했던 것으로 react코드를 webpack, babel 을 다운로드 해서 컴파일하고 다른파일에 넣고 과정이 길었다. 하지만 이러한 지저분한 과정을 단 하나의 명령어로 끝냈다. create-react-app 내가 앱을 만들 부모 디렉토리에서 위 명령어를 실행하면된다. 시간이 약간 소모가 된다. 시간이 걸린다음 react app이 성공했다는 소리가 들린다. 이..
React - 1 개발환경구성 [VScode, node js, npm, yarn, npx] React - JS 기반으로 돌아가는 라이브러리이다. 즉, js로 돌아가는 라이브러리 모음인 것이다. - 주로 사용자 인터페이스를 만드는 프론트 분야에서 쓰인다. - 사용자는 약 66퍼센트로서 매우 많은 서비스가 React로 만들어졌다. - React를 사용하면 js실력이 는다. React 개발환경 설정하기 React를 사용하기 전에 깔아야 하는 것들 있다. - node js window기반에서는 리눅스언어로 까는 게 편하기 때문에 git bash를 깔아서 설치하길 바란다. Node JS - 일종의 JS 런타임 구동 환경이다. 구글 Chrome V8버전 JS엔진을 사용하여 만들어졌으며 JS구동 플렛폼이라고 정의한다. JS로 돌아가는 구동 플렛폼이다. From. Wiki Node.js는 확장성 있는 네트워..