[React] 초기설정(vite, eslint, prettier, jsconfig)

1. Vite 설치 방법

 

Vite는 빠른 개발 환경과 번들러로, React, Vue, Svelte 등 다양한 프레임워크와 쉽게 통합할 수 있습니다. Vite를 설치하는 기본적인 방법은 아래와 같습니다.

npm create vite@latest my-project -- --template react

 

위 명령어를 입력하게 되면 다음과 같이 파일들이 생성되는 것을 볼 수 있습니다.

 

 

1. public/ 디렉토리

 

• 이 디렉토리는 정적 파일들이 들어가는 곳입니다. HTML, 이미지, 글꼴 등의 정적 자원이 포함됩니다. Vite는 이 디렉토리 내 파일들을 그대로 제공하여, 브라우저에서 액세스할 수 있게 합니다.

• 일반적으로 **index.html**은 여기로 옮길 수도 있습니다.

 

2. src/ 디렉토리

 

• 애플리케이션의 소스 코드가 들어가는 디렉토리입니다. 여기에는 React 컴포넌트, CSS 파일, 상수나 유틸리티 코드 등이 포함됩니다.

• React 애플리케이션의 실제 로직은 이 디렉토리 안에서 작성됩니다.

 

3. .gitignore

 

• 이 파일은 Git에서 추적하지 않을 파일 및 폴더를 지정하는 파일입니다. 예를 들어, node_modules 폴더나 빌드 결과물 같은 것들이 여기에 포함됩니다.

 

4. eslint.config.js(9.9.0 버전)

 

• ESLint 설정 파일입니다. 이 파일은 프로젝트에서 사용할 ESLint 규칙을 정의합니다. ESLint는 코드 품질을 유지하고, 일관된 코딩 스타일을 유지하기 위해 코드 스타일을 분석하고 오류를 찾아주는 도구입니다.

• 구성 예시: 어떤 플러그인을 사용할지, 어떤 규칙을 적용할지를 설정합니다.

 

5. index.html

 

• Vite 프로젝트의 진입점으로 사용되는 HTML 파일입니다. 여기서 애플리케이션이 실행됩니다. Vite는 이 index.html 파일을 분석하여 JavaScript와 CSS 파일을 자동으로 연결하고 번들링합니다.

• <script type="module" src="/src/main.jsx"></script>와 같은 방식으로 React 애플리케이션의 진입점을 정의할 수 있습니다.

 

6. package.json

 

• npm 프로젝트 설정 파일로, 프로젝트에 대한 메타데이터와 프로젝트에서 사용하는 의존성 및 스크립트가 정의되어 있습니다.

• 스크립트 예시: "dev": "vite", "build": "vite build" 등. 이러한 스크립트는 프로젝트의 실행, 빌드 등을 처리하는 명령어들입니다.

• 프로젝트의 의존성 목록(React, Vite, ESLint, Prettier 등)이 여기에 정의됩니다.

 

7. README.md

 

• 프로젝트에 대한 설명을 담는 문서 파일입니다. 여기에 프로젝트의 설명, 설치 방법, 사용법 등을 작성합니다.

• 일반적으로 GitHub와 같은 리포지토리에 올렸을 때, 이 파일이 리포지토리의 첫 번째 문서로 표시됩니다.

 

8. vite.config.js

 

• Vite 설정 파일입니다. Vite 프로젝트의 설정을 정의하며, 필요에 따라 빌드 옵션, 플러그인 설정, 경로 별칭 등을 여기서 설정할 수 있습니다.

• 예를 들어, alias를 설정하여 경로를 간소화하거나, 빌드 설정을 최적화할 수 있습니다.

 

 

npm install을 통해 package.json에 있는 라이브러리들을 설치합니다.

npm install

 

초기 package.json

{
  "name": "react-tutorial2",
  "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.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.9.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "vite": "^5.4.1"
  }
}

eslint 9.9.0 버전이 포함되어있는 것을 볼 수 있습니다.

 

dependencies 와 devDependencies의 차이점

 

1. dependencies:

 

