외곈 World 👽🌏

프로젝트 환경설정

🍀 ES Lint / Prettier 설정

1. eslint, prettier 패키지 설치
   • yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-config-react-app
2. Config 설정 분리
   • package.json의 "eslintConfig”부분을 별도의 .eslintrc.json파일로 분리 후 추가 설정 작성
     

     //.eslintrc.json
     
     {
         "extends": [
             "react-app",
             "react-app/jest",
             "plugin:prettier/recommended"
         ],
         "plugins":["prettier"],
         "rules":{
             "prettier/prettier":"error"
         }
     }
     ​

   • .prettierrc 파일 생성
     

     //prettierrc 
     
     {
         "useTabs": false,
         "printWidth": 80,
         "tabWidth": 2,
         "singleQuote": true,
         "trailingComma": "all",
         "endOfLine": "lf",  // 파일의 줄 끝(Line Ending) 형식을 지정
         "semi": false,
         "arrowParens": "always"
         }
     ​

3. setting.json 파일에 아래 코드 추가
   • Ctrl + Shift + P를 눌러 명령 팔레트를 열기 → "Preferences: Open Settings (JSON)"을 입력하고 선택

     // 수정 후 저장할 때 eslint로 autofix 실행
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "true"
     },
     // 파일의 줄 끝(Line Ending) 형식을 지정. 앞으로 생성되는 파일들은 lf(mac)로 생성됨
     "files.eol":"\\n",
   

   ✅ 파일의 줄 끝 형식 :: mac vs window
   "files.eol": "\n": 파일의 줄 끝을 유닉스/리눅스 스타일인 LF (Line Feed) 형식으로 지정
   "files.eol": "\r\n" : 파일의 줄 끝을 Windows 시스템의 기본 형식인 CRLF 형식으로 지정
   
   
4. vscode에 적용
   

   yarn dlx @yarnpkg/sdks vscode
   

5. prettier에서 세미콜론 제거 설정했기 때문에 package.json에 아래 코드 추가
   

   //package.json
       "lint": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\"",
       "lint:fix": "eslint \\"src/**/*/{js,jsx,ts,tsx}\\""
   
   

   • 적용

   yarn lint:fix
   

6. Craco Alias 설정
   • 설치
     

     yarn add -D @craco/craco craco-alias

   • tsconfig.paths.json 정의
     

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

   • craco.config.js 정의
     

     // craco.config.js
     module.exports = {
       plugins: [
         {
           plugin: CracoAlias,
           options: {
             source: 'tsconfig',
             tsConfigPath: 'tsconfig.paths.json',
           },
         },
       ],
     }

   • Tsconfig에 tsconfig.paths.json extends 시키기
     

     // tsconfig.json
     {
       "extends": "./tsconfig.paths.json",
       "compilerOptions": {
         "target": "es5",
         "lib": ["dom", "dom.iterable", "esnext"],
         "allowJs": true,
         "skipLibCheck": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
         "strict": true,
         "forceConsistentCasingInFileNames": true,
         "noFallthroughCasesInSwitch": true,
         "module": "esnext",
         "moduleResolution": "node",
         "resolveJsonModule": true,
         "isolatedModules": true,
         "noEmit": true,
         "jsx": "react-jsx"
       },
       "include": ["src", "tsconfig.paths.json"]
     }
     
     ​

🍀 scss 설정

yarn add classnames sass

• global.scss 생성
• App.module.scss 생성
• src\App.tsx

import classNames from 'classnames/bind'
import styles from './App.module.scss'

const cx = classNames.bind(styles)

//    <div className={cx('container')}> 이런식으로 사용!

🍀 1. 프로젝트 생성하기

• yarn 설치

npm install -g yarn

• Create React App 기반 프로젝트 생성

yarn create react-app wedding --template typescript

🍀 2. Yarn Berry(PnP) 설정

1. node_modules 폴더 삭제
   
2. berry 버전 설정 ::  yarn set version berry
   

   yarn set version berry

3. root 경로에 .yarnrc.yml파일 생성
   

   //.yarnrc.yml 파일에 pnp 설정하기 (node_modules 대신 pnp방식 사용!)
   nodeLinker: pnp
   

4. yarn install
   

   yarn install
   

확장 프로그램 ZipFS 설치

