[React 시작하기] 01. 개발환경, 프로젝트 시작하기

개발 기본 환경

Node.js

Node.js (nodejs.org)

Node.js

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

nvm install 14.16.1
nvm use 14.16.1
nvm alias default 14.16.1

Visual Code

Visual Studio Code - Code Editing. Redefined

Visual Studio Code - Code Editing. Redefined

 

프로젝트 시작하기

새로운 React 앱 만들기 – React (reactjs.org)

새로운 React 앱 만들기 – React

Create React App

Create React App (create-react-app.dev)

Create React App

npx : npm 5.2.0 이상부터 함께 설치된 CLI 명령어

• 프로젝트의 로컬에 설치된 패키지의 실행 커맨드를 사용할 때
  • 기존에 npm은 package.json의 npm scripts 부분에 명령어를 추가해서 사용해야 했다.
    • npm run 명령어
  • npx는 바로 실행할 수 있다.
• 전역으로 실행하고 싶은 패키지를 사용할 때
  • npm i -g 를 이용해 전역에 꼭 설치해서 사용해야 했다.
  • npx로 최신 버전의 패키지를 바로 실행할 수 있다.

npx create-react-app 프로젝트명

프로젝트 명은 소문자만을 사용하도록 한다. (npm naiming restrictions)

 

package.json

만들어진 프로젝트의 package.json을 살펴보면 다음과 같다.

{
  "name": "reactprac01",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",		  // 테스트 툴 라이브러리
    "@testing-library/react": "^13.2.0",		  // 테스트 툴 라이브러리
    "@testing-library/user-event": "^13.5.0",		  // 테스트 툴 라이브러리
    "react": "^18.1.0",			// 리액트 핵심 모듈
    "react-dom": "^18.1.0",		// 리액트 핵심 모듈
    "react-scripts": "5.0.1",		// CRA 라이브러리
    "web-vitals": "^2.1.4"		// 구글에서 사이트 경험을 측정하는 라이브러리
  },
  "scripts": {
    "start": "react-scripts start",		// 개발서버 실행
    "build": "react-scripts build",		// 배포(프로덕션) 모드 실행
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

npm start : 개발용 서버를 실행시킨다. 수정사항이 바로 반영됨.

npm run build : 코드를 배포용으로 압축하여 build 폴더를 만든다.

npm test : jest를 통해 test code를 실행한다. (unit test)

npm run eject : CRA가 지원하지 않는 기능을 사용하기 위해 CRA 관리방법을 벗어난다는 의미. 돌이킬 수 없다.

 

build 폴더 확인방법

npm install serve -g
serve -s build

serve라는 패키지를 전역으로 설치해서 build 폴더를 직접 웹 서버로 동작시킨다.

 

npm test

• __tests__ 폴더 안의 .js 파일
• .test.js 로 끝나는 파일
• .spec.js 로 끝나는 파일

위 세가지 파일들을 자동으로 추적하여 유닛 테스트를 진행한다.

 

npm run eject

CRA로 만든 프로젝트에서 CRA를 제거하는 명령어.

CRA 내에서 해결이 안되는 설정을 추가할 때 보통 사용한다.

그러나 돌이킬 수 없으므로 사용을 권장하지 않으며, 요즘은 대부분의 기능을 CRA에서 지원하므로 굳이 할 필요는 없다.

 

만약 eject를 하게 된다면

• react-scripts 제거
• CRA에 의해 숨겨진 채 사용되던 각종 패키지가 package.json에 나타난다.
• jest, Babel, ESLint 등의 설정이 추가된다.
• 각종 설정 파일이 config 폴더에 추가된다.

ESLint

일반 프로젝트에서는 따로 ESLint를 설치해서 사용해야 했다.

하지만 CRA에서는 이를 기본적으로 내장하고 있다.

package.json

사용자 정의 rules는 객체 형태로 다음처럼 추가하면 된다.

package.json

Prettier

Prettier · Opinionated Code Formatter

Prettier · Opinionated Code Formatter

코드의 일관성을 유지시켜 주는 formatter 패키지다.

예를 들면, 문자열은 따옴표와 쌍따옴표를 사용할 수 있는데 쌍따옴표만을 사용하도록 하는 식.

prettier를 터미널에서 직접 사용하는 예시

Prettier는 CRA 내장 패키지가 아니므로 따로 설치가 필요하다.

npm i -d prettier

자동 사용

VS Code에서 Prettier 플러그인을 설치한 뒤

VS Code 기본 설정에서 "format" 검색 후 기본 포매터를 Prettier로, Format On Save를 체크해두면

저장할 때마다 Prettier 설정에 맞게 자동으로 코드가 정리된다.

prettier의 설정을 변경하고 싶다면 루트 경로에 .prettierrc 파일을 생성 한 뒤 거기에 설정하면 된다.

Options · Prettier

Prettier · Opinionated Code Formatter

수동 사용

만약 Prettier를 한 파일에 직접 사용하고 싶다면 Ctrl + Shift + P 를 눌러 Format Document 를 실행하면 된다.

.

ESLint 설정 충돌 방지

ESLint와 같이 사용할 경우 충돌을 방지해야 한다.

일반적인 프로젝트에서는 다음의 모듈을 설치해서 루트경로에 .eslintrc.json을 생성한 뒤 설정을 추가해야 한다.

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

CRA 에서는 그냥 ESLint 설정에서 Prettier를 제외시켜주면 된다.

husky

Git 작업 시의 라이프사이클 훅을 쉽게 사용할 수 있도록 해주는 패키지.

GitHub - typicode/husky: Git hooks made easy 🐶 woof!

GitHub - typicode/husky: Git hooks made easy 🐶 woof!

npm i -D husky
npx husky install // git hook 설치

npx husky install을 하게 되면, 루트 경로에 .husky 폴더가 생성된다.

사용 방법

테스트를 위해 huskytest 스크립트를 임의로 만들었다.

git commit 을 하게되면 exit 1 코드에 의해 실패될 것이다.

npx husky add .husky/pre-commit "npm huskytest"

위의 명령어를 실행하면 .husky 폴더 하위에 pre-commit 파일이 생성된 뒤 npm huskytest 문구가 추가된다.

따라서 commit 전에 npm huskytest 문이 먼저 실행될 것이다.

이런식으로 commit 전에 특정 스크립트가 실행될 수 있도록 만들어 줄 수 있다.

보통은 Prettier나 ESLint를 통해 코드를 재정비한 뒤 업로드 되도록 하는데에 사용된다.

 

lint-staged

lint-staged - npm (npmjs.com)

lint-staged

husky와 연계하여 commit 대상 파일들을 lint하는 패키지

npm husky -D
npx husky i
npx husky add .husky/pre-commit "npx lint-staged"

npm i lint-staged -D

package.json에 다음과 같은 설정을 추가해서 사용할 수 있다.

어떤 js 파일이 git 목록에 올라오면 위처럼 eslint --fix 문을 통과하고, git add로 다시 목록에 올라온다.

prettier가 설치돼 있으면 다음의 명령어를 추가해줄 수도 있다.

이후 .husky/pre-commit 파일에 "npx lint-staged" 구문을 추가해주면 commit 시에 자동으로 lint해주는 기능이 구현된다.