[Webpack] React Setting

babypig·2023년 9월 13일

ESLint Prettier React babel typescript webpack

React.js

목록 보기

8/8

[Webpack] React Setting

1. Terminal 에서 npm init 하기

npm init 명령을 실행하면 사용자에게 프로젝트 정보를 입력하라는 프롬프트가 표시됩니다.

npm init 이란 Node.js 패키지 관리자인 npm (Node Package Manager)를 사용하여 새로운 Node.js 프로젝트를 초기화하는 명령입니다.

package name (project-name) : 프로젝트의 이름을 입력합니다. 일반적으로 소문자로 입력하고 공백 없이 단어를 하이픈 (-)으로 구분하는 것이 관례입니다. 이 이름은 프로젝트의 고유 식별자로 사용됩니다.

version : 프로젝트의 초기 버전을 지정합니다. Semantic Versioning (Semver) 규칙에 따라 버전을 지정하는 것이 일반적입니다 (예: 1.0.0).

description : 프로젝트에 대한 간단한 설명을 입력합니다. 이 설명은 프로젝트의 요약으로 사용될 수 있습니다.

entry point : Node.js 애플리케이션의 진입점 파일을 지정합니다. 일반적으로 index.js 또는 app.js와 같은 파일을 사용합니다.

test command : 프로젝트의 테스트 스크립트를 지정합니다. 이 명령을 사용하여 프로젝트의 테스트를 실행할 수 있습니다.

git repository : 프로젝트의 Git 저장소 URL을 입력합니다. 이 정보를 입력하면 프로젝트의 Git 관련 작업을 쉽게 수행할 수 있습니다.

keywords : 프로젝트와 관련된 키워드를 입력합니다. 이러한 키워드는 npm 패키지 검색에서 프로젝트를 찾을 때 사용됩니다.

author : 프로젝트의 저작자 또는 개발자의 이름을 입력합니다.

license : 프로젝트의 라이선스를 선택하거나 입력합니다. 주로 사용되는 옵션으로 MIT, Apache-2.0, ISC 등이 있습니다.

프로젝트를 생성할 때 이러한 정보들을 일일이 입력하는 게 귀찮을 경우
npm init -y 로 진행 시 디폴트 값으로 프로젝트가 생성이 됩니다.

2. Eslint Prettier 설정하기

Eslint 공식문서
Prettier 공식문서

ESLint 사용 전제 조건

Node.js (^12.22.0, ^14.17.0, or >=16.0.0)

사용이유

일관된 코드 스타일 유지

코드 품질 검사

자동 코드 포맷팅

💡 결과적으로 코드의 일관성, 품질, 가독성, 유지 보수성을 향상시키고 개발 과정에서 생산성을 높일 수 있습니다.

💡 프로젝트의 root 경로에 .eslintrc , .prettierrc 를 만들어 줍니다.
ESLint & Prettier 는 프로젝트를 개발할 때 필요한 도구들이므로,
프로덕션 환경에서는 필요하지 않으니, npm install --save-dev 로 install 하여 줍니다.

root 경로란 최상위 디렉토리를 의미합니다.

npm install 또는 npm i 를 통하여 Node.js 패키지 관리자인 npm (Node Package Manager)를 사용하여 프로젝트에 필요한 패키지(라이브러리)를 설치하는 명령어입니다.
--save 또는 -S를 하면 dependencies에
(npm5부터는 --save옵션이 기본적으로 설정되어 있기 때문에 안 붙여도 됩니다)
--save-dev 또는 -D를 하면 devDependencies에 추가됩니다.

Eslint 설정에 필요한 패키지는 다음과 같습니다.

npm i -D @babel/eslint-parser eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-standard

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-config-standard-with-typescript

TS 프로젝트에서는

아래 1가지 패키지를 추가로 설치하여 줍니다.

@typescript-eslint/eslint-plugin : TypeScript 코드에 대한 ESLint 규칙을 적용하는 데 도움을 주는 플러그인입니다. TypeScript 프로젝트에서 사용됩니다.
@babel/eslint-parser 대신 @typescript-eslint/parser 를 사용합니다.

@babel/eslint-parser : JavaScript 코드를 분석하는 데 사용됩니다. 주로 최신 JavaScript 버전 (ES6 이상) 및 Babel을 사용하여 작성된 코드를 지원합니다. 이것은 일반 JavaScript 프로젝트에서 사용됩니다.

@typescript-eslint/parser : TypeScript 코드를 파싱하여 ESLint에 대한 이해를 도와주는 파서입니다. TypeScript 코드를 정확하게 분석하는 데 사용됩니다.
eslint-plugin-standard 대신 eslint-config-standard-with-typescript 를 사용합니다.

eslint-plugin-standard : 패키지는 StandardJS 스타일 가이드를 따르는 데 도움을 주는 ESLint 플러그인입니다. StandardJS는 JavaScript 코드를 일관된 스타일로 작성하도록 하는 스타일 가이드입니다. 이 플러그인은 표준 규칙을 적용하고 검사하며, 프로젝트에서 일관된 스타일을 유지하는 데 도움이 됩니다.