• 프로덕션 환경에서 필수적인 패키지들을 지정합니다.

• 이 패키지들은 애플리케이션이 동작하는 데 꼭 필요한 라이브러리들입니다.

• 예를 들어, React나 Axios 같은 패키지가 여기에 포함될 수 있습니다.

 

2. devDependencies:

 

• 개발 환경에서만 필요한 패키지들을 지정합니다.

• 이 패키지들은 **프로덕션 환경(실제 애플리케이션 배포)**에서는 사용되지 않으며, 주로 코드 작성, 테스트, 빌드 등에 사용됩니다.

• 예를 들어, eslint, prettier, webpack 같은 개발 도구들이 여기에 포함됩니다.

 

2. ESLint란?

 

ESLint는 자바스크립트 코드를 정적 분석하여 코드의 문법 오류와 코딩 스타일 문제를 찾아주는 도구입니다. 또한 팀마다 일관된 코드 스타일을 유지할 수 있도록 도와줍니다.

 

3. Prettier란?

 

Prettier는 코드를 자동으로 포맷팅하는 도구입니다. 코드를 작성할 때마다 일관된 형식으로 포맷팅해 주기 때문에, 코드 스타일을 통일하고 가독성을 높이는 데 매우 유용합니다.

 

 

4. ESLint와 Prettier 설정을 함께 해줘야 하는 이유

 

ESLint는 코드의 문법 오류와 코드 품질을 검토하는 도구이고, Prettier는 코드 스타일을 자동으로 포맷팅하는 도구입니다. 이 두 도구는 서로 다른 목적을 가지고 있지만, 둘 다 코드 스타일에 영향을 미칠 수 있습니다. 따라서 ESLint와 Prettier를 함께 설정하지 않으면, 두 도구가 서로 다른 규칙을 적용하여 충돌이 발생할 수 있습니다.

 

충돌의 예시:

 

• ESLint는 세미콜론을 강제할 수 있지만, Prettier는 세미콜론을 제거하려고 할 수 있습니다.

• ESLint는 탭을 강제하지만, Prettier는 스페이스를 사용할 수 있습니다.

 

따라서 두 도구의 충돌을 막기 위해서는 Prettier의 코드 스타일 규칙을 ESLint와 통합해야 합니다. 이를 통해 Prettier가 코드 스타일을 처리하고, ESLint는 코드 품질과 문법 오류 검사를 담당할 수 있습니다.

 

 

1. Prettier 설치

npm install -D -E prettier

• -D: Prettier를 개발 의존성으로 설치합니다.

• -E: Prettier를 특정 버전으로 고정하여 설치합니다.

 

extention에서도 설치

 

1.1. Prettier 설정 파일 (.prettierrc)

 

프로젝트 루트에 .prettierrc 파일을 생성하고 다음과 같은 설정을 추가합니다:

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

 

 

2. ESLint 9.9.0 설정 및 설명

 

1) eslint.config.js 설정 파일 예시

import js from '@eslint/js';  // ESLint의 기본 JavaScript 규칙들을 가져옴
import globals from 'globals';  // 브라우저 전역 변수(예: window, document)를 허용
import react from 'eslint-plugin-react';  // React 관련 ESLint 규칙 플러그인
import reactHooks from 'eslint-plugin-react-hooks';  // React Hooks 관련 ESLint 규칙 플러그인
import reactRefresh from 'eslint-plugin-react-refresh';  // React Fast Refresh 규칙 플러그인 (개발 중 핫 리로드 지원)

