React 프로젝트 초기 설정하기 (vite, eslint, prettier)

1. vite 프로젝트 생성

npm create vite@latest

🚨 리액트 앱 만들 때, project name을 .이라고만 하면 새로운 폴더가 생성되지 않게 만들 수 있다!!!! 😭

• 이걸 모르고… 이름 설정했다가 나중에 폴더 depth를 하나 빼려고했는데, gitignore이 없어져서 node_modules가 다 올라가는 바람에.. 프로젝트 초기 설정이기도하고 commit한게 별로 없어서 그냥 밀고 새로 했다..^^
• node_modules 지울 수 있긴한데 히스토리에 남긴하니까 깔끔하게 없애고 하는 걸로 함…

해결방법은 사실 git 레포 연결을 다르게 하거나, 불필요한 폴더 depth를 삭제하고 기존 작업한 파일을 바로 위로 옮겨주면 되는데, 이 과정에서 gitignore이 잘 들어가는지도 확인해줘야한다.

2. eslint, prettier 설정하기

• vite로 프로젝트를 생성하면 자동으로 eslint.config.js 파일이 만들어진다.

  • prettier는 따로 설치해주기

    npm install -D \
    eslint @eslint/js eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh \
    eslint-config-prettier prettier @types/react @types/react-dom

  • 설치 패키지

    • eslint → ESLint 코어
    • @eslint/js → JS 기본 추천 규칙
    • eslint-plugin-react → React 관련 규칙
    • eslint-plugin-react-hooks → Hooks 규칙
    • eslint-plugin-react-refresh → Fast Refresh 경고 방지
    • eslint-config-prettier → Prettier와 충돌 방지
    • prettier → 코드 포맷터
    • @types/react / @types/react-dom → TypeScript에서 React 타입 지원

  • -D는 --save-dev

    • 설치한 패키지를 개발 의존성(devDependencies)에 추가하겠다는 뜻
    • 즉, package.json 안에 기록됨

      "devDependencies": {
        "prettier": "^3.3.3",
        "eslint-config-prettier": "^9.0.0"
      }

dependencies

• 실제 애플리케이션 실행에 필요한 패키지
• 예: React, Axios 같은 런타임 라이브러리
• 앱을 배포하거나 실행할 때 같이 설치됨

devDependencies

• 개발할 때만 필요한 패키지
• 예: ESLint, Prettier, Jest, TypeScript
• 실제 배포/운영 환경에는 포함되지 않음

💡
ESLint는 코드의 오류를 표시해 주는 린트 도구이고, Prettier는 코드를 설정한 규칙대로 포맷팅 해주는 포맷터이다. 서로가 각자의 역할을 충실히 하면 좋지만, 아무래도 두 개의 역할이 서로 비슷해서 가끔 서로의 역할을 침범하는 '충돌'이 발생할 수 있다.

eslint-config-prettier 라이브러리는 ESLint에서 Prettier와 충돌할 수 있는 규칙을 모두 무시함으로써 포맷팅 할 때 Prettier의 규칙이 더 우선시 될 수 있도록 하는 역할을 한다. 즉, 포맷팅 할 때 Prettier의 규칙이 1순위가 됨으로써 ESLint는 그저 오류를 검사하는 도구로만 자신의 역할을 수행하게 되고, 포맷팅은 오로지 Prettier의 규칙만 따르도록 하게 해 준다.

가끔 eslint-plugin-prettier라는 라이브러리를 사용하는 경우도 있을 텐데, 이것은 포맷팅 할 때 Prettier의 규칙뿐만 아니라  ESLint의 규칙으로도 동작하게 하는 라이브러리라서 Prettier가 ESLint처럼 오류를 출력해 주는 역할도 수행하게 한다.

이렇게 되면 오류 메시지가 너무 많이 떠서 정신이 없을뿐더러 속도도 느려지게 되고, 우리가 우려했던 서로의 영역을 침범하게 되는 것이기 때문에 대부분의 경우 이 라이브러리의 사용을 장려하지 않는다고 한다.

(출처: https://sung-98.tistory.com/114)

• Prettier 설정 파일 생성 (.prettierrc)

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

• 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'
  
  export default [
    { ignores: ['dist'] }, // 빌드 폴더 제외
    {
      files: ['**/*.{js,jsx,ts,tsx}'], // JS, JSX, TS, TSX 검사
      languageOptions: {
        ecmaVersion: 'latest',
        globals: globals.browser,
        parserOptions: {
          ecmaVersion: 'latest',
          ecmaFeatures: { jsx: true },
          sourceType: 'module',
        },
      },
      settings: {
        react: { version: 'detect' }, // 설치된 React 버전 자동 감지
      },
      plugins: {
        react,
        'react-hooks': reactHooks,
        'react-refresh': reactRefresh,
        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', // target="_blank" 보안 경고 비활성화
        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
        'prettier/prettier': 'error', // Prettier 위반 시 ESLint 에러
      },
    },
  ]