eslint-config-standard-with-typescript : 이 패키지는 TypeScript 프로젝트를 위한 StandardJS 스타일 가이드를 설정하는 것을 돕는 ESLint 구성입니다. TypeScript를 사용하는 경우 JavaScript보다 타입 시스템이 엄격하기 때문에 TypeScript와 함께 StandardJS 스타일 가이드를 사용하려는 프로젝트에 유용합니다.

config은 설정 만을 포함할 수 있고,
plugin은 설정 뿐만 아니라 자신만의 규칙, 프로세서, 설정 등을 모두 포함할 수 있다.

JS 및 TS 공통 설정 패키지

eslint : JavaScript 및 TypeScript 코드의 정적 분석을 수행하여 코드 품질을 검사하고 일관된 코드 스타일을 적용하는 도구입니다. 코드 스타일 규칙을 정의하고 해당 규칙을 준수하지 않는 코드에 대한 경고나 오류를 표시할 수 있습니다. 일반적으로 .eslintrc 파일에서 ESLint 구성을 설정할 수 있습니다.

eslint-plugin-import : JavaScript 또는 TypeScript 프로젝트에서 import 및 export 문에 대한 다양한 규칙을 제공합니다. 이 플러그인은 모듈 가져오기 및 내보내기의 동작을 분석하고, 모듈 간의 종속성을 관리하는 데 도움을 줍니다.

eslint-plugin-node : Node.js 환경에서 코드를 작성할 때 사용하는 ESLint 플러그인입니다. Node.js 관련 규칙을 설정할 수 있습니다.

eslint-plugin-promise : 프로미스 관련 코드에 대한 ESLint 규칙을 제공하는 플러그인입니다. 프로미스 처리 및 오류 처리와 관련된 규칙을 설정할 수 있습니다.

eslint-plugin-react : React 프로젝트에서 사용하는 JSX와 관련된 ESLint 규칙을 제공하는 플러그인입니다. React 컴포넌트와 JSX에 대한 규칙을 설정할 수 있습니다.

eslint-plugin-react-hooks : React 훅 (Hooks)을 사용하는 코드에 대한 ESLint 규칙을 제공하는 플러그인입니다. React Hooks 규칙을 설정할 수 있습니다.

eslint-plugin-react-refresh : React 개발 서버에서 사용할 수 있는 기능으로, 코드 변경 사항을 빠르게 적용하여 개발자가 애플리케이션을 새로 고치지 않고도 변경 사항을 볼 수 있게 해줍니다.

더욱 정교한 Fromatting 을 위한 패키지 설치

simple-import-sort git
unused-inports git

npm i -D eslint-plugin-simple-import-sort eslint-plugin-unused-imports

eslint-plugin-simple-import-sort : import한 Package를 알파벳 순서대로 Sorting 하고, 절대경로로 import 된 그룹과 상대경로로 import 된 그룹을 자동으로 분리시켜 줍니다.

eslint-plugin-unused-imports : import한 Package를 실제로 사용하지 않았을 때 해당 Package의 Import 구문을 자동으로 제거해줍니다.

Prettier 설정에 필요한 패키지는 다음과 같습니다.

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

prettier 패키지

prettier : Prettier는 코드 포맷팅 도구로, 자동으로 일관된 코드 스타일을 적용하여 코드를 보기 좋게 만듭니다. Prettier는 자동으로 줄바꿈, 들여쓰기, 콤마 및 세미콜론 위치 등을 조정하여 코드를 정렬합니다. 코드 포맷팅 규칙을 설정하고 프로젝트에 적용할 수 있으며 .prettierrc 통해 설정을 적용할 수 있습니다.

eslint-config-prettier : ESLint와 Prettier는 모두 코드 스타일을 관리하는데 사용되지만, ESLint의 일부 규칙과 Prettier의 일부 규칙이 충돌할 수 있습니다. eslint-config-prettier는 ESLint의 규칙 중 Prettier와 충돌하는 규칙을 비활성화하여 두 도구가 함께 사용될 때 일관된 코드 스타일을 유지할 수 있도록 도와줍니다.

eslint-plugin-prettier : 이 플러그인은 ESLint에서 Prettier를 실행할 수 있도록 해줍니다. Prettier는 주로 코드 포맷팅을 담당하지만, ESLint에서 실행되어야 하는 일부 규칙도 있을 수 있습니다.
eslint-plugin-prettier Prettier를 사용하여 코드를 자동으로 포맷팅하고, 포맷팅 결과에 대한 ESLint 경고를 제공합니다

.eslintrc

parser: eslint 의 입맛에 맞게 코드를 읽고 변환해준다.
parserOptions: 읽어올 코드에 대한 정보
plugins: 기본 규칙외에 부가적인 규칙
env: 개발할 코드의 환경
extends: 베이스가 되는 룰
rules: 유저가 정의한 룰

