리액트란?
-
화면출력에 특화된 프레임워크
-
컴포넌트로 화면구성을 효율적으로 할 수 있다.
-
컴포넌트 : 독립적으로 코드볼록을 조합하여 빠르고 효율적으로 화면 구성
-
가상화면 기술을 도입하여 화면출력 속도를 높이고 코드의 복잡성을 낮춘다.
-
게임엔진원리를 도입하여 화면출력 속도가 빠르다.
(게임엔진 : 다음 장면에 필요한 화면을 미리 그려두는 방법으로 화면을 빠르게 전환)
-
가상화면 기술(Virtual DOM)
-
다음에 나타날 화면의 일부(노드)를 미리 그려놓고 변경된 화면의 일부(노드)만 수정한다.
-
npm - js library
-
필요한 라이브러리를 내려받아 설치하고 삭제하는 등의 관리를 해준다.
-
node-modules 폴더에 라이브러리를 내려받아 저장, package.json 이라는 파일에 설치된 라이브러리의 정보를 적어 저장한다. 실제 라이브러리와 라이브러리 명세파일을 다로 관리한다.
(node-modules에 저장되는 라이브러리의 용량이 굉장히 크다. 포르젝트 공유시 명세와 핵심코드만 전달하면 package.json의 목록을 이용하여 손쉽게 라이브러리를 내려받을 수 있다.)
-
yarn - 페이브북에서 npm의 단점을 보완하여 성능과 속도를 개선한 라이브러리 관리도구
-
webpack - 프로젝트에 사용된 파일을 분석하여 기존 웹문서 파일로 변환하는 도구.
-
웹팩이 필요한 이유는 프레임워크가 js, css, jpg같은 기존 웹문서파일을 사용하지 않기 때문, 웹 브라우저는 sass파일을 해석하지 못하므로 중간에 누군가(웹팩) 이 파일을 해석해주어야한다.
-
.hbs, .cjs, .sass등(브라우저가 해석x) 파일을 웹팩이 분석하여 .js, .css등의 파일로 변환한다.
-
node.js - 구글에서 공개한 sw V8엔진기반으로 만든 js 런타임도구
-
node.js는 브라우저가 아닌 컴퓨터(서버)에서 js를 실행할 수 있게 해준다.
-
nvm - node.js를 설치하거나 버전을 관리해주는 프로그램
-
https://github.com/coreybutler/nvm-windows/releases (설치 url)
플러그인(plugins)
- Reactjs code snippets - 코드 뭉치를 자동으로 완성해주는 extension
- prettier - 코드의 줄바꿈 등의 스타일응ㄹ 자동으로 변환해주는 prettier code formatter
babel-loader 호환성 오류 해결하기
- package.json에 적어둔 babel-loader 버전은 최신버전인 create-react-app의 babel-loader와 충돌한다. 이후 babel-loader 버전 오류가 발생하지 않도록 루트 폴더에 npm환경 변수파일을 만들어 저장. 파일이름은 .env 으로 생성하고 SKP_PREFLIGHT-CHECK = true 입력.
[참고] DO_IT_REACT