export default [
  { ignores: ['dist'] },  // 'dist' 폴더는 ESLint 검사를 무시
  {
    files: ['**/*.{js,jsx}'],  // 검사 대상 파일들 (JavaScript 및 JSX 파일)
    languageOptions: {
      ecmaVersion: 2020,  // ECMAScript 2020 문법 지원
      globals: globals.browser,  // 브라우저 환경 전역 변수를 허용
      parserOptions: {
        ecmaVersion: 'latest',  // 최신 ECMAScript 문법 지원
        ecmaFeatures: { jsx: true },  // JSX 문법을 허용 (React에서 사용)
        sourceType: 'module',  // ECMAScript 모듈(ESM) 사용
      },
    },
    settings: { react: { version: '18.3' } },  // React 버전을 자동 감지하고 설정 (React 18.3)
    plugins: {
      react,  // React 관련 ESLint 규칙 적용
      'react-hooks': reactHooks,  // React Hooks 관련 규칙 적용
      'react-refresh': reactRefresh,  // React Fast Refresh 관련 규칙 적용 (개발 중 핫 리로드)
    },
    rules: {
      ...js.configs.recommended.rules,  // ESLint 기본 권장 규칙 적용
      ...react.configs.recommended.rules,  // React 권장 규칙 적용
      ...react.configs['jsx-runtime'].rules,  // JSX 런타임 관련 규칙 적용 (React 17+에서 JSX 필요 없음)
      ...reactHooks.configs.recommended.rules,  // React Hooks 권장 규칙 적용
      'react/jsx-no-target-blank': 'off',  // target="_blank" 보안 경고를 비활성화 (필요 시 사용)
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },  // React Fast Refresh 관련: 컴포넌트만 export하도록 경고
      ],
    },
  },
];

 

extention에서도 설치

 

3. ESLint와 Prettier 충돌 방지 설정

 

ESLint와 Prettier가 함께 사용될 때, 코드 스타일 충돌을 방지하기 위해 **eslint-config-prettier**와 **eslint-plugin-prettier**를 설치하고 설정합니다.

 

3.1. 충돌 방지 플러그인 설치

npm install -D eslint-config-prettier eslint-plugin-prettier

• eslint-config-prettier: ESLint와 Prettier 간의 충돌을 방지하기 위해 Prettier와 충돌하는 ESLint 규칙을 비활성화합니다.

• eslint-plugin-prettier: ESLint에서 Prettier 규칙을 실행하게 만들어, 코드 포맷팅을 ESLint 규칙에 포함시킵니다.

 

3.2. ESLint 설정 파일 (eslint.config.js) 업데이트

 

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'] },  // 'dist' 디렉토리는 ESLint 검사를 무시
  {
    files: ['**/*.{js,jsx}'],  // ESLint가 검사할 파일 확장자 설정
    languageOptions: {
      ecmaVersion: 2020,  // ECMAScript 2020 지원
      globals: globals.browser,  // 브라우저 전역 변수 허용
      parserOptions: {
        ecmaVersion: 'latest',  // 최신 ECMAScript 버전 지원
        ecmaFeatures: { jsx: true },  // JSX 지원
        sourceType: 'module',  // ECMAScript 모듈 사용
      },
    },
    settings: {
      react: { version: '18.3' },  // React 버전 감지
    },
    plugins: {
      react,  // React ESLint 플러그인
      'react-hooks': reactHooks,  // React Hooks 플러그인
      'react-refresh': reactRefresh,  // React Fast Refresh 플러그인
      prettier: prettierPlugin,  // Prettier 플러그인 추가
    },
    rules: {
      ...js.configs.recommended.rules,  // ESLint 추천 규칙 적용
      ...react.configs.recommended.rules,  // React 추천 규칙 적용
      ...react.configs['jsx-runtime'].rules,  // JSX 런타임 관련 규칙
      ...reactHooks.configs.recommended.rules,  // React Hooks 추천 규칙 적용
      'react/jsx-no-target-blank': 'off',  // target="_blank" 보안 경고 비활성화
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
      'prettier/prettier': 'error',  // Prettier 규칙을 위반하면 ESLint에서 에러로 처리
    },
  },
];

 

4.3. 설명

• prettier: prettierPlugin: Prettier 플러그인을 추가하여 Prettier 규칙을 ESLint에서 실행할 수 있도록 합니다.

• prettier/prettier: 'error': Prettier의 코드 스타일 규칙을 위반하면 ESLint가 에러로 처리합니다. 이를 통해 Prettier가 자동으로 코드 스타일을 관리하고, ESLint가 코드 품질을 검토합니다.

