01-2. 리액트 개발 환경 설치하기(2)

(1)에서 이어진다.

---

 

예제에 필요한 라이브러리 미리 설치하기

 

 

• package.json 수정하기 * 현재 실습 중인 node 버전(18.18.0)과 호환되지 않아 진행이 안되었다. 우선 이 과정은 건너뛰고 바로 yarn을 실행했다. 이후에 문제가 발생한다면 그때그떄 접은글을 만들거나 해서 설명을 추가하겠다 

{
  "name": "react-do-it-examples",
  "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.7",
    "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"
  }
}

 

 

 

• package.json에 적힌 라이브러리 모두 설치하기

$ yarn

루트 폴더(작업 디렉토리)에서 다음 명령어를 실행하면 package.json에 적힌 라이브러리를 모두 설치한다. 

이때 화면에 warning 메시지가 나타나는데, 이는 각 버전의 호환성에 대해서 제작 당시 명시된 버전과 다르다는 것을 알려주는 주의 내용이므로 무시해도 된다.

 

🧯 gyp ERR! 발생

라이브러리의 버전이 node.js 버전과 호환되지 않으면 에러가 발생할 수 있다.

package.json에서 문제를 일으키는 라이브러리의 버전 정보를 고쳐주고,

라이브러리의 해당 버전을 설치해준 다음

다시 $ yarn 해주면 된다.

 

 

 

• babel-loader 호환성 오류 해결하기

SKIP_PREFLIGHT_CHECK = true

 

babel-loader 버전 오류를 피하기 위해 루트 폴더에 npm 환경 변수 파일 .env를 만들어 저장한다.

 

package.json을 수정하지 않았기 때문에 yarn add --dev @babel/plugin-proposal-private-property-in-object 를 실행해서 babel 어쩌고를 별도로 추가해줬다.

 

 

---

 

 

비주얼 스튜디오 코드와 플러그인 설치하기

 

 

비주얼 스튜디오 코드 설치 과정은 이 책에서는 생략했다.

 

 

• Reactjs code snippets 플러그인 설치하기

 

VSCode의 Extensions에서 'Reactjs code snippets'를 검색하여 설치하고, 비주얼 스튜디오 코드를 다시 실행.

 

src 폴더에 01 폴더를 만들고 RCC.jsx 파일을 생성한다.

코드 편집화면에 rcc라고 입력하고, rcc를 선택한 상태에서 엔터를 누르면 자동으로 코드가 생성된다.

 

import React, { Component } from 'react';

class RCC extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default RCC;

파일 이름이 RCC.jsx 이므로 리액트 컴포넌트의 이름도 RCC가 된다.

 

 

Reactjs code snippet에서 자주 사용하는 단축 키워드는 다음과 같다.

키워드	설명
RCC	기본 리액트 컴포넌트 코드를 생성
RCCP	리액트 컴포넌트를 프로퍼티 타입과 함께 생성
RCFC	리액트 컴포넌트를 생명주기 함수와 함께 생성
RPC	리액트 퓨어 컴포넌트를 생성
RSC	함수형 컴포넌트를 생성
RSCP	함수형 컴포넌트를 프로퍼티 타입과 함께 생성

 

• Prettier 플러그인 설치하기

 

Prettier - Code formatter: 코드의 줄바꿈 등의 스타일을 자동으로 변환.

Extensions에서 'Prettier'을 검색하여 설치하고, 비주얼 스튜디오 코드를 다시 실행한다.

프로젝트 폴더(do-it-example)에 Prettier 설정 파일을 생성.

파일 이름은 .prettierrc

이때 파일 이름에 반드시 점(.)을 포함해야 한다.

 

{
    "useTabs": false,
    "printWidth": 100,
    "tabWidth": 2,
    "trailingComma": "all",
    "semi": true,
    "singleQuote": true
}

 

 

RCC.jsx 파일을 다시 열고 Ctrl + Shift + P를 누르고, Format을 검색해 Format Document 명령어를 찾은 다음 Enter를 누르면 코드가 정리되는 것을 볼 수 있다

 

import React, { Component } from 'react';

class RCC extends Component {
    render() {
        return <div></div>;
    }
}

export default RCC;

 

 

마지막으로, 파일을 저장할 때 Prettier의 코드 입력 스타일을 자동 적용하도록 설정한다. 

Preferences > Settings 검색창에 'formatOnSave' 입력하고, Format On Save 설정에 체크한다