88

최근 30분간 동시 방문자 수를 표시합니다. (~)

최고 동시 방문자 수 -
어제: 0명 / 오늘: 0명

React 프로젝트 시작하기 w. Vite

React 프로젝트 시작하기 w. Vite

Vite.js 빌드 도구를 사용해 React 프로젝트를 시작하는 방법을 설명합니다.
자바스크립트와 타입스크립트 프로젝트에서의 구성을 구분하고 있습니다.

info

Node.js 18버전, NPM 8버전 이상이 설치되어 있어야 합니다.

# Vite 프로젝트 생성

VS Code로 프로젝트 폴더를 열고 터미널에서 다음 명령을 순서대로 실행합니다.

BASH
content_copy
L
L
L
L
L
L
L
1
2
3
4
5
6
7
# 현재 경로에 프로젝트 구성 npm create vite@latest . # > React 선택 # > JavaScript + SWC 혹은 TypeScript + SWC 선택 # 의존성 패키지 설치 npm i

혹은. 터미널에서 프로젝트를 생성할 경로로 이동 후 다음 명령을 순서대로 실행합니다.

BASH
content_copy
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 현재 경로에 프로젝트 폴더 생성 및 구성 npm create vite@latest <프로젝트_폴더_이름> # > React 선택 # > JavaScript + SWC 혹은 TypeScript + SWC 선택 # 프로젝트 경로로 이동 cd <프로젝트_폴더_이름> # 의존성 패키지 설치 npm i # 현재 경로를 새로운 VS Code 창으로 열기 code . # 혹은 현재 VS Code 창에서 열기 code . -r # 혹은 수동으로 프로젝트 열기

info

SWC(Speedy Web Compiler)는 Rust 기반의 고성능 자바스크립트/타입스크립트 컴파일러입니다.

info

code 명령은 다음 과정을 통해 설치 후 사용할 수 있습니다.
VS Code > 명령 팔레트(Ctrl(Cmd) + Shift + P) > code 검색 > PATH에 'code' 명령 설치 선택

PATH에 'code' 명령 설치 zoom_out_map
PATH에 'code' 명령 설치

BASH
content_copy
L
1
npm run dev
개발 서버 실행.

# ESLint + Prettier 구성

  • ESLint: 코드 품질 확인 및 버그, 안티패턴(Anti-pattern)을 감지
  • Prettier - Code formatter: 코드 스타일 및 포맷팅 관리, 일관된 코드 스타일을 적용 가능

# VS Code 확장 프로그램 설치

warning

이미 확장 프로그램을 설치한 경우, 이 단계는 생략하세요!

ESLint와 Prettier를 사용하기 위해 VS Code에서 각 확장 프로그램을 설치합니다.
설치 후에는 VS Code를 재시작하는 것이 좋습니다.

ESLint zoom_out_map
ESLint

Prettier - Code formatter zoom_out_map
Prettier - Code formatter

# 패키지 설치 및 구성

프로젝트에서 사용할 수 있도록, 각 의존성 패키지를 설치합니다.
각 패키지는 모두 런타임에서 필요치 않은 개발용이기 때문에, -D 플래그를 사용해 '개발 의존성 패키지(Dev Dependencies)'로 설치합니다.

BASH
content_copy
L
1
npm i -D eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier
자바스크립트인 경우.
BASH
content_copy
L
1
npm i -D eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser
타입스크립트인 경우.
패키지 설명 비고
eslint ESLint 코어 패키지 / 코드 품질 확인 및 버그, 안티패턴(Anti-pattern)을 감지
prettier Prettier 코어 패키지 / 코드 스타일 및 포맷팅 관리, 일관된 코드 스타일을 적용 가능
eslint-plugin-react React 지원 플러그인, 문법 분석 및 검사 지원
eslint-config-prettier ESLint와 Prettier의 충돌 방지
eslint-plugin-prettier Prettier 규칙을 ESLint 규칙으로 통합
@typescript-eslint/eslint-plugin 타입스크립트 지원 플러그인
@typescript-eslint/parser 타입스크립트 코드 분석 및 검사 지원
eslint-plugin-react-hooks React Hooks 사용 규칙을 강제, 실수를 방지에 도움이 되는 규칙 제공 Vite에 포함됨
eslint-plugin-react-refresh React Refresh 사용 규칙 제공 Vite에 포함됨

설치가 완료되면, 프로젝트 루트 경로에 .eslintrc.json 파일을 생성하고 다음과 같이 내용을 추가합니다.

