React - CRA 프로젝트 생성/유용한 패키지들

이전 글에서 React의 개념에 대해 알아보았습니다.

https://sty110357.tistory.com/46?category=526216 

React란?

 

----

 

개발 환경은 아래와 같습니다.

• MacOS Monterey
• Rocky Linux 8.5(Docker Container)

 

----

 

1. React 개발 환경 구축

프로젝트 생성

$ npx create-react-app react-test

• npx : 패키지를 설치하지 않고, 대상 패키지를 최신 버전으로, 실행에만 사용하는 명령어
• create-react-app : webpack 번들러를 기반으로 react 프로젝트를 관리해주는 패키지
• react-test : react 프로젝트로 생성할 폴더명을 지정

 

실행하면, 지정한 react-test 폴더 안에 react 프로젝트가가 자동으로 구성되어 있음을 알 수 있습니다.

 

package.json

dependencies 속성엔 create-react-app이 설치한 모듈들의 목록이 정의되어 있습니다.

{
  ...,
  
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  
  ...
}

• @testing-library/... : 리액트를 테스트 하기 위한 모듈들
• react : react의 컴포넌트를 정의하는 데 필요한 핵심 모듈(필수)
• react-dom : react DOM 요소를 효율적으로 관리할 수 있도록, 메서드를 제공하는 모듈(필수)
• react-scripts : create-react-app의 스크립트 세트
• web-vitals : 구글의 웹 성능 분석 모듈

 

scripts 속성엔 4개의 축약 명령어들이 정의되어 있습니다.

{
  ...,
  
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  
  ...
}

• start : 개발 서버를 띄웁니다. ( $ npm run start )
• build : 배포 환경을 빌드합니다. ( $ npm run build --> $ npx serve -s build(빌드폴더경로) )
• test : 테스팅 모듈인 jest-dom이 실행되면서 코드를 테스트합니다. ( $ npm run test )
• eject : create-react-app을 react 프로젝트에서 제거하는 명령어입니다. 프로젝트의 설정을 세부적으로 수정할 수 있게 되지만, create-react-app의 관리에서 벗어나게 됩니다. ( $ npm run eject )

 

이제 개발 서버를 띄워보겠습니다.

$ npm run start

 

이제 create-react-app으로 개발할 수 있는 환경이 되었지만, 개발에 도움이 되는 몇 가지 패키지를 함께 알아보겠습니다.

 

2. ESLint

• JavaScript 문법에서 에러를 표시해주는 툴입니다.
• 코딩 스타일(tab size 등)을 내부적으로 정의할 수 있습니다.
• create-react-app에 기본으로 포함되어 있습니다.

 

프로젝트를 따로 만들어서 테스트 해보겠습니다.

$ mkdir eslint-test && cd eslint-test
$ npm init -y
$ npx eslint --init

 

다음으로 .eslintrc.js 파일 rules 속성에 코딩 스타일 규칙을 정의해보겠습니다.

{
  ...,
  
  'rules': {
    semi: ["error", "always"]
  }
}

• semi : 코드를 세미콜론(;)으로 마무리하지 않으면 오류가 표시되도록 함

/* index.js */

console.log('Hello') // 세미콜론 안 찍음

 

이제 eslint로 index.js 파일을 검사해보면 에러가 발생하게 됩니다.

$ npx eslint index.js

 

create-react-app으로 돌아와서, package.json 파일의 eslintConfig 속성은, 위의 .eslintrc.js 내용과 동일하다는 것을 알 수 있습니다.

{
  ...,
  
  "eslintConfig": {
    "extends": [ // react 문법을 검사해주고 있다는 것을 알 수 있음
      "react-app",
      "react-app/jest"
    ],
    "rules": [ // 동일하게 내부적 코딩 스타일도 정의할 수 있음
      "semi": [ "error", "always" ]
    ]
  },
  
  ...
}

 

3. Prettier

• 코드의 스타일을 교정해주는 코드 포맷터입니다.

 

마찬가지로, 프로젝트를 따로 만들어서 테스트 해보겠습니다.

mkdir prettier-test && cd prettier-test
npm init -y
npm i prettier -D

echo "console.log('hello')" >> index.js

npx prettier index.js --write

• --write: 검사만 하지 않고, 파일에 교정을 적용해 저장하는 옵션

 