Yarn Berry에서 TypeScript를 사용할 때 zipfs 확장 기능이 필요한 이유는 Yarn의 Plug'n'Play(PnP) 방식 때문이다. Yarn Berry는 node_modules 폴더 없이 .zip 파일을 통해 의존성을 관리하는데, 이때 파일 시스템을 .zip 형식으로 저장하고 불러오는 과정에서 zipfs가 필요하다.따라서 zipfs를 설치하면, Yarn Berry의 PnP 방식과 TypeScript 환경 간의 호환성을 높여준다. zipfs 확장 기능은 .zip 파일로 저장된 패키지들을 파일 시스템처럼 읽을 수 있도록 지원하여, PnP 환경에서 TypeScript나 기타 툴이 정상적으로 패키지 파일을 탐색할 수 있게 한다.

6. Yarn Berry의 Plug'n'Play(PnP) 방식과 VSCode의 통합 설정

yarn dlx @yarnpkg/sdks vscode

🔥👿 주의!!
명령 팔레트(Ctrl+Shift+P)를 열고 TypeScript: Restart TS Server"를 선택 → "Use Workspace Version”부모 폴더가 아닌 프로젝트 폴더 자체에서 VSCode를 열어야 한다!!!! vscode가 부모폴더로 열려있다면 Use Workspace Version가 보이지 않음...
참고:: https://github.com/yarnpkg/berry/issues/4788

🍀 3. typescript 설정

워크스페이스 버전에 맞는 타입스크립트 버전을 사용하도록 허용해주기

🍀 4. .gitignore에 추가

# yarn zero install
.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

# 참고::  https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

🍀 5. App.test.tsx의 타입에러 제거하기

yarn remove @testing-library/jest-dom

yarn add -D @types/testing-library__jest-dom @testing-library/jest-dom

🍀 6. yarn start!!!!!!!!!!!!!!!!!!!!!!!

yarn start

React와 Vite 프로젝트를 시작을 위한 셋팅하기

npm create vite@latest 프로젝트명 --template react

npm create vite@latest 프로젝트명 --template react-ts

cd 프로젝트명

npm install

npm run dev

🎈 Vite를 사용한 이유

Vite를 프로젝트에 사용한 이유는 빠르고 효율적인 개발 환경을 제공하기 때문이다. Vite는 특히 초기 로딩과 실시간 개발에서 탁월한 성능을 보이며, 이러한 장점이 프로젝트 진행을  원활하게 만들어준다. 구체적으로는 다음과 같은 이유에서 Vite를 선택했다.

1. 빠른 개발 서버 시작: Vite는 모듈 기반으로 필요한 파일만 로딩하므로, 개발 서버가 즉시 시작된다. 특히 프로젝트 규모가 커질수록 이러한 빠른 로딩 속도는 큰 차이를 만든다. 개발 초기부터 빠르게 테스트하고 피드백을 받을 수 있어 개발 속도가 향상된다.
2. 효율적인 Hot Module Replacement (HMR): Vite는 변경된 모듈만 갱신하는 방식의 HMR을 지원하여, 코드 수정 후 즉각적으로 화면에 반영된다. 이로 인해 코드 수정 사항을 실시간으로 확인하며 개발할 수 있어 작업 효율성이 높아진다.
3. 최적화된 빌드: Vite는 개발 환경과 빌드 환경을 각각 최적화하여 사용한다. 개발 중에는 ESM(ES 모듈)을 사용하고, 최종 빌드 시에는 Rollup을 통해 번들링을 최적화하여 성능 좋은 결과물을 만들 수 있다.
4. 설정의 간단함과 유연성: Vite는 설정이 간단해 빠르게 개발을 시작할 수 있도록 돕는다. vite.config.js를 통해 필요한 설정을 쉽게 변경할 수 있으며, React와 같은 프레임워크와도 자연스럽게 통합되어 추가 설정 없이도 개발을 진행하기 용이하다.

이러한 이유로 Vite는 프로젝트에서 빠르고 효율적인 개발 환경을 지원하며, 초기 로딩부터 빌드까지 개발자가 원하는 성능과 유연성을 제공한다. Vite를 통해 생산성을 높이고 개발 프로세스를 간소화하는 것이 주요 목적이었다.

🎈 기타 다른 번들러 도구들