// 기본 샘플 설정 파일이며, 절대적인 Setting은 아닙니다. 프로젝트 별 상이하고 필요 옵션은 ESLint 공식 문서 참고.
{
  "root": true, // Monorepo 환경에서 유용하지만 ESLint 설정 파일이 하나만 있는 코드 저장소에서도 혹여나 상위 폴더에 있는 설정 파일에 영향을 받는 일이 없도록 root 옵션을 true로 설정하는 경우가 많음.
  "env": {
    "browser": true, // 브라우저 환경을 사용한다.
    "node": true, // Node.js 환경을 사용한다.
    "es6": true // ECMAScript 2015 (ES6) 환경을 사용한다.
  },
  "parser": "@babel/eslint-parser", // JavaScript 사용시, Typescript 사용시 "@typescript-eslint/parser" 사용
  "parserOptions": {
    "ecmaVersion": "latest", // 가장 최근에 지원되는 버전을 사용
    "sourceType": "module", // module로 설정된 경우에는 import 구문을 사용하는 것이 유효
    "ecmaFeatures": {
      "jsx": true // jsx 활성화 *jsx 구문 지원과 react 지원은 틀리므로 react를 사용하는 경우 eslint-plugin-react 사용
    }
  },
  "plugins": [
    "react",
    "import",
    "node",
    "promise",
    "react-hooks",
    "react-refresh", 
    "prettier",
    "eslint-plugin-simple-import-sort",
    "unused-imports"
  ],
  "settings": {
    "react": {
      "createClass": "createReactClass", // React 컴포넌트를 작성할 때 createClass 함수를 사용하는 경우
      "pragma": "React", // JSX 코드에서 React의 가상 DOM 요소를 나타내는데 사용되는 식별자를 지정
      "version": "detect" // ESLint가 사용중인 React 버전을 감지하고 적절한 규칙을 적용
    }
  },
  "extends": [
    "eslint:recommended", //사용하지 않는 변수와 같은 코드 품질 검사는 ESLint 추천 규칙 사용
    "plugin:react/recommended", // ESLint 설정에서 React 플러그인의 권장 규칙 세트를 활성화
    "plugin:prettier/recommended" // eslint-config-prettier를 실제로 활성화시켜서 중복되는 룰을 끄도록 하는 설정.
  ],
  "rules": {
    "no-var": "error", // var 허용 금지
    "no-empty-static-block": "error", // 빈 함수를 허용하지 않음.
    "unused-imports/no-unused-imports": "error" // 사용되지 않는 import 문을 검사하여 코드베이스에서 불필요한 import 문을 감지
    "require-await": "error", // async 사용 시 await 사용 필수
    "react-refresh/only-export-components": "warn", //   React.memo, React.forwardRef, React.lazy 등과 같은 React의 고급 기능을 사용하지 않는 경우에 발생할 수 있는 경고를 나타냅니다. 이러한 고급 기능을 사용할 때 Fast Refresh와 호환성 문제가 발생할 수 있으므로, 이 규칙은 개발자에게 해당 부분을 검토  
    "react-hooks/rules-of-hooks": "error", // React Hooks 사용에 관련된 규칙 적용
    "react-hooks/exhaustive-deps": "warn", // React Hooks의 useEffect 함수에서 의존성 배열을 검사
    "no-console": "warn", // 빈 콘솔에 대한 경고
    "react/react-in-jsx-scope": "off", //import React from 'react' 없이 사용 가능한 설정
    "react/prop-types": "off", //  PropTypes를 사용하지 않도록 설정
    "prettier/prettier": "error", // Prettier와 ESLint의 충돌을 방지하고 코드 스타일을 통일
  }
}

