React 개발 환경 구축

오랜만에 React의 개발 환경을 구축하면 여러가지 문명 개화가 일어나고 있었으므로 메모해 둡니다.

필요한 명령

우선은 create-react-app 를 넣는 것부터 시작합니다.
CSS에 SCSS 사용하고 싶기 때문에 node-sass도 설치.

npm install -g create-react-app
npm i -D node-sass

프로젝트 만들기

create-react-app 명령으로 프로젝트 만들기
명령 사용법은 여기

create-react-app react-app

라이브러리 추가

프로젝트 작성이 끝나면 필요한 라이브러리를 추가합니다.
이것만 있으면 충분한 생각이 듭니다.
--dev를 붙이면 devDependencies에 추가됩니다.

yarn add [package-name] [--dev]

bulma (CSS 라이브러리)

sanitize.css (브라우저의 CSS 갭 채우기)

redux (데이터 흐름 제어용)

react-redux (React와 Redux 다리)

axios (통신용 라이브러리)

redux-actions (액션 제어)

redux-logger (로거)

react-router-dom (프런트 엔드 라우팅)

설치하면 package.json은 이런 느낌이 들었습니다.

{
  "name": "react-app",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "axios": "^0.19.0",
    "bulma": "^0.8.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "redux": "^4.0.4",
    "redux-actions": "^2.6.5",
    "redux-logger": "^3.0.6",
    "sanitize.css": "^11.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">1% in JP",
      "not dead"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "node-sass": "^4.13.0"
  }
}  

Debug용 브라우저 확장 포함

브라우저에 확장 기능을 넣어두면 디버그가 끝나므로 넣어 둡니다.
chrome용의 확장은 이쪽

브라우저의 검증 기능이 확장되어 React 데이터를 확인할 수 있습니다.

단계 실행 환경 설정

vscode 또는 IntelliJ에서 단계를 실행할 수 있도록 합니다.

IntelliJ

위의 화면(Run Configrations)에서 이미지와 같이 설정합니다. 이제 노드의 프로세스를 시작할 수 있습니다.

그런 다음 Javascript의 디버그 실행 정보를 설정합니다. 이제 시작한 노드의 프로세스에 연결하여 Javascript를 실행할 수 있습니다.

vscode

vscode에서는 위의 플러그인을 설치하여 Chrome 브라우저를 사용하여 단계를 실행할 수 있습니다.

플러그인을 설치 한 후 터미널을 열고 yarn start를 실행하면 노드 프로세스가 시작됩니다. 동시에 브라우저도 일어나므로 중단점을 붙여두면 실행을 멈출 수 있습니다.

기타 개발에 필요한 정보

React 개발에 알고 있으면 편리한 정보를 아래에 써 둡니다.

약간의 확인

환경 구축에 시간을 걸리고 싶지 않은 경우는 아래의 방법으로 바삭바삭하게 확인하거나 할 수 있습니다.
React는 jsfiddle 또는 codepen에서 확인할 수 있습니다.

Redux 데이터 흐름

여러 사람이 개발할 때 Redux를 도입하는 것이 좋습니다.
Redux 데이터 흐름은 익숙해질 때까지 시간이 걸립니다.
전 자료 어딘가 잊어 버렸습니다만, 데이터 플로로서는 이하의 그림이 매우 알기 쉽습니다.
간은 Reducer가 state를 갱신하는 곳이라고 생각합니다.
그 외는 다른 프레임워크나 혹은 jQuery라든지에서도 친숙하다고 생각합니다.