• eslint-config-prettier: Prettier와 충돌하는 ESLint 규칙을 비활성화하여 포맷팅 규칙 충돌을 방지합니다.

 

 

 

 

5. 정리: ESLint와 Prettier 통합 설정

 

• ESLint는 코드 품질과 문법을 검사하고, Prettier는 코드 스타일을 자동으로 포맷팅합니다.

• 두 도구가 함께 사용되면 충돌이 발생할 수 있으므로, **eslint-config-prettier**와 **eslint-plugin-prettier**를 사용해 Prettier와 충돌하는 규칙을 비활성화하고, Prettier의 규칙을 ESLint에서 검사하도록 설정합니다.

• 이를 통해 ESLint는 코드 품질에 집중하고, Prettier는 코드 스타일을 담당하게 되어 충돌 없이 둘을 함께 사용할 수 있습니다.

 

이 과정을 통해 Vite-React 프로젝트에서 ESLint와 Prettier를 함께 설정하여, 코드 품질과 스타일을 일관되게 유지할 수 있습니다.

 

 

 

 

5. jsconfig.json 추가하기

 

1. jsconfig.json을 추가해야 하는 이유

 

• 경로 참조를 더 쉽게 할 수 있습니다. 상대경로(../../components/Button) 대신 절대경로(@/components/Button)를 사용할 수 있어 코드가 더 읽기 쉬워집니다.

• VSCode와 같은 에디터에서 타입 자동 완성, 경로 자동 완성, 오류 경고 등의 기능을 원활하게 사용할 수 있습니다.

• 타입 검사를 통해 JavaScript 파일에도 TypeScript처럼 타입 경고를 받아서 더 안전하게 코드를 작성할 수 있습니다.

• Vite 프로젝트에서 Vite 관련 타입을 인식하여, 개발 중에 정확한 타입 정보를 제공합니다.

 

코드와 설명

{
  "compilerOptions": {
    "jsx": "react-jsx",  // React JSX 구문을 사용하도록 설정 (React 17+에서는 자동으로 JSX를 지원)
    "checkJs": true,  // JavaScript 파일에 대한 타입 검사 활성화 (VSCode에서 오류 경고 및 코드 완성 기능 향상)
    "baseUrl": ".",  // 기본 경로를 현재 프로젝트의 루트로 설정 (상대 경로 대신 별칭 사용 가능)
    "paths": {
      "@/*": ["src/*"]  // '@' 별칭을 'src' 폴더로 설정 (모듈 경로 참조 시 간단하게 사용 가능)
    },
    "types": ["vite/client"]  // Vite 프로젝트에서 자동 완성 및 타입 정보를 제공 (Vite 관련 타입을 포함)
  },
  "include": [
    "src/**/*.d.ts",  // 'src' 폴더 내에 있는 모든 타입 정의 파일 포함
    "src/**/*.js",    // 'src' 폴더 내에 있는 모든 JavaScript 파일 포함
    "src/**/*.jsx",   // 'src' 폴더 내에 있는 모든 JSX 파일 포함 (React 파일)
    "src/**/*.ts",    // 'src' 폴더 내에 있는 모든 TypeScript 파일 포함
    "src/**/*.tsx"    // 'src' 폴더 내에 있는 모든 TSX 파일 포함 (React와 TypeScript를 같이 사용할 때)
  ],
  "exclude": [
    "node_modules",  // 'node_modules' 폴더는 검사하지 않음
    "**/node_modules",  // 서브 디렉토리의 'node_modules'도 검사하지 않음
    "dist"  // 빌드 결과물이 저장되는 'dist' 폴더는 검사에서 제외
  ]
}

 

 

2. jsconfig.json 파일 추가

 

• 프로젝트 루트 디렉토리에 jsconfig.json 파일을 생성합니다.

• 위에서 설명한 코드처럼 경로 설정과 포함/제외 파일을 설정합니다.

 

3. 경로 별칭 설정 (Vite와의 연동)

 