// 기본 샘플 설정 파일이며, 절대적인 Setting은 아닙니다. 프로젝트 별 상이하고 필요 옵션은 ESLint 공식 문서 참고.
{
  "root": true, // Monorepo 환경에서 유용하지만 ESLint 설정 파일이 하나만 있는 코드 저장소에서도 혹여나 상위 폴더에 있는 설정 파일에 영향을 받는 일이 없도록 root 옵션을 true로 설정하는 경우가 많음.
  "env": {
    "browser": true, // 브라우저 환경을 사용한다.
    "node": true, // Node.js 환경을 사용한다.
    "es6": true // ECMAScript 2015 (ES6) 환경을 사용한다.
  },
  "parser": "@typescript-eslint/parser", // TypeScript 사용시, JavaScript 사용시 "@babel/eslint-parser" 사용
  "parserOptions": {
    "ecmaVersion": "latest", // 가장 최근에 지원되는 버전을 사용
    "sourceType": "module", // module로 설정된 경우에는 import 구문을 사용하는 것이 유효
    "ecmaFeatures": {
      "jsx": true // jsx 활성화 *jsx 구문 지원과 react 지원은 틀리므로 react를 사용하는 경우 eslint-plugin-react 사용
    }
  },
  "plugins": [
    "react",
    "import",
    "node",
    "promise",
    "react-hooks",
    "react-refresh", 
    "@typescript-eslint",
    "prettier",
    "eslint-plugin-simple-import-sort",
    "unused-imports"
  ],
  "settings": {
    "react": {
      "createClass": "createReactClass", // React 컴포넌트를 작성할 때 createClass 함수를 사용하는 경우
      "pragma": "React", // JSX 코드에서 React의 가상 DOM 요소를 나타내는데 사용되는 식별자를 지정
      "version": "detect" // ESLint가 사용중인 React 버전을 감지하고 적절한 규칙을 적용
    }
  },
  "extends": [
    "eslint:recommended", //사용하지 않는 변수와 같은 코드 품질 검사는 ESLint 추천 규칙 사용
    "plugin:react/recommended", // ESLint 설정에서 React 플러그인의 권장 규칙 세트를 활성화
    "plugin:@typescript-eslint/recommended", // TypeScript 사용 시 적용
    "plugin:prettier/recommended" // eslint-config-prettier를 실제로 활성화시켜서 중복되는 룰을 끄도록 하는 설정.
  ],
  "rules": {
    "no-var": "error", // var 허용 금지
    "no-empty-static-block": "error", // 빈 함수를 허용하지 않음.
    "unused-imports/no-unused-imports": "error" // 사용되지 않는 import 문을 검사하여 코드베이스에서 불필요한 import 문을 감지
    "require-await": "error", // async 사용 시 await 사용 필수
    "@typescript-eslint/no-unused-vars": "off", // 타입 스크립트 사용 시 인터페이스 충돌 방지
    "react-refresh/only-export-components": "warn", //   React.memo, React.forwardRef, React.lazy 등과 같은 React의 고급 기능을 사용하지 않는 경우에 발생할 수 있는 경고를 나타냅니다. 이러한 고급 기능을 사용할 때 Fast Refresh와 호환성 문제가 발생할 수 있으므로, 이 규칙은 개발자에게 해당 부분을 검토    
    "react-hooks/rules-of-hooks": "error", // React Hooks 사용에 관련된 규칙 적용
    "react-hooks/exhaustive-deps": "warn", // React Hooks의 useEffect 함수에서 의존성 배열을 검사
    "no-console": "warn", // 빈 콘솔에 대한 경고
    "react/react-in-jsx-scope": "off", //import React from 'react' 없이 사용 가능한 설정
    "react/prop-types": "off", //  PropTypes를 사용하지 않도록 설정
    "prettier/prettier": "error", // Prettier와 ESLint의 충돌을 방지하고 코드 스타일을 통일
    "@typescript-eslint/no-var-requires": "off" // TypeScript 코드에서 require를 사용할 수 있습니다.
  }
}

eslint:recommended 가 지원하는 rules

✅ - eslint:recommended 의 extends의 포함 Rules Reference
🔧 - --fix 옵션으로 자동으로 수정 Fix Reference

.eslintignore

.eslintignore : .eslintignore 파일은 보통 프로젝트 루트 디렉토리에 위치하며, ESLint에서 무시할 파일과 디렉토리를 지정하는 설정 파일입니다. ESLint는 이 파일을 읽어서 해당 파일 및 디렉토리의 내용을 코드 검사 대상에서 제외합니다. 이를 통해 프로젝트에서 특정 파일 또는 디렉토리를 코드 검사의 대상에서 제외할 수 있습니다.

// node_modules 은 기본적으로 무시함. ignore 필요한 폴더 추가

build
dist
public

.prettierrc

{
  "singleQuote": true, // 작은 따옴표로 문자 감싸기
  "semi": true, // 세미콜론을 코드 끝에 사용
  "useTabs": false, // 탭을 사용할지 여부
  "tabWidth": 2, // 들여쓰기 간격
  "trailingComma": "all", // 객체나 배열의 마지막 요소 뒤에 항상 쉼표를 사용하도록 설정합니다.
  "printWidth": 80, // 한 줄의 최대 길이를 나타냅니다. 코드가 지정된 길이를 초과할 경우 줄 바꿈을 합니다.
  "arrowParens": "always", // 화살표 함수의 매개변수 주위에 괄호를 사용할지 여부를 결정
  "endOfLine": "lf" // lf (Line Feed): Unix 및 Linux 시스템에서 주로 사용되는 줄 끝 문자입니다. 이 문자는 한 줄의 끝을 나타내기 위해 사용됩니다.
					//crlf (Carriage Return + Line Feed): Windows 시스템에서 주로 사용되는 줄 끝 문자입니다. 
}

.prettierignore

// node_modules 은 기본적으로 무시함. ignore 필요한 폴더 추가

build
dist
public

cli 명령어를 이용하여 실행하기

package.json 파일에 scripts에 명령어를 추가한다.

	"scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
      "prettier": "prettier \"src/**/*.{js,jsx,ts,tsx}\""
  	},

npm run lint , npm run prettier 를 사용하여 검증이 가능하다.

3. Webpack & Babel 설정하기

TS 프로젝트 진행 시 (JS 프로젝트 시 생략)

npm i -D typescript

tsconfig.json (JS 프로젝트 시 생략)

