Vite를 이용한 개발 세팅하기 - React

개발을 하기 위해 세팅을 해야하는데,

자꾸 세팅할 때마다 어떠한 것들을 설치하고,
어떻게 세팅해야하는지 자꾸 까먹어서 작성한다.

나를 위한, 그리고 나같은 사람을 위한 포스팅

---

Vite 설치

npm create vite@latest .

EsLint 및 Prettier

설치

npm i -D prettier eslint-plugin-react eslint-plugin-jsx-a11y eslint-config-prettier eslint-plugin-prettier

• prettier: 일관된 코드 스타일을 위한코드 포맷팅 도구
• eslint-plugin-react: React 관련 eslint 규칙을 제공
• eslint-plugin-jsx-a11y: JSX 요소의 접근성 관련 eslint 규칙을 제공
• eslint-config-prettier: eslint와 prettier 간 충돌 방지를 위한 eslint 설정
• eslint-plugin-prettier: eslint와 prettier를 통합하여 코드 포맷팅 규칙 제공
  * 파싱 : 컴퓨터가 이해할 수 있도록 변환하는 것

(그 외에 eslint eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser는 작성일 기준 vite에 설치되어 있습니다😊)

---

세팅

.eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:react/recommended', // 새로 추가
    'plugin:jsx-a11y/recommended', // 새로 추가
    'plugin:prettier/recommended', // 새로 추가
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react', 'jsx-a11y', 'react-hooks', 'prettier'], // 새로 추가
}

작성되어 있는 eslintrc.cjs파일에 extends & plugins만 추가 설정

---

.prettierrc

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "endOfLine": "lf",
  "tabWidth": 2
}

각자의 성향에 맞게 prettier 이쁘게 세팅하기🌈

---

StoryBook

설치

스토리북 설치

npx storybook@latest init

---

emotion

설치

npm i @emotion/react @emotion/styled

npm i -D @emotion/babel-plugin

세팅

tsconfig.json

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react", // 이 부분만 추가
  }
}

"jsxImportSource": "@emotion/react"
이 코드만 CompilerOptions에 추가 설정

---

vite.config.ts

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

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
  ],
});

---

추가로 설정해야할 부분들이 있다면 댓글 부탁드립니다 :)