React mini Project (1) - 밑재료 손질(환경 설정)

노션의 Today I Learn의 지식들이 아직 잠들어 있다 생각하여 그동안 배운 것을 조리기 위해 미니 게시판 프로젝트를 기획했다.
일단 알고 있는 것은 다 때려박아 조리해볼 생각이다.

처음이므로 재료를 소개하고 재료를 손질해보겠다.

재료

환경: VSCode, npm 끝.
1. React
2. ESLint
3. babel
4. webpack
5. TypeScript
6. jest
7. React-Testing-Library
8. prettier
9. Google
10. Tech Blog

"devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.0.0",
    "@types/jest": "^27.4.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^5.18.0",
    "@typescript-eslint/parser": "^5.18.0",
    "babel-loader": "^8.2.4",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.12.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jest-dom": "^4.0.1",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.4.0",
    "eslint-plugin-testing-library": "^5.2.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^27.5.1",
    "mini-css-extract-plugin": "^2.6.0",
    "prettier": "^2.6.2",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.8",
    "typescript": "^4.6.3",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }

CRA 없이 하나하나 다 설치 해주느라 귀찮았다. 하지만 했다.

레시피

일단 리액트로 할 거니까 리액트부터 설치

npm install react react-dom

다음은 ESLint를 설치
(ESLint는 JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트다. 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와준다.) 그렇다.

npm install eslint -D

-D를 붙여주는 이유는 개발자한테만 필요하므로 모두 devDependencies에 저장해주기 위해서다.
ESLint는 스타일 가이드가 존재하는데 airbnb가 상당히 빡빡하다고 알려져 있다. 내 머리는 빡빡이가 아니지만 빡빡하게 할 것이므로 airbnb를 깔아준다.

npm install eslint-config-airbnb -D

그리고 prettier(구글번역: 더 예쁘다)를 ESLint를 연결해주기 위해 하나 더 설치해준다.
(프리티어(Prettier)는 코드 포매터(code formatter)이다. 포맷팅을 맡더라도 코드 품질같은 검사는 ESLint 몫이기 때문에 주로 둘을 통합하여 사용한다.)
그렇다.

npm install eslint-config-prettier -D

프리티어를 사용할 때 ESLint가 코딩스타일에 관해서는 신경안쓰게하려면 eslint-config-prettier를 설치한다. Prettier와 충돌하는 ESLint 규칙을 끄는 역할을 한다.

npm install eslint-plugin-prettier -D

eslint-plugin-prettier는 프리티어 규칙을 ESLint 규칙으로 추가하는 플러그인이다. 프리티어의 모든 규칙이 ESLint로 들어오기 때문에 ESLint만 실행하면 된다.

나는 더 예쁘다(prettier)에게 코딩 스타일을 맡겼기에 eslint-config-prettier를 설치해서 설정했다.

그리고 .eslintrc.json는 이런식으로 설정하면 된다.

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "airbnb",
    "eslint-config-prettier",
  ],
  ...
 }

그 밖의 eslint 플러그인들은 사용하는 라이브러리에 맞게 설정해주면 된다.
ESLint의 동작 과정이 궁금한 사람들은 카카오 형님이 멋지게 쓴 글이 있으므로 링크를 걸어두겠다.
https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/
플러그인을 만들어서 쓰시는 것 같다...

자 이제... 바벨과 웹팩을 설정해야한다..
(Babel은 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스컴파일링)할 수 있다.) 그렇다.

npm install @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript -D

• babel/core: 바벨의 코어다. 이거 없으면 바벨이 아니다.
• babel/preset-env: 여러 환경의 맞게 자바스크립트를 동작하게 해준다.
• babel/preset-react: 리액트를 위한 모음
• babel/preset-typescript: 타입스크립트를 위한 모음

사용할려고 하는 라이브러리에 맞게 바벨 프리셋을 찾아 설치하고 적용시켜준다.
babel.config.json 다.

{
  "presets": ["@babel/preset-react", "@babel/preset-env", "@babel/typescript"]
}

바벨을 사용할 수 있는 방법이 여러개가 있는데

• .bablerc는 주로 하위 디렉토리나 파일에서 특정 플러그인이나 변환을 실행할 때 적절하다.
  • 프로젝트 내에 서드파티 라이브러리가 바벨에 의해 트랜스파일 되기 원하지 않을 때
• .babel.config.js는 여러 패키지 디렉토리를 가진 프로젝트에서 규칙을 설정할 때 유용하다. 공식 문서에 따르면 .babel.config.js를 사용하면 구성하는 api가 노출된다. 이러한 방식은 캐싱과 관련해서 복잡성을 증가시키므로, 대부분은 .bable.config.json을 사용하는 게 더 좋은 선택이다.
  

-.babelrc 보다 babel.config.json을 보편적으로 사용한다.

이제 웹팩이다.
(웹 어플리케이션의 규모가 커지면서 프로젝트마다 엄청난 자원의 파일들이 하나로 모여 구성된다. 이때, 파일들의 관계는 복잡하고 무겁기 때문에 브라우저가 이해하고 로드하는데 시간이 소요된다. 이 문제를 해결하기 위해 웹팩(Webpack)이라는 모듈 번들러를 사용해 파일들의 의존성 관계를 정리 및 최적화, jsx파일을 합쳐 하나의 자바스크립트 파일로 만들어준다.)
그렇다.

웹팩을 설치해보자.

npm install webpack webpack-cli webpack-dev-server -D

• webpack: 모듈 번들러인 웹팩이다.
• webpack-cli: 웹팩의 커맨드 라인 인터페이스이다.
• webpack-dev-server: 개발 서버를 제공한다.

그리고 웹팩을 설정해보자.
webpack.config.js

const webpack = require('webpack');
module.exports = {
  mode: 'development', // 1
  entry: './src/index.js', // 2
  output: { // 3
    filename: 'bundle.[hash].js' // 4
  },
  module: {
  ...
  },
  plugins: [
  ...
  ],
};

• module.exports = {} : 선언된 객체를 모듈로 출력

• entry : 사용될 js (배열을 이용한 복수설정)

• output : 합쳐질 결과물에 대한 설정

• module : 모듈 설정

• plugins : 플러그인 활용
  이러한 형식인데 아직 typescript도 설치하고, jest, React-Testing-Library도 남았으므로 다 설정하고 마지막에 설정을 마무리 하겠다.

남은 환경 설정은 다음 시간에 진행하겠다.
To be continue...
I'll be back...