{
  "compilerOptions": {
    "target": "ESNext", //  TypeScript가 생성하는 JavaScript 코드의 대상 버전을 ESNext로 설정합니다. 이는 최신 ECMAScript 표준을 따르도록 합니다.
    "lib": ["DOM", "DOM.Iterable", "ESNext"], // TypeScript가 사용할 라이브러리 목록을 정의합니다. "dom" 및 "dom.iterable"은 DOM과 관련된 타입을 추가하고, "esnext"는 최신 ECMAScript 표준을 지원합니다.
    "module": "ESNext", // 모듈 시스템을 ESNext로 설정합니다. ESNext는 ECMAScript의 모듈 표준을 의미합니다.
    "skipLibCheck": true, // 라이브러리 파일의 유효성 검사를 건너뛰도록 설정합니다.

    /* Bundler mode */
    "moduleResolution": "node", // 일반적으로 Node.js 환경에서 사용하는 것과 유사한 방식으로 모듈을 해석
    "allowImportingTsExtensions": true, // TypeScript 확장자인 .ts 파일을 import할 수 있도록 허용합니다.
    "esModuleInterop": true, // CommonJS 모듈에서 ES 모듈을 가져오거나 반대로 ES 모듈에서 CommonJS 모듈을 가져올 때 더 원활하게 동작
    "resolveJsonModule": true, // 파일을 모듈처럼 가져올 수 있도록 설정합니다.
    "isolatedModules": true, // 개별 TypeScript 파일을 컴파일하는 것을 허용합니다. 이는 빠른 개발 시간을 위해 유용합니다.
    "noEmit": true, // TypeScript 컴파일러에게 JavaScript 파일을 생성하지 말도록 지시합니다. 이는 TypeScript를 사용하여 타입 검사만 수행하고 JavaScript 파일을 생성하지 않는다는 의미입니다.
    "jsx": "react-jsx", // JSX 구문을 사용하고, React의 JSX 변환을 활성화합니다.

    /* Linting */
    "allowJs": true, // JavaScript 파일을 TypeScript 프로젝트에 포함할 수 있도록 허용합니다.
    "strict": true, //  엄격한 타입 체크를 활성화합니다.
    "noUnusedLocals": true, //사용하지 않는 지역 변수에 대한 경고를 활성화합니다.
    "noUnusedParameters": true, //  사용하지 않는 함수 매개변수에 대한 경고를 활성화합니다.
    "noFallthroughCasesInSwitch": true, // switch 문에서 break 없이 다음 case로 진행하는 것을 방지합니다.
    "forceConsistentCasingInFileNames": true, // 파일 이름에 대소문자 불일치가 있는 경우 경고를 발생시킵니다.
    "baseUrl": ".", // 상대 경로를 기준으로 모듈을 찾을 때의 기본 경로를 현재 디렉토리로 설정합니다.
    "paths": {
      // 모듈 경로 별칭을 설정하여, @/로 시작하는 모든 모듈을 ./src/ 디렉토리로 해석합니다.
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"] // TypeScript 컴파일에 포함되어야 하는 파일과 디렉토리를 지정합니다.
}

🛠️ `Babel` 설정하기

Babel 이란 Javascript를 특정 타겟 버전으로 코드를 변환해줍니다.
⇒ 코드를 변환하는 역할 ex) ES6 이상의 문법을 ES5 아래의 문법으로 변경

Babel 설정에 필요한 패키지는 다음과 같습니다.

npm i -D @babel/core @babel/preset-env @babel/preset-react

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

@babel/core : Babel의 핵심 패키지로, JavaScript 코드를 변환하고 트랜스파일하는 역할을 합니다. Babel 플러그인과 프리셋을 구동하는 엔진 역할을 합니다.

@babel/preset-env : Babel 프리셋 중 하나로, 환경에 따라 필요한 JavaScript 기능을 자동으로 트랜스파일링하는 데 사용됩니다. 최신 JavaScript 문법을 이전 환경에서 사용할 수 있도록 해줍니다. 브라우저 지원을 설정하거나 환경 변수에 따라 코드를 최적화할 수 있습니다.

@babel/preset-react : React 애플리케이션을 위한 Babel 프리셋입니다. JSX 문법을 변환하는 데 사용되며, React 코드를 이전 JavaScript 버전에서 사용 가능한 형태로 변환합니다. 최신 React 기능 및 JSX를 이전 환경에서 사용할 수 있도록 도와줍니다.

@babel/preset-typescript : Babel에서 TypeScript 코드를 변환하기 위한 Babel 프리셋(preset) 중 하나입니다. TypeScript는 JavaScript의 상위 집합 언어로 정적 타입 검사 및 컴파일링을 제공하며, .ts 또는 .tsx 확장자를 가진 파일에서 사용되며, TypeScript 코드를 JavaScript 코드로 변환할 수 있습니다.

.babelrc

.babelrc 는 프로젝트의 특정 설정을 정의하고 Babel에게 어떤 플러그인과 프리셋을 사용해야 하는지 알려줄 수 있습니다. 주로 프로젝트 루트 디렉토리에 위치합니다.

{
  "presets": [
		"@babel/preset-env", // 환경에 따라 JavaScript 코드를 변환하는 데 사용됩니다. 지원되는 환경에 따라 필요한 JavaScript 기능을 자동으로 트랜스파일링하여 최신 JavaScript 문법을 이전 환경에서 실행 가능하게 만듭니다.
		["@babel/preset-react", { "runtime": "automatic" }] //  React 애플리케이션을 위한 Babel 설정입니다. React 코드를 변환하는 데 사용됩니다. { "runtime": "automatic" } 옵션은 React 17 이상에서 도입된 새로운 JSX 트랜스폼을 사용하도록 설정합니다. "automatic" 모드를 사용하면 React 임포트를 수동으로 추가하지 않고도 JSX를 사용할 수 있게 됩니다.
	]
}

{
    "presets": [
        "@babel/preset-env", // 환경에 따라 JavaScript 코드를 변환하는 데 사용됩니다. 지원되는 환경에 따라 필요한 JavaScript 기능을 자동으로 트랜스파일링하여 최신 JavaScript 문법을 이전 환경에서 실행 가능하게 만듭니다.
        ["@babel/preset-react", { "runtime": "automatic" }], //  React 애플리케이션을 위한 Babel 설정입니다. React 코드를 변환하는 데 사용됩니다. { "runtime": "automatic" } 옵션은 React 17 이상에서 도입된 새로운 JSX 트랜스폼을 사용하도록 설정합니다. "automatic" 모드를 사용하면 React 임포트를 수동으로 추가하지 않고도 JSX를 사용할 수 있게 됩니다.
        "@babel/preset-typescript" //TypeScript 코드를 JavaScript로 변환하기 위한 프리셋입니다. TypeScript 파일(.ts 또는 .tsx) 내의 TypeScript 문법을 JavaScript로 변환하고, 타입 어노테이션 및 정적 타입 검사 관련 코드를 제거합니다.
    ]
}

🛠️ `Webpack` 설정하기

Webpack 이란 JavaScript 애플리케이션을 위한 모듈 번들러입니다. 모듈 번들러란 여러 개의 JavaScript 파일과 다른 종속성 파일(스타일 시트, 이미지, 폰트 등)을 하나의 번들 된 파일로 결합하고 최적화하는 도구입니다.

Webpack 설정에 필요한 패키지는 다음과 같습니다.

npm i -D webpack webpack-cli webpack-dev-server babel-loader html-webpack-plugin

webpack : 웹팩(Webpack)은 모듈 번들러로서, 여러 종류의 파일(JavaScript, CSS, 이미지 등)을 하나로 묶고 최적화하는 도구입니다. 웹 애플리케이션 개발에 필수적이며, 설정 파일을 통해 애플리케이션의 번들링 방식을 제어할 수 있습니다.

webpack-cli : 웹팩 명령줄 도구입니다. 웹팩을 사용하는 프로젝트에서 웹팩 명령을 터미널에서 실행하고 프로젝트를 빌드하는 데 사용됩니다.

webpack-dev-server : 개발 서버를 실행하기 위한 패키지입니다. 개발 중인 애플리케이션을 로컬 서버에서 실행하고 코드 변경 시 자동으로 다시 빌드하며, 브라우저를 자동으로 새로고침하여 빠른 개발 환경을 제공합니다.

babel-loader : 웹팩과 함께 사용되는 로더 중 하나로, Babel을 사용하여 ES6+ 코드를 이전 JavaScript 버전으로 변환하는 역할을 합니다. 이를 통해 최신 JavaScript 문법을 사용하고 브라우저 호환성을 유지할 수 있습니다.

html-webpack-plugin : HTML 파일을 생성하고 웹팩 번들을 자동으로 삽입하는 플러그인입니다. 웹 애플리케이션의 루트 HTML 파일을 관리하고 동적으로 번들 파일을 추가하여 프로덕션 및 개발 환경에서 사용할 수 있습니다.

webpack.config.js

entry: 빌드의 시작점
output: 빌드된 파일이 어디에 위치할지
module: 웹팩의 동작에 도움을 주는 loader 들이 위치 (ex. babel-loader, style-loader 등)
extensions: import 시 생략가능한 확장자들을 정의

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, './src'), // src 내부의 index.js  파일을 시작점으로 지정
  output: { // 빌드한 결과물을 어디에 생성할 것 인가
    filename: 'bundle.[hash].js', // 생성된 번들 파일의 이름을 지정하며, [hash]는 각 빌드에서 생성된 고유한 해시 값을 포함한 파일 이름을 생성
    path: path.resolve(__dirname, 'dist'), // 결과물이 저장될 폴더의 경로를 지정
    publicPath: '/',
  },
  module: {
    rules: [ // 어떤 파일들을 어떤 loader 를 이용하여 해석 할 것 인가
      {
        test: /\.(js|jsx)$/, // JavaScript 및 JSX 파일을 해석하기 위한 로더 설정
        exclude: /node_modules/, // node_modules 폴더 내의 파일들을 제외
        use: 'babel-loader', //해당 규칙을 적용할 로더
      },
    ],
  },
  resolve: {
    extensions: ['.js'], // .js 확장자 생략 가능
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 기준이되는 html 파일
      filename: './index.html', // 빌드 후 사용할 html 파일 이름
    }),
  ],
  devServer: {
    open: true,// 웹팩 개발 서버가 실행될 때 기본 웹 브라우저가 자동으로 열립니다.
    historyApiFallback: true, // SPA(Single Page Application)에서 브라우저 라우팅을 다룰 때 유용합니다. SPA에서는 페이지 URL이 변경되더라도 서버에 요청을 보내지 않고 클라이언트 측에서 라우팅을 처리합니다. 
  },
}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, './src'), // src 내부의 index.ts 파일을 시작점으로 지정
  output: { // 빌드한 결과물을 어디에 생성할 것 인가
    filename: 'bundle.[hash].js', // 생성된 번들 파일의 이름을 지정하며, [hash]는 각 빌드에서 생성된 고유한 해시 값을 포함한 파일 이름을 생성
    path: path.resolve(__dirname, 'dist'), // 결과물이 저장될 폴더의 경로를 지정
    publicPath: '/',
  },
  module: {
    rules: [ // 어떤 파일들을 어떤 loader 를 이용하여 해석 할 것 인가
      {
        test: /\.(js|jsx|ts|tsx)$/, // JavaScript, Typescript 및 JSX, Tsx 파일을 해석하기 위한 로더 설정
        exclude: /node_modules/, // node_modules 폴더 내의 파일들을 제외
        use: 'babel-loader', //해당 규칙을 적용할 로더
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.tsx', '.ts'], // 확장자 생략 가능 목록
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 기준이되는 html 파일
      filename: './index.html', // 빌드 후 사용할 html 파일 이름
    }),
  ],
  devServer: {
    open: true,// 웹팩 개발 서버가 실행될 때 기본 웹 브라우저가 자동으로 열립니다.
    historyApiFallback: true, // SPA(Single Page Application)에서 브라우저 라우팅을 다룰 때 유용합니다. SPA에서는 페이지 URL이 변경되더라도 서버에 요청을 보내지 않고 클라이언트 측에서 라우팅을 처리합니다. 
  },
}

