Portfolio

1. Vite 를 사용하여 프로젝트 세팅

프로젝트의 이름이나 사용하려는 템플릿을 직접 지정할 수도 있다.

Vite + React 프로젝트를 만들기 위해 다음과 같이 입력한다.


yarn create vite FEDC4-13_React --template react-ts


cd FEDC4-13_React
yarn install

→ 이제 typescript + react 기본 앱이 설정되었다.

2. ESLint 설정

기본 eslint 스크립트를 실행하면, typescript 버전이 맞지 않는다고 나온다.

다음 명령어로 typescript 를 5.0.2 버전으로 바꿔준다.


yarn add typescript@5.0.2

Path alias


yarn add -D @types/node


"compilerOptions": {
	/* Path alias */
    "baseUrl": ".",
    "paths": {
      "@public": ["/"],
      "@/*": ["src/*"]
    }
}

tsconfig.json


import path from 'path';

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: [
      {
        find: '@/public',
        replacement: path.resolve(__dirname, ''),
      },
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
});

vite.config.ts

💡

VSCode 에서 Path alias Intellisense 가 적용되지 않는 경우

cmd + , → Code > Preferences > Settings 로 설정 탭을 연 다음, Typescript > Preferences: Import Module Specifier 설정을 non-relative로 바꾼다.

Import Order

eslint-plugin-import를 활용하여 import 문들의 순서를 조정


yarn add -D eslint-plugin-import eslint-import-resolver-typescript

.eslintrc.cjs 에 import order 순서 설정 추가 (참고)


module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'plugin:import/recommended',
    'prettier',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh', 'import'],
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: true,
    },
  },
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'import/order': [
      'error',
      {
        'newlines-between': 'always',
        groups: [
          'builtin',
          'external',
          'internal',
          ['parent', 'sibling'],
          'index',
        ],
        pathGroups: [
          {
            pattern: 'react*',
            group: 'builtin',
            position: 'before',
          },
          {
            pattern: '@/stores/*',
            group: 'internal',
            position: 'after',
          },
          {
            pattern: '@/contexts/*',
            group: 'internal',
            position: 'after',
          },
          {
            pattern: '@/hooks/*',
            group: 'internal',
            position: 'after',
          },
          {
            pattern: '@/components/*',
            group: 'internal',
            position: 'after',
          },
          {
            pattern: '@/assets/*',
            group: 'internal',
            position: 'after',
          },
          {
            pattern: '@/public/*',
            group: 'internal',
            position: 'after',
          },
        ],
        pathGroupsExcludedImportTypes: [],
        alphabetize: {
          order: 'asc',
        },
      },
    ],
    'import/no-unresolved': ['error', { ignore: ['.svg'] }],
  },
};

3. Prettier 설정


yarn add -D prettier eslint-config-prettier

린터 rules인 것 처럼 prettier를 실행하는 플러그인인 eslint-plugin-prettier는 사용하지 말자. 특정 상황에서 유용할 수도 있지만 prettier를 직접 실행하는 것 보다 느리다.

eslint-config-prettier : eslint에서 prettier와 충돌할 수 있는 rule을 꺼버림 ✅

코드 오류를 잡는데는 eslint, 코드 포맷팅에는 prettier를 사용하는 방법

eslint-plugin-prettier : prettier를 eslint의 rules로 동작하게 함

포맷팅 문제도 오류로 출력되어서 오류 메시지가 지나치게 많아지며 느리다.

prettier-eslint : prettier를 실행하고 나서 eslint —fix를 실행함

prettier를 단독으로 실행하는 것 보다 훨씬 느리다.


{
  "semi": true,
  "singleQuote": true
}

.prettierrc


module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
};

.eslintrc.cjs

package.json 에 script 를 다음과 같이 추가한다


"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "lint:eslint": "eslint --ext ts,tsx \"src/**/*.{ts,tsx}\"",
  "lint:prettier": "prettier --write \"src/**/*.{ts,tsx}\"",
  "clean": "rm -rf ./node_modules ./dist",
  "preview": "vite preview"
},

package.json

3. husky + lint-staged


npx husky-init && yarn


yarn add -D lint-staged

.lintstagedrc.json 설정 파일 추가 및 lint-staged 명령 script 에 추가


{
  "**/*.{ts,tsx}": ["yarn lint:eslint", "yarn lint:prettier"]
}


"scripts": {
  ...
  "lint-staged": "lint-staged"
},

package.json

pre-commit rule

새로 hook 을 추가하려면 husky add 를 사용


yarn husky add .husky/pre-commit 'yarn lint-staged'

→ 위의 명령을 실행하면, .husky 디렉토리에 pre-commit 파일이 생기고, 'yarn lint-staged' 스크립트가 추가됨


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

yarn lint-staged

.husky/pre-commit

pre-push rule

원본 프로젝트에서 내 브랜치가 아닌 다른 브랜치로 Push 하려고 하면 push 를 중단시키는 hook


yarn husky add .husky/pre-push

→ 위의 명령을 실행하면, .husky 디렉토리에 pre-push 파일이 생기고, 기본 스크립트가 추가됨


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

yarn lint-staged

.husky/pre-commit


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

BRANCH="$(git rev-parse --abbrev-ref HEAD)"

if [ "$BRANCH" != "4/#13_yanghyejin_working" ];
then
  echo "You can't push except for the branch you're working on"
  exit 1
fi

exit 0

4. emotion 추가


yarn add @emotion/react @emotion/styled

tsconfig 에 다음 옵션을 추가한다


"compilerOptions": {
	...
	"jsx": "react-jsx",
	"jsxImportSource": "@emotion/react",
}

tsconfig.json

Project Setup References

2023년에 React 프로젝트를 시작하는 방법

새로운 React 문서에서는 CRA를 더이상 새로운 React 애플리케이션을 시작하는 방법으로 권장하지 않음

VITE with React

→ Webpack 을 사용하는 CRA에 비해 내부적으로 esbuild 를 사용하기 때문에 훨씬 빠르다

→ CRA 를 즉시 대체할 수 있다

TypeScript 를 사용하여 5분 안에 React 앱 설정하기

vite 를 사용하여 React 프로젝트 setup