[React] 간단하게 프로젝트 세팅을 해보자!

React + TypeScript + Vite 로 간단한 프로젝트를 세팅해보자.

나는 Windows에서 vscode를 이용하여 프로젝트 세팅을 작성하고있으므로 참고바란다.

다만, 이 포스팅에서는 ESLint가 무엇인지, tsconfig는 왜 세팅해야하는지 등에 대한 설명을 생략하므로 관련 정보는 따로 찾아볼 것을 권장한다.

1. Vite 세팅

참조 : https://ko.vitejs.dev/guide/

yarn create vite [프로젝트 폴더명] --template react-ts

프로젝트 폴더명에 이름 대신 . 을 입력해서 수행하면 현재 폴더 내에 바로 프로젝트가 세팅된다.

2. Yarn 세팅

yarn --version

현재 설치된 yarn의 버전을 먼저 확인한다.

만약 yarn 이 설치되어 있지 않다면,

npm install --global yarn

해당 명령어로 yarn을 설치해주자.

yarn 버전이 1.x.x 라면 업그레이드를 해주도록 하자.

yarn set version berry

yarn2 = yarn3 = yarn berry 이므로 해당 명령어로 업그레이드 한다면 추가적인 업그레이드는 필요하지 않다.

다시 yarn의 버전을 확인했을때 3.x.x 으로 표시된다면 업그레이드 성공!

yarn

의존성 패키지들을 yarn을 통해 설치해주자.

3. .gitignore 세팅

기본적으로 위의 명령어를 통해 프로젝트를 생성했다면 .gitignore를 따로 생성하지 않아도 프로젝트 루트에 .gitignore 파일이 생성되었을 것이다.

그리고 최소한의 ignore 대상 파일들도 작성되어져있다.

그렇지만 이에 더해 추가적으로 ignore 설정을 하고 싶다면 이 블로그의 글을 자세히 읽어보거나 https://www.toptal.com/developers/gitignore 에서 간단하게 자신의 프로젝트에 맞는 .gitignore를 설정할 수 있다.

4. ESLint & Prettier 세팅

가장 먼저 해야할 일은 VS Code에서 ESLint, Prettier Extension을 설치하는 것이다.

이미 확장 프로그램 설치가 되어 있다면 아래 순서대로 진행하면 된다.

prettier 설정

Prettier Extension이 설치되어있다는 가정하에 아래 커맨드를 터미널에 입력한다.

yarn add -D prettier

그리고 프로젝트의 최상위 루트에 .prettierrc.json 파일을 생성하여 아래의 내용을 참조하여 입력한다.
나는 Windows를 사용중이지만 Mac에서 코드를 열었을때 오류가 나지 않게 하기위해서 endOfLine을 lf로 설정해두었다.
Prettier 설정에도 ESLint와 같이 여러가지 옵션이 다양하므로 공식문서를 참조하여 자신의 프로젝트에 필요한 옵션을 추가해주면 된다.

/** .prettierrc.json*/
{
  "endOfLine": "lf",
  "printWidth": 80,
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all"
}

ESLint 설정

이미 프로젝트가 세팅될 때 .eslintrc.cjs 파일이 생성되어 있고(혹은 .eslintrc.json 이거나 .eslintrc.js) package.json에도 기본적인 eslint 패키지는 설치되어 있을 것이다.

보통 .eslintrc.json 이나 .eslintrc.js 을 생성하는 것으로 알고있지만, common js 문법을 사용할 수 있는 확장자인 .cjs 형태로 생성되어도 문제될 것이 없다.

typescript에 맞는 패키지가 추가적으로 필요하므로 아래 명령어로 필요한 패키지를 개발전용으로 설치해주자.

yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript

그런다음 .eslintrc.cjs 파일을 열어 아래 내용을 포함하는지 확인하며 없는 내용은 추가해주도록 한다.

/* eslint-env node */

module.exports = {
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};

참조 :
https://typescript-eslint.io/getting-started
https://eslint.org/docs/latest/use/configure/configuration-files

ESLint 플러그인 설치

//eslint-config-prettier : 불필요하거나 Prettier와 충돌할 수 있는 모든 규칙을 끕니다.
//eslint-plugin-prettier : Prettier를 ESLint 규칙으로 실행하고 차이점을 개별 ESLint 문제로 보고합니다. 
yarn add -D eslint-config-prettier eslint-plugin-prettier 

//Airbnb의 .eslintrc를 확장 가능한 공유 구성으로 제공합니다.
yarn add -D eslint-config-airbnb 

//eslint-plugin-react : eslint를 위한 React 특정 린팅 규칙
//eslint-plugin-jsx-a11y : JSX 요소에 대한 정적 AST 체크를 수행하는 접근성 규칙 검사 도구
//eslint-plugin-import : ES2015+ (ES6+) import/export 구문의 린팅을 지원하고 파일 경로 및 import 이름의 철자 오류로 인한 문제를 방지합니다. 
yarn add -D eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import 

//eslint-plugin-import에 TypeScript 지원을 추가합니다. 
yarn add -D eslint-import-resolver-typescript

//eslint-plugin-simple-import-sort : import문 자동 정렬
//eslint-plugin-unused-imports : 사용되지 않는 ES6 모듈 import를 찾아 제거합니다.
yarn add -D eslint-plugin-simple-import-sort eslint-plugin-unused-imports