scripts 명령어에 build 및 dev 추가

  "scripts": {
    "dev": "webpack serve --mode=development" // 개발 서버가 시작되며, 개발 모드로 빌드되고 소스 코드 변경 시 자동으로 다시 빌드되며, 웹 애플리케이션을 확인하기 위한 로컬 개발 서버가 실행
    "build": "webpack --mode=production", // 웹팩을 프로덕션 모드로 설정하고 실행합니다. 프로덕션 모드에서 웹팩은 코드 최적화 및 압축을 수행하여 번들 크기를 줄이고 성능을 향상시킵니다. 또한 환경 변수를 제어하여 개발 환경과 별도로 설정할 수 있습니다.
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "prettier": "prettier \"src/**/*.{js,jsx,ts,tsx}\""
  },

4. React 설정하기

JS

npm i -S react react-dom

TS

npm i -S react react-dom
npm i -D @types/react  @types/react-dom

react : React 애플리케이션을 개발할 때 필요한 핵심 라이브러리입니다.

react-dom : React 애플리케이션을 웹 브라우저에서 렌더링할 때 사용됩니다.

@types/react : React 라이브러리의 TypeScript 타입 정의를 포함하고 있어서 TypeScript 프로젝트에서 React 코드를 작성할 때 타입 검사 및 코드 완성을 지원합니다.