/.eslintrc.json
JSON
content_copy
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
{ "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended" ], "plugins": [ "react" ] }
자바스크립트인 경우.
/.eslintrc.json
JSON
content_copy
L
L
L
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{ "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:prettier/recommended" ], "plugins": [ "react" ], "parserOptions": { "parser": "@typescript-eslint/parser" } }
타입스크립트인 경우.

구성 파일이 .eslintrc.json이 아닌 .eslintrc.cjs인 경우, 다음과 같이 extends 옵션에 직접 내용을 추가합니다.

/.eslintrc.cjs
CJS
content_copy
L
L
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
12
13
// ... export default tseslint.config( { ignores: ['dist'] }, { extends: [ js.configs.recommended, ...tseslint.configs.recommended, 'plugin:prettier/recommended' ], // ... } )

추가로, 프로젝트 루트 경로에 .prettierrc 파일을 생성하고 다음과 같이 내용을 추가합니다.
자세한 규칙은 Prettier / Options 에서 확인할 수 있습니다.

/.prettierrc
JSON
content_copy
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
{ "semi": false, "singleQuote": true, "singleAttributePerLine": true, "bracketSameLine": true, "endOfLine": "lf", "trailingComma": "none", "arrowParens": "avoid" }

# 자동 포맷팅 설정

VS Code에서 자동 포맷팅을 사용하려면, 다음 옵션을 사용자 설정(settings.json)에 추가합니다.
같은 옵션을 중복 추가하지 않도록, 이미 설정되어 있는지 꼼꼼히 확인하세요.

JSON
content_copy
L
L
L
L
L
1
2
3
4
5
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }

사용자 설정(전역)은, 명령 팔레트에서 settings.json로 검색해 열 수 있습니다.

사용자 설정 열기(JSON) zoom_out_map
사용자 설정 열기(JSON)

현재 프로젝트에서만 사용하는 사용자 설정(지역)을 통해 *.jsx, *.tsx 파일에 대한 자동 포맷팅을 사용할 수 있습니다.
프로젝트의 루트 경로에 .vscode/settings.json 폴더와 파일을 생성해 다음과 같이 내용을 추가할 수 있습니다.

/.vscode/settings.json
JSON
content_copy
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
{ "[javascript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } }
자바스크립트인 경우.
/.vscode/settings.json
JSON
content_copy
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{ "[javascript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } }
타입스크립트인 경우.
/.vscode/settings.json
JSON
content_copy
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
{ "[css]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[scss]": { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } }
Module S?CSS를 사용하는 경우.

# 경로 별칭 구성

경로 별칭(Path Alias)을 사용하면, 프로젝트 내의 파일을 쉽게 참조할 수 있어 편리합니다.

/vite.config.ts
TSX
content_copy
L
L
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
12
13
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: '@', replacement: '/src' }, { find: 'node_modules', replacement: '/node_modules' } ] } })

이를 통해 복잡해질 수 있는 상대 경로를 사용하지 않고, 특정 경로 위치를 바로 참조할 수 있습니다.

/src/components/a/b/c/MyComponent.tsx
TSX
content_copy
L
L
1
2
// import type { Routes } from '../../../../routes' import type { Routes } from '@/routes'
경로 별칭 사용 예시
/src/components/a/b/c/MyComponent.module.scss
SCSS
content_copy
L
L
1
2
@import 'node_modules/swiper/scss'; @import 'node_modules/swiper/scss/autoplay';
경로 별칭 사용 예시

타입스크립트에서도 경로 인식이 가능하도록, 다음과 같이 구성 옵션을 추가합니다.

/tsconfig.json
JSON
content_copy
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
{ "compilerOptions": { // ... "baseUrl": ".", "paths": { "@/*": ["./src/*"], "node_modules/*": ["./node_modules/*"] } } }

생성한 프로젝트의 tsconfig.json 파일에서 tsconfig.app.json 파일을 참조하는 경우, 해당 옵션을 tsconfig.app.json 파일에 추가합니다.

/tsconfig.json
JSON
content_copy
L
L
L
L
L
L
L
1
2
3
4
5
6
7
{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ] }
/tsconfig.app.json
JSON
content_copy
L
L
L
L
L
L
L
L
L
L
L
L
1
2
3
4
5
6
7
8
9
10
11
12
{ "compilerOptions": { // ... /* Path alias */ "baseUrl": ".", "paths": { "@/*": ["./src/*"], "node_modules/*": ["./node_modules/*"] } } }