🐤 [F/E] React 프로젝트 초기 Setting

leehyunju·2023년 1월 30일

(1) React 실행 전 단계

가장 먼저 React를 실행하기 위해서는 아래 항목들이 필요합니다.

node 설치 // package manage를 사용 하기 위해서 설치해줘야 합니다.

// 설치 됐는지 확인하기 위해 터미널에서 아래 명령어 입력
$node -v

npm 설치

$npm i // 설치 명령어
$npm -v // 버전 확인 명령어

(2) React 실행하기

TypeScript 사용하려면 Create TypeScript project 체크하고 생성하면 됩니다.

(3) React 작업 환경세팅

Webpack
Prettier
ESLint
Babel

(3-1) Webpack

파일 단위의 자바스크립트 모듈 관리 (import, export)
웹 개발 작업 자동화 도구 (HTML, CSS, JS, images) → 소스코드 난독화
웹 애플리케이션의 빠른 로딩 속도와 높은 성능

(3-2) Prettier

여러 사람이 작업을 해도 한 사람이 작업한 것 처럼 일관적인 코드 스타일을 유지할 수 있게 도와주는 툴이다.

줄 바꿈, 공백, 들여 쓰기 같은 스타일을 교정해 준다.

🐣 기본 설정 코드

{
    "bracketSpacing": true,
    "printWidth": 140,
    "singleQuote": true,
    "trailingComma": "none",
    "tabWidth": 4,
    "useTabs": false
}

더 많은 속성을 잡아주고 싶다면 👇
https://prettier.io/docs/en/index.html

(3-3) ESLint

문법 에러를 잡아주거나 더 좋은 코드 구현 방식을 사용하도록 해준다.

.eslintrc 라는 파일을 생성해서 사용한다.

Monorepo와 같이 하나의 코드 저장소에서 여러 개의 프로젝트가 공존하는 경우 매우 유용
기본으로 제공되는 규칙 외에도 추가적인 규칙 사용 가능
다양한 플러그인도 사용 할 수 있다.
기본적인 코드 환경 설정도 가능하고 에러 문법 들도 잡아줌

👉 eslintrc setting code

{
    "root": true,
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["prettier", "plugin:react/jsx-runtime", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"],
    "settings": {
        "import/resolver": {
            "node": {
                "moduleDirectory": ["node_modules", "src/"]
            }
        }
    },
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "impliedStrict": true
        },
        "ecmaVersion": 12
    },
    "plugins": ["prettier", "react", "react-hooks"],
    "rules": {
        "react/jsx-filename-extension": 0,
        "no-param-reassign": 0,
        "react/prop-types": 1,
        "react/require-default-props": 0,
        "react/no-array-index-key": 0,
        "react/jsx-props-no-spreading": 0,
        "react/forbid-prop-types": 0,
        "import/order": 0,
        "no-console": 0,
        "jsx-a11y/anchor-is-valid": 0,
        "prefer-destructuring": 0,
        "no-shadow": 0,
        "no-unused-vars": [
            1,
            {
                "ignoreRestSiblings": false
            }
        ],
        "prettier/prettier": 0  //prettier 에 대한 경고 끄기
    }
}

(3-4) Babel

먼저 바벨을 설명하기 전, 폴리필에 대해서 간단하게 알아봅시다.

💟 Polyfill ?

폴리필은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인이다. 브라우저에서 지원하지 않는 기능들에 대한 호환성을 채워 넣는다고 하여 폴리필 이라고 칭합니다.

💟 babel-polyfill

바벨은 이러한 폴리필을 손쉽게 지원하기 위해 babel-polyfill 기능을 지원합니다. 즉, 바벨 폴리필은 최신 문법을 써도 이전 버전 브라우저 환경에서도 사용할 수 있도록 최신 문법을 특정 예전 버전의 JS로 변환해주는 툴이라고 생각하시면 됩니다.

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});]

그 외

react-hot-loader 설치하기 *일명 핫리로드 라고 한다.

스타일 또는 JSX를 변경 즉시 웹 브라우저에서 자동 반영된다.
next.js 에서는 제공해주는 툴이지만 CRA 에서는 설정해주어야 한다.

세팅 방법

// 설치 명령어
$npm i react-hot-loader

// 적용 소스 코드
import { hot } from 'react-hot-loader';

const App = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Board1 />} />
                <Route path="/board2" element={<Board2 />} />
            </Routes>
        </Router>
    );
};

export default hot(module)(App);