//eslint-plugin-react-hooks : React 함수형 컴포넌트에서 Hooks 규칙을 강제하고 검사
//eslint-plugin-react-refresh : "fast refresh"를 사용하여 컴포넌트가 안전하게 업데이트될 수 있는지 확인합니다.
//fast refresh : 코드 변경 시 컴포넌트의 상태를 유지하면서 빠르게 업데이트하는 기능
yarn add -D eslint-plugin-react-hooks eslint-plugin-react-refresh

귀찮은 사람을 위해 한번에 설치할 수 있도록 한줄로 모았다.

yarn add -D eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-simple-import-sort eslint-plugin-unused-imports eslint-plugin-react-hooks eslint-plugin-react-refresh

---

5. CSS 스타일링 도구 세팅

Global CSS,CSS 모듈,Tailwind CSS,Sass,CSS-in-JS(Emotion / Styled-Components) ... 등 다양한 스타일링 방법이 존재하는데 선호하는 방식을 적용하면 된다.

나는 이번 프로젝트에서는 Emotion를 사용하기로 했다. 타입스크립트 리액트 프로젝트에서 Emotion은 아래와 같이 종속성을 설치할 수 있다.

yarn add @emotion/react @emotion/styled

자세한 사항은 https://emotion.sh/docs/typescript 에서 확인해보자.

그리고 .eslintrc.cjs 의 rules 에

'react/no-unknown-property': ['error', { ignore: ['css'] }]

을 추가하여 css props에 대한 오류 방지를 해주도록 한다.

6. tsconfig.json 세팅

최상위 루트에 tsconfig.json 파일이 없다면 생성해주도록 하자.

https://typescript-kr.github.io/pages/compiler-options.html에서 관련 옵션을 확인할 수 있다.

아래는 내가 필요한 것만 취사 선택한 tscofing.json 파일 내용이다.

각자 프로젝트에 맞게 작성하면 될 것이다.

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "jsxImportSource": "@emotion/react",

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

---

Bonus) 절대 경로 설정 (vite.config.ts 세팅)

상대경로로 import 할 경우 파일구조가 복잡해질수록 경로가 길어지고 알아보기 어렵다는 단점이 있다.

그렇기에 절대 경로로 import 해주는 것이 좋을 것으로 생각한다. 만약 절대 경로로 세팅하길 원하지 않는다면 이 단계는 무시해도 좋다.

우선 패키지를 하나 설치해주도록 하자.

yarn add @types/node

기본 vitejs 프로젝트였다면 vite.config.js만 수정해줘도 되었겠지만,

타입스크립트 프로젝트는 tsconfig.json과 vite.config.ts를 둘 다 설정해주어야 한다.

tsconfig.json

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@styles/*": ["src/styles/*"],
    },
  },

tsconfig.json의 컴파일러옵션에서 baseUrl과 절대 경로로 사용할 path를 위와 같은 형식으로 설정해준다.


vite.config.ts

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

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

그리고 vite.config.ts 에도 tsconfig.json에서 설정한 절대 경로와 동일하도록 resolve-alias 하위에 위와 같이 작성해준다.

🚫모듈을 찾을 수 없다는 에러가 발생한다면

vscode를 사용하고 있는 사용자의 경우

package.json과 tsconfig.json, vite.config.ts 모두 확인하여 패키지 설치와 세팅이 정상적으로 되었음에도

'vite' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307)
'react' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.ts(2307)
...

위와 같이 import 구문에서 에러와 함께 밑줄 표시가 발생한다면 아래의 방법을 시도해보자.

1. ctrl + Shift + p 를 이용하여 아래와 같은 검색 창을 띄운다.
   

2. 그리고 builtin 을 검색하면 아래와 같은 항목이 표시되므로 클릭해준다.
   

3. 아래와 같이 좌측 메뉴 패널중 확장탭이 열리면

4. 검색 창에 적혀진 @builtin 글자를 지우지 말고 typescript 를 입력해준다.

5. TypeScript 및 JavsScript 언어 기능 을 클릭해준다.

6. 사용 안 함 버튼을 클릭 후

7. 다시 로드 필요 버튼을 클릭해준다.

이렇게 하면

더이상 에러가 표시되지 않는다.

• 추가)

참고로 갑자기 vscode 상에서 변수에 마우스 오버할 경우 해당 변수의 타입을 추론하여 보여주는 기능과 정의 바로가기 기능(Go to definition)이 동작하지 않는 상태에서도 이 방법으로 해결이 되었다.

---

여기까지 설정을 했다면 기본적인 프로젝트 세팅은 끝난 것이다.

이제부터 이 설정을 바탕으로 프로젝트를 진행해볼 수 있다!

요즘에는 프로젝트를 세팅하는 방법이 블로그에도 잘 설명되어있고 Next.js처럼 대부분 설정을 프로젝트 시작과 함께 알아서 해주는 프레임워크도 있다.

각자 프로젝트 성격에 맞도록 세팅하는것이 중요하므로 공식 문서를 이용해 더 자세히 알아볼 것을 권장한다.

이 포스팅은 1인 프로젝트 규모의 최소 요건만 맞추었다고 생각하면 될 것이다.

-끝

참조:
https://lts0606.tistory.com/663
https://shape-coding.tistory.com/entry/Vite-TypeScript-Vite-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-%EC%A0%88%EB%8C%80-%EA%B2%BD%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0