[React] 프로젝트 환경 초기설정

하니·2024년 11월 9일

React 길잡이

목록 보기

5/21

💠 Vite 설치 방법

npm create vite@latest {프로젝트명} -- --template react

npm i

폴더 설명

📁 package.json
npm 프로젝트 설정 파일. 프로젝트에 대한 메타데이터와 프로젝트에서 사용하는 의존성 및 스트립트가 정의되어 있다.
스크립트 ex) 프로젝트의 실행, 빌드 등을 처리하는 명령어 "dev": "vite" , "build": "vite build" ...

📁 vite.config.js
Vite 설정 파일. Vite 프로젝트의 설정을 정의하고 필요에 따라 빌드 옵션, 플러그인 설정, 경로 별칭 등을 여기서 설정한다.

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.13.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.3",
    "eslint": "^9.13.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.11.0",
    "vite": "^5.4.10"
  }
}

dependencies vs. devDependencies
dependencies : 프로덕션 환경에서 필수적인 패키지들을 지정한다. 이 패키지들은 애플리케이션이 동작하는 데 꼭 필요한 라이브러리들이다.
ex) React, Axios ..
devDependencies : 개발 환경에서만 필요한 패키지들을 지정한다. 주로 코드 작성, 테스트, 빌드 등에 사용된다.
ex) eslint, prettier, webpack

💠 Prettier 설치

ESLint : 코드의 문법 오류와 코드 품질을 검토하는 도구
Prettier : 코드 스타일을 자동으로 포맷팅하는 도구
*ESLint와 Prettier를 함께 설정하지 않으면, 두 도구가 서로 다른 규칙을 적용하여 충돌이 발생할 수 있다. 따라서 Prettier의 코드 스타일 규칙을 ESLint와 통합하자!

npm install -D -E prettier
// -D: Prettier를 개발 의존성으로 설치 
// -E: Prettier를 특정 버전으로 고정하여 설치

Prettier 설정 파일

프로젝트 루트에 .prettierrc 파일 생성하고 설정을 추가한다.

{
  "printWidth": 100,  // 한 줄의 최대 길이를 100자로 제한
  "tabWidth": 2,  // 들여쓰기 크기를 2칸으로 설정
  "trailingComma": "all",  // 모든 곳에서 마지막 요소 뒤에 쉼표 추가
  "singleQuote": true,  // 문자열에 작은 따옴표(') 사용
  "jsxSingleQuote": true,  // JSX에서 작은 따옴표(') 사용
  "semi": false  // 세미콜론을 사용하지 않음
}

ESLint Prettier 충돌 방지 설정

충돌 방지 플러그인 설치
ESLint와 Prettier가 함께 사용할 때, 코드 스타일 충돌을 방지하기 위해 eslint-config-prettier와 eslint-plugin-prettier를 설치하고 설정한다.

// 충돌 방지 플러그인 설치
npm install -D eslint-config-prettier eslint-plugin-prettier

// eslint-config-prettier: ESLint와 Prettier 간의 충돌을 방지하기 위해 Prettier와 충돌하는 ESLint 규칙을 비활성화합니다.
// eslint-plugin-prettier: ESLint에서 Prettier 규칙을 실행하게 만들어, 코드 포맷팅을 ESLint 규칙에 포함시킵니다.

ESlint 설정 파일 업데이트
eslint.config.js파일은 프로젝트를 생성할 때 기본으로 만들어지기 때문에 해당 파일을 수정하면 된다.

import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import prettier from 'eslint-config-prettier' // Prettier 설정 추가
import prettierPlugin from 'eslint-plugin-prettier' // Prettier 플러그인 추가

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    settings: { react: { version: '18.3' } },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
      prettier: prettierPlugin, // Prettier 플러그인 추가
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
      'prettier/prettier': 'error', // Prettier 규칙을 위반하면 ESLint에서 에러로 처리
    },
  },
]

prettier: prettierPlugin : Prettier 플러그인을 추가하여 Prettier 규칙을 ESLint에서 실행할 수 있도록 한다.
prettier/prettier: 'error' : Prettier의 코드 스타일 규칙을 위반하면 ESLint가 에러로 처리한다. 이를 통해 Prettier가 자동으로 코드 스타일을 관리하고, ESLint가 코드 품질을 검토한다.

💠 jsconfig.json 추가

프로젝트 루트에서 jsconfig.json 파일을 생성한다.

jsconfig.json을 추가해야 하는 이유
1. 경로 참조 : 상대경로(../../components/Test) 대신 절대경로(@/components/Test)를 사용할 수 있다.
2. VSCode와 같은 에디터에서 타입 자동 완성, 경로 자동 완성, 오류 경고 등의 기능을 원활하게 사용할 수 있다.
3. 타입 검사를 통해 js파일에서도 ts처럼 타입 경고를 받아서 더 안전하게 코드를 작성할 수 있다.
4. Vite 프로젝트에서 Vite 관련 타입을 인식하여, 개발 중에 정확한 타입 정보를 제공한다.

경로 별칭 설정 (Path Alias)

*jsconfig.json 파일에서 경로 별칭을 설정했으면, Vite에서도 경로 별칭을 설정해야 VSCode에서만이 아니라 빌드 시에도 올바르게 작동한다.
➡️ vite.config.js 파일은 빌드할 때 절대 경로로 잘 동작하게 해주는 것이고, jsconfig.json 파일은 VSCode 에디터에서 개발할 때 자동 완성을 해주기 위해 정의해준다고 생각하면 된다.

📁 jsconfig.json
나는 js파일에 대한 타입 검사 활성화는 하지 않았다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite/client"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/node_modules", "dist"]
}

📁 vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
});