jsconfig.json 파일에서 경로 별칭을 설정했으면, Vite에서도 경로 별칭을 설정해야 VSCode에서만이 아니라 빌드 시에도 올바르게 작동합니다.

 

3.1(1번 방법)

vite.config.js 파일에서 다음과 같이 설정합니다:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [{ find: '@', replacement: '/src' }],  // '@'를 '/src' 폴더로 대체
  },
})

 

 

3.2(2번 방법)

 **npm install -D vite-tsconfig-paths**를 설치한 후, **vite.config.js**에 tsconfigPaths 플러그인을 추가하면 **경로 별칭(alias)**을 별도로 설정하지 않고도, tsconfig.json 또는 **jsconfig.json**에 설정된 경로 별칭을 자동으로 인식하게 됩니다.

 

npm install -D vite-tsconfig-paths

 

vite.config.js 파일에서 다음과 같이 설정합니다:

 

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from "vite-tsconfig-paths";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), tsconfigPaths()],
})

 

1번과 2번 방법중에 하나의 방법으로 설정하면 된다.

 

4. 상대경로 -> 절대경로 예시

 

파일구조

src/
  components/
    Button.js
  pages/
    Home.js

 

Home.js(상대경로사용)

import Button from '../../components/Button';  // 상대경로로 Button 컴포넌트 불러옴

function Home() {
  return <Button />;
}

export default Home;

• 문제점:

• 경로가 복잡: 파일 구조가 깊어질수록 상대경로는 ../../처럼 경로가 길어지기 때문에, 관리가 어렵고 가독성이 떨어집니다.

• 파일 이동 시 경로 수정 필요: 파일을 이동하거나 구조가 바뀔 때 상대경로를 일일이 수정해야 하는 불편함이 있습니다.

 

 

절대경로 설정 후 (경로 별칭 사용)

Home.js 파일 (절대경로 사용):

import Button from '@/components/Button';  // 절대경로로 Button 컴포넌트 불러옴

function Home() {
  return <Button />;
}

export default Home;

 

 

 

 

6. VSCode Auto Import Extension

 

1. Auto Import의 역할:

 

• VSCode Auto Import 확장은 코드 작성 중에 필요한 모듈을 자동으로 import해주는 기능을 제공합니다.

• 이 확장은 경로 별칭을 포함한 모듈을 참조할 때도 자동으로 import 구문을 추가해줍니다.

• 절대 경로로 모듈을 참조할 때, 수동으로 import 구문을 추가할 필요 없이 자동으로 import를 처리합니다.

 

2. Auto Import 없이도 절대 경로는 정상 작동:

 

• Auto Import 확장이 없더라도, **절대 경로 설정(vite.config.js, jsconfig.json)**은 제대로 작동합니다.

• 다만, Auto Import 확장을 설치하면 코드 작성 중에 모듈을 import할 때 더 편리해집니다.

 

3. Auto Import의 역할 요약:

 

• 모듈 자동 import를 통해 코드 작성 속도를 높여줍니다.

• 경로 별칭을 사용해 모듈을 참조할 때도 자동으로 import 구문을 추가해줍니다.

• 코드 작성 중 수동으로 import 구문을 입력하는 작업을 줄여줍니다.

 

4. Auto Import의 예시

 

1) Auto Import가 없는 경우 (수동으로 import)

// Button 컴포넌트를 사용하려고 할 때, 수동으로 import를 추가해야 합니다.
import Button from '@/components/Button';

function App() {
  return <Button />;
}

export default App;

• 여기서 **Button**을 사용할 때 수동으로 import 구문을 추가해야 합니다.

 

2) Auto Import 확장이 설치된 경우 (자동 import)

// Button 컴포넌트를 처음 사용하면, VSCode가 자동으로 import 구문을 추가합니다.
function App() {
  return <Button />;
}

export default App;

• Auto Import 확장을 설치한 경우, Button 컴포넌트를 사용하면 VSCode가 자동으로 import 구문을 추가해줍니다.

• import Button from '@/components/Button';는 자동으로 추가되며, 개발자는 수동으로 import를 작성할 필요가 없습니다.