@types/react-dom : React DOM 라이브러리의 TypeScript 타입 정의를 제공하며, React와 함께 웹 브라우저에서 사용될 때 타입 검사를 돕습니다.

JS, TS 공통

public/index.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

src/App.jsx

export default function App() {
  return <div className="App">Hello, React</div>;
}

src/index.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App';

// React18 
const root = document.getElementById('app')

  ReactDOM.createRoot(root).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  );

src/App.tsx

export default function App() {
  return <div className="App">Hello, React</div>;
}

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// React18 
const root = document.getElementById('app');

if (root != null) {
  ReactDOM.createRoot(root).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  );
}

Terminal 명령어 npm run dev 실행 후 로컬 개발 서버 확인

5. .gitignore 적용

.gitignore 자동생성 사이트

.gitignore 파일은 Git 저장소에 포함되지 않아야 하는 파일 및 디렉토리를 지정하는 데 사용됩니다. 이 파일을 사용하여 Git으로 추적되지 않아야 하는 파일을 제어할 수 있으며 프로젝트의 root 경로에 만들어줍니다.

# Ignore node_modules directory
node_modules/

# Ignore logs and autogenerated files
logs/
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Ignore .env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# Ignore .DS_Store files
.DS_Store

# Ignore .vscode directory
.vscode/

# Ignore .idea directory
.idea/

# Ignore coverage directory
coverage/

# Ignore .cache directory
.cache/

# Ignore dist directory
dist/

# Ignore build directory
build/

# Ignore *.swp files
*.swp

# Ignore .nyc_output directory
.nyc_output/

# Ignore .sonarqube directory
.sonarqube/

# Ignore .next directory
.next/

# Ignore storybook-static directory
storybook-static/

# Ignore Jest coverage directory
coverage/

# Ignore .gitignore itself
!.gitignore

6. husky 설정

eslintrc 에 적용된 rules와 extends에 eslint:recommended 에 에러가 발생 시 커밋 불가능