이렇게 prettier를 실행해보면, 코드에 빠진 세미콜론을 붙여주는 걸 알 수 있습니다.

console.log('hello');

 

4. Husky

• 프론트엔드 개발 환경에서 git hook을 쉽게 제어할 수 있게 해주는 모듈입니다.
• git hook이란, git에 대한 이벤트가 발생했을 때 트리거처럼 특정 스크립트를 실행하는 것을 말합니다.

 

마찬가지로, 프로젝트를 따로 만들어서 테스트 해보겠습니다.

$ mkdir husky-test && cd husky-test
$ npm init -y
$ git init
$ npm i -D husky

 

다음으로, package.json script 속성에 아래를 추가합니다.

{
  ...,
  
  "scripts": {
    "prepare": "husky install",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

 

이제 husky를 초기화하고, husky 훅을 추가해줍니다.

$ npm run prepare
$ husky add .husky/pre-commit "npm test"

• package.json scripts에 정의되어 있는 명령어를 훅에 추가했습니다.

 

이제 실제 git을 사용해 commit할 때 전처리되는지 확인해봅니다.

$ git add .
$ git commit -m "husky test"

 

현재 "npm test"를 사용하면 에러를 발생시키도록 정의되어 있으므로, 전처리 과정에서 commit이 실패하는 걸 확인할 수 있습니다.

 

5. lint-staged

• git이 관리하는 파일 중 on staged 상태인 파일을 대상으로, lint(검사)해주는 노드 패키지입니다.
• husky만 사용하면 모든 코드를 검사하기 때문에, lint-staged를 활용하면 좀 더 효율적입니다.

 

이제 위에서 테스트했던 prettier와 husky를 create-react-app 프로젝트에 연결해 보겠습니다.

먼저, create-react-app 프로젝트에서 husky, lint-staged를 설치하고 초기화합니다.

$ cd react-test
$ npm i -D prettier husky lint-staged
$ npx husky install
$ npx husky add .husky/pre-commit "npx lint-staged"

/* package.json */

{
  ...,
  
  "scripts": {
    "prepare": "husky install", // npm run 축약어 등록
    ...
  },
  
  "lint-staged": { // lint-staged 설정
    "**/*.js": [ // on stage 파일 중 js 파일에 아래를 실행
      "eslint --fix", // eslint 적용
      "prettier --write", // prettier 적용
      "git add" // 위 수정된 사항을 git에 add 처리
    ]
  }
}

 

실제로 검사 후에 적용이 되는지 확인하기 위해, App.js의 내용을 수정해 보겠습니다.

import logo from './logo.svg';
import './App.css';

/* className의 값을 single quota로 수정 */
function App() {
  return (
    <div className='App'> 
    ...

 

이제 파일을 commit하면 husky에 추가했던 hook이 실행됩니다.

$ git init
$ git add .
$ git commit -m "first-commit"

 

다시 App.js 파일로 들어가보면, sigle quota가 double quota로 수정되었음을 확인할 수 있습니다.

import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
    ...

 

파일이 commit 되기까지의 순서를 정리하면 아래와 같습니다.

• git add 명령어로 파일들을 stage에 올림
• git commit 명령어를 사용하면, husky에 추가한 hook이 실행됨: npx lint-staged
• lint-staged가 실행되면서, package.json에 설정해 놨던 내용대로, 모든 JS 파일을 대상으로 eslint, prettier가 적용됨
• 적용된 파일을 git add로 다시 stage에 올림
• 이 과정에서 오류가 없으면 파일을 commit 상태로 전환
• 오류가 있으면 commit이 되지 않음

 

6. create-react-app 프로젝트 트리

• .husky : husky install 하면 생기는 폴더
• node_modules : 현재 설치된 노드 모듈들
• public : 정적 파일들 폴더
• src : 개발해야 할 소스 코드들 폴더
  • 설치된 loader 모듈들을 이용해 CSS, image 등의 정적 파일을 JS 파일에 import 할 수 있습니다.

 

7. 컴포넌트 디버깅

• Facebook의 React Developer Tools를 크롬에 설치해서 컴포넌트를 디버깅 할 수 있습니다.
• https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko

크롬 웹 스토어에서 툴 설치

 

툴을 사용해 현재 웹 사이트가 리액트를 사용하는지 확인

 

크롬의 디버깅 화면에서 Components 탭이 생김