React. 프로젝트 초기설정

cm·2023년 12월 12일

SSAC. React

목록 보기

1/12

JS 개발환경에서 트랜스파일링과 코드 번들링을 위해 다양한 도구를 사용한다.

트랜스파일링 : 최신 JS코드(ES6+)를 구형 브라우저에서도 동작할 수 있도록 이전 버전의 ES5로 변환하는 과정

목적 : 코드 호환성

트랜스파일러 : (속도) Babel < ESbuild(GO) < SWC(Rust)

번들링 : 여러개의 JS 파일과 모듈을 하나의 파일 또는 몇개의 파일로 묶는 과정

번들러 : Webpack, Rollup, Parcel

트랜스파일러와 번들러 조합

CRA : Babel + Webpack

Vite : ESBuild + Rollup

Parcel : Babel + Parcel

Next : Babel or SWC + Webpack

Create React App(CRA), Vite는 둘 다 React Application을 설정하고 개발하기 위한 도구이다. 과거에는 CRA를 많이 사용했지만 최근에는 CRA보다 더 빌드속도가 빠른 Vite를 사용하기도 한다. 이 프로젝트에서는 Vite를 사용할 예정이다.

Vite 생성 (ESbuild + Rollup)

vite 프로젝트 생성

yarn create vite projectname

의존성 설치(node-module 생성)

cd projectname
yarn

빌드 (dist 생성)

yarn build

개발서버 실행

yarn dev 또는 yarn start

옵션
--port : 포트지정
--host IP : (휴대폰에서도 접속 가능) ipconfig | grep 192쳐서 inet x.x.x.x에 나오는 wifi 공유기 기준 아이피를 이용하여 실행시키면 휴대폰에서도 서버에 들어갈 수 있다.

eslint 설정

ESLint을 개발 의존성(-D)으로 설치
yarn add eslint -D
ESLint 설정을 초기화
yarn eslint --init
※ 중간에 권한 deny 나오면 앞에 sudo 추가
ESLint 플러그인 추가(ESlint의 기능을 확장)
yarn add -D eslint-plugin-react : React 애플리케이션에서 JSX 문법을 검사하고 React 관련 규칙을 적용
yarn add -D eslint-plugin-react-hooks : React Hooks 사용을 검사하고 Hooks 관련 규칙을 적용
yarn add -D eslint-plugin-jsx-a11y : JSX 요소의 웹 접근성(Accessibility)을 검사하고, 접근성 관련 규칙을 적용

파일별 설정

package.json, .eslintignore, .eslintrc.cjs

// 📃 package.json
"scripts": {
  …
  "lint": "eslint ."
}

// 📃 .eslintignore
node_modules/
dist/assets/
build/static/
*.test.js

// 📃.eslintrc.cjs 추가
// extends:
"plugin:@typescript-eslint/recommended",
'plugin:jsx-a11y/recommended',
'plugin:react/jsx-runtime',
'plugin:prettier/recommended',

  
// plugins
'react', 'react-hooks','jsx-a11y'
  
// rules  
'react/react-in-jsx-scope': 'off',
'react/jsx-uses-react': 'off',
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
'react/prop-types': 'off',
'react/no-array-index-key': 'error',

// setting
settings: {
  react: { version: 'detect' }, // for react version warnning
},

prettier 설정

필요 패키지를 개발 의존성으로 설치

// 개발 의존성으로 패키지 설치
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks

prettier 실행 스크립트 추가 및 실행

// 📃 package.json
"scripts": {
  // 추가
  "prettier": "prettier --write ."
},

// 설치된 prettier 패키지를 실행 (개발중에 코드를 자동으로 포맷팅)
yarn prettier

prettier 설정 파일 생성 : 프로젝트 루트에 .prettierrc 파일 생성 후 원하는 prettier 설정을 설정

// 📃 .prettierrc 파일 생성
{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "trailingComma": "es5"
}

// ※ .prettierrc 기타 속성 참고
"endOfLine": "auto",
"tabWidth": 2,
"useTabs": false,
"printWidth": 80

// 📃 .eslintrc.cjs
  extends: [
     // 추가
    'plugin:prettier/recommended',
  ],
  plugins: [
     // 추가
    'prettier'
  ],
  rules: {
     // 추가
    'prettier/prettier': 'error',
    'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
  }

그외 설정

Default Formatter - Prettier ESLint 설정
Format On Save 체크(✔️)
확장 파일 설치
✔️ single Quote 체크(✔️)

리액트 폴더 구조

dist : 프로젝트 배포시 사용하는 파일모음. 사용자에게 최종 제공되는 번들링된 파일
public : 정적인 파일 저장하는 폴더 (이미지 파일을 이곳에 넣으면 파일명이 안변하지만 asset에 넣으면 변경됨.)

index.html
- <div id="root"></div> : 리액트에서 가장 상위에 있는 구성요소가 포함된 DOM 요소를 가리킴.
- <script type="module" src="/src/main.tsx"></script> : root에 대한 소스코드가 src 경로에 위치해 있고 ESMAScript module로 작동한다.

<!--index.html-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

main.tsx : <App />은 <React.StrictMode>에 감싸여져 있는데 willUnMount 이후 뒷처리작업을 확인하기 위해서 LifeCycle을 2회 타도록 만든다. (didMount시 1번째, willUnMount시 2번째).
꺼 놓으면 LifeCycle을 1회 탄다. (didMount시 1회)

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

나를 위한 기록

다음 포스트