git repository에 init project setting 을 git 연동

Eslint 자동화 설정하기

npm i -D husky lint-staged

npx husky-init

npm install --save-dev husky : husky는 front-end 개발 환경에서 git-hook을 쉽게 제어 할 수 있게 도와주는 툴이다. git-hook 은 git에서 특정 이벤트 (commit,push etc...)가 발생했을때 hook을 통해 특정 스크립트를 실행할 수 있도록 도와줍니다.

npm install --save-dev lint-staged : lint-staged는 Git에 의해 스테이징된(staged) 파일에 대해 린트 검사를 실행하는 도구입니다. Git의 pre-commit 훅에 통합되어 변경된 파일만 선택적으로 린트 검사를 수행할 수 있습니다.

npx husky-init : .husky 디렉토리가 생성되고, 해당 디렉토리 내부의 스크립트를 수정하여 원하는 동작을 설정할 수 있습니다. 주로 .husky/pre-commit 파일을 수정하여 코드 커밋 전에 실행할 스크립트를 추가하면 됩니다.

./husky/pre-commit

	#!/usr/bin/env sh
	. "$(dirname -- "$0")/_/husky.sh"
	npm run lint

package.json 에 해당 소스 추가

	"scripts": {
   	  "dev": "webpack serve --mode=development",
      "build": "webpack --mode=production",
      "test": "echo \"Error: no test specified\" && exit 1",
      "lint": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"", // eslint를 사용하여 프로젝트의 소스 코드를 린트 검사하고, 가능한 경우에는 자동으로 코드 스타일을 수정
      "prettier": "prettier \"src/**/*.{js,jsx,ts,tsx}\"",
      "prepare": "husky install"
    },
    "husky": {
      "hooks": {
        "pre-commit":"lint-staged" // lint staged 실행
      }
    },
    "lint-staged": {
      "src/**/*.{js,jsx,ts,tsx}": "npm run lint" //  실행 전 npm run lint 실행
    }

7. Basic Directory Structure 설정

src/
└── apis/
└── assets/
└── components/
└── constants/
└── contexts/
└── hooks/
└── layouts/
└── mocks/
└── pages/
└── stores/
└── tests/
└── types/ (javascript 사용 시 생략)
└── utils/
└── App.tsx (App.jsx)/
└── index.tsx (index.jsx)/

babypig

이전 포스트

[Webpack] React Setting

React.js

[Webpack] React Setting

1. Terminal 에서 npm init 하기

2. Eslint Prettier 설정하기

Eslint 설정에 필요한 패키지는 다음과 같습니다.

JS 및 TS 공통 설정 패키지

더욱 정교한 Fromatting 을 위한 패키지 설치

Prettier 설정에 필요한 패키지는 다음과 같습니다.

prettier 패키지

.eslintrc

eslint:recommended 가 지원하는 rules

.eslintignore

.prettierrc

.prettierignore

cli 명령어를 이용하여 실행하기

3. Webpack & Babel 설정하기

TS 프로젝트 진행 시 (JS 프로젝트 시 생략)

tsconfig.json (JS 프로젝트 시 생략)

🛠️ `Babel` 설정하기

Babel 설정에 필요한 패키지는 다음과 같습니다.

.babelrc

🛠️ `Webpack` 설정하기

Webpack 설정에 필요한 패키지는 다음과 같습니다.

webpack.config.js

scripts 명령어에 build 및 dev 추가

4. React 설정하기

JS

TS

JS, TS 공통

5. .gitignore 적용

6. husky 설정

git repository에 init project setting 을 git 연동

Eslint 자동화 설정하기

7. Basic Directory Structure 설정

useInterval과 useRequestAnimationFrame

0개의 댓글

[Webpack] React Setting

React.js

[Webpack] React Setting

1. Terminal 에서 npm init 하기

2. Eslint Prettier 설정하기

Eslint 설정에 필요한 패키지는 다음과 같습니다.

JS 및 TS 공통 설정 패키지

더욱 정교한 Fromatting 을 위한 패키지 설치

Prettier 설정에 필요한 패키지는 다음과 같습니다.

prettier 패키지

.eslintrc

eslint:recommended 가 지원하는 rules

.eslintignore

.prettierrc

.prettierignore

cli 명령어를 이용하여 실행하기

3. Webpack & Babel 설정하기

TS 프로젝트 진행 시 (JS 프로젝트 시 생략)

tsconfig.json (JS 프로젝트 시 생략)

🛠️ Babel 설정하기

Babel 설정에 필요한 패키지는 다음과 같습니다.

.babelrc

🛠️ Webpack 설정하기

Webpack 설정에 필요한 패키지는 다음과 같습니다.

webpack.config.js

scripts 명령어에 build 및 dev 추가

4. React 설정하기

JS

TS

JS, TS 공통

5. .gitignore 적용

6. husky 설정

git repository에 init project setting 을 git 연동

Eslint 자동화 설정하기

7. Basic Directory Structure 설정

useInterval과 useRequestAnimationFrame

0개의 댓글

🛠️ `Babel` 설정하기

🛠️ `Webpack` 설정하기