© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
프로젝트 세팅
1. Vite 를 사용하여 프로젝트 세팅
프로젝트의 이름이나 사용하려는 템플릿을 직접 지정할 수도 있다.
Vite + React 프로젝트를 만들기 위해 다음과 같이 입력한다.
→ 이제 typescript + react 기본 앱이 설정되었다.
2. ESLint 설정 기본 eslint 스크립트를 실행하면, typescript 버전이 맞지 않는다고 나온다.
다음 명령어로 typescript 를 5.0.2 버전으로 바꿔준다.
Path alias 💡
VSCode 에서 Path alias Intellisense 가 적용되지 않는 경우
cmd + , Code > Preferences > Settings 로 설정 탭을 연 다음, Typescript > Preferences: Import Module Specifier 설정을 non-relative로 바꾼다.
Import Order eslint-plugin-import를 활용하여 import 문들의 순서를 조정
.eslintrc.cjs 에 import order 순서 설정 추가 (
참고 )
3. 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를 단독으로 실행하는 것 보다 훨씬 느리다.
package.json 에 script 를 다음과 같이 추가한다
3. husky + lint-staged
.lintstagedrc.json 설정 파일 추가 및 lint-staged 명령 script 에 추가
pre-commit rule 새로 hook 을 추가하려면 husky add 를 사용
→ 위의 명령을 실행하면, .husky 디렉토리에 pre-commit 파일이 생기고, 'yarn lint-staged' 스크립트가 추가됨
pre-push rule 원본 프로젝트에서 내 브랜치가 아닌 다른 브랜치로 Push 하려고 하면 push 를 중단시키는 hook
→ 위의 명령을 실행하면, .husky 디렉토리에 pre-push 파일이 생기고, 기본 스크립트가 추가됨
4. emotion 추가
tsconfig 에 다음 옵션을 추가한다
Project Setup References 2023년에 React 프로젝트를 시작하는 방법 새로운
React 문서 에서는 CRA를 더이상 새로운 React 애플리케이션을 시작하는 방법으로 권장하지 않음
TypeScript 를 사용하여 5분 안에 React 앱 설정하기 vite 를 사용하여 React 프로젝트 setup
yarn create vite FEDC4-13_React --template react-tscd FEDC4-13_React
yarn installyarn add typescript@5.0.2"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 yarn add -D eslint-plugin-import eslint-import-resolver-typescriptmodule.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'] }],
},
};yarn add -D prettier eslint-config-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 "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 {
"**/*.{ts,tsx}": ["yarn lint:eslint", "yarn lint:prettier"]
}"scripts": {
...
"lint-staged": "lint-staged"
},package.json yarn husky add .husky/pre-commit 'yarn lint-staged'#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn lint-staged.husky/pre-commit yarn husky add .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 0yarn add @emotion/react @emotion/styled"compilerOptions": {
...
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
}tsconfig.json 