개요

• 리엑트는 화면 출력에 특화되었다.
• 컴포넌트 구성의 프레임 워크로 여러 컴포넌트를 조합해 화면을 구성한다.
• 제이쿼리는 부모노드가 수정시 자식노드 까지 새로 그리지만, 리엑트는 다음에 나타날 화면의 노드를 미리 그려놓고 변경된 화면의 노드만 수정하는 가상 돔 기술을 사용한다.

---

NPM(노드 패키지 매니저)

http://www.npmjs.com 에서 필요한 자바스크립트 라이브러리를 받아 설치하고 삭제하는 중앙 저장소이다.

 

• node_modules 폴더에 라이브러리를 저장하고 , package.json 파일에 의존 파일을 설정한다.
• yarn 은 npm의 단점을 보완해 속도와 성능을 개선한 중앙저장소이다.

---

WebPack (번들러)

사용된 파일을 분석, 웹 문서파일로 변환하는 도구이다.

 

• 프레임 워크가 .js .css .jpg 같은 웹문서 파일을 사용하지 않기때문에 사용한다.
• 웹 브라우저는 이를 해석하지 못하므로 파일을 해석하기 위해 존재한다.
• 노드기반의 간단한 웹서버를 구동한다.

---

개발 환경 구성

node.js 설치

yarn , create-react-app 설치

vccode , plugin 설치

 

• https://github.com/coreybutter/nvm-windows/releases 에서 npm 다운로드
• cmd 에서 nvm -v 로 설치 확인
• node.js 설치를 위해 cmd 에서 nvm install [버전] , 대부분은 라이브러리는 node.js 8 버전으로 최적화 되어있음.
• nvm use [버전] , 해당 node.js 를 사용하게 됨.
• node -v 로 버전 및 설치확인.

---

create-react-app 은 리액트 프로젝트에 필요한 패키지를 묶어 리액트 앱을 생성하는 도구이다. package.json 에 명시된 의존들을 중앙저장소에서 받아온다.

• yarn을 설치(npm), create-react-app 을 중앙저장소(yarn)에서 설치 [cmd]

npm install -g yarn < yarn 설치

yarn create react-app [프로젝트명]

• 앱 구동은 프로젝트 폴더로 진입(cd) 하고 실행한다.

yarn start

---

package.json 에 명시된 의존

{
  "name": "front",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.1",
    "enzyme": "^3.8.0",
    "enzyme-adapter-react-16.3": "^1.4.1",
    "moment": "^2.24.0",
    "next": "^8.1.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.1",
    "react-test-renderer": "^16.7.0",
    "react-with-styles": "^3.2.1",
    "recompose": "^0.30.0",
    "redux": "^4.0.1",
    "redux-pack": "^0.1.5",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "selector-action": "^1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <=11",
    "not op_mini all"
  ],
  "devDependencies": {
    "@babel/core": "7.5.5",
    "@babel/plugin-syntax-object-rest-spread": "^7.2.0",
    "@storybook/addon-actions": "^5.2.6",
    "@storybook/addons": "^5.2.6",
    "@storybook/react": "^5.2.6",
    "aphrodite": "^2.2.3",
    "babel-loader": "^8.0.5",
    "json-server": "^0.14.2",
    "node-sass": "^4.11.0",
    "react-with-styles-interface-aphrodite": "^5.0.1",
    "redux-devtools-extension": "2.13.8",
    "sass-loader": "^7.1.0",
    "storybook-addon-jsx": "^7.1.13"
  }
}

 

명시된 의존 설치 [cmd]

• warning 메세지는 버전의 호환성이 제작당시 명시 버전과 다르다는 것을 안내하는 내용이다.
• 제대로 설치 되지 않다면 node_modules 폴더를 삭제하고 다시 의존을 설치한다.

yarn

---

babel-loader 호환성 오류 이슈

package.json 에 명시한 babel-loader 의 버전이 create-react-app 에 babel-loader 와 충돌한다. 

이 이슈를 해결하기 위해 루트 폴더에 npm 환경변수 파일을 만든다.

• .env 파일

SKIP_PREFLIGHT_CHECK = true

---

VS Code 와 유용 플러그인

• reactjs code snippets : 리액트에 대한 snippet 을 제공한다.
• prettier : 줄바꿈등의 설정을 자동으로 변경해주어 코드의 동일성을 제공한다.

---

Reactjs Code Snippets 

1. RCC : 리액트 컴포넌트 클래스
2. RCCP : 리액트 컴포넌트 클래스 + 프로퍼티타입
3. RCFC : 리액트 컴포넌트 클래스 + 라이프사이클 훅
4. RPC : 리액트 퓨어 컴포넌트
5. RSC : 함수형 컴포넌트
6. RSCP : 함수형 컴포넌트 + 프러퍼티타입

 

---

prettier 플러그인의 설정파일 

• .prettier

{
    "singleQuote": true,   // ' 를 사용  
    "semi": true,          // ; 을 사용
    "useTabs": false,      // Tab 키 사용시 빈칸채움 여부
    "tabWidth": 2,         // Tab 키 사용시 빈칸
    "trailingComma": "all",// 나열 항목 의 마지막의 , 사용 여부
    "printWidth": 100      // 파일의 최대 길이
  }

이후 Ctrl + Shift + P  > format Document 선택시 코드 정리가 된다.

 

VS Code 설정에서 formatOnSave 설정을 체크하면 자동으로 코드정리를 한다.