초기 환경 세팅

1. 노드, npm 설치 확인

node -v
npm -v

2. package.json 생성

npm init

3. babel 설치(vite사용시 불필요)

npm install --save-dev @babel/cli @babel/core @babel/preset-env eslint prettier

--save-dev 옵션: 패키지를 개발 의존성으로 설치하도록 지정하는 옵션

• 개발 의존성은 프로젝트의 개발 단계에서만 필요한 패키지로, 프로덕션 환경에서는 사용되지 않음

@babel/cli: Babel의 커맨드 라인 인터페이스 도구
Babel을 커맨드 라인에서 실행하고 JavaScript 파일을 변환할 수 있게 해줌

@babel/core: Babel의 핵심 패키지로, 코드 변환을 수행하는 데 필요한 기능과 API를 제공

@babel/preset-env: Babel의 프리셋 중 하나로, 현재 환경에서 지원하는 JavaScript 문법과 기능을 자동으로 감지하여 해당 환경에 맞게 코드를 변환

• 예를 들어, 브라우저 환경에서는 최신 ES 문법을 호환 가능한 코드로 변환하고, Node.js 환경에서는 특정 버전의 Node.js가 지원하는 문법으로 변환할 수 있음

eslint: JavaScript 코드의 문법 및 스타일을 검사하는 도구

• 개발자가 정의한 규칙에 따라 코드를 분석하고 잠재적인 오류나 스타일 가이드 위반을 식별할 수 있음

prettier: 코드 포맷팅 도구로, 일관된 코드 스타일을 유지하고 가독성을 향상시키는 데 도움을 줌

• Prettier는 코드를 자동으로 재정렬하고 들여쓰기를 조정하여 일관된 스타일을 적용

--save-dev 옵션: 패키지를 개발 의존성으로 설치하도록 지정하는 옵션

• 개발 의존성은 프로젝트의 개발 단계에서만 필요한 패키지로, 프로덕션 환경에서는 사용되지 않는다.
• 설치된 패키지들은 package.json 파일의 devDependencies 항목에 추가되며, 개발 의존성 패키지들은 npm install 명령어로 한 번에 설치할 수 있다.

// .babelrc
// 다양한 브라우저와 환경에서 JavaScript 코드를 지원하기 위해 필요한 변환을 자동으로 수행합니다.
{
  "presets": ["@babel/preset-env"]
}

4. eslint 설치

npm install -g eslint
npm install eslint-plugin-jest --save-dev
npm i -D eslint-config-prettier

// .eslintrc
{
  "extends": ["eslint:recommended", "plugin:jest/recommended", "prettier"],
  "plugins": ["jest"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": "latest"
  },
  "env": {
    "browser": true,
    "es2021": true,
    "jest/globals": true
  }
}

5. vite 설치

npm i vite --save-dev

"scripts": {
    "dev": "npx vite",
    "build": "npx vite build",
    "preview": "npx vite preview",
    "test": "npx jest"
  },

6. jest 설치

npm install --save-dev jest

7. package.json

{
  "name": "cat-photos-book",
  "scripts": {
    "dev": "npx vite",
    "build": "npx vite build",
    "preview": "npx vite preview",
    "test": "npx jest",
    "lint": "eslint src"
  },
  "devDependencies": {
    "@babel/cli": "^7.22.6",
    "@babel/core": "^7.22.8",
    "@babel/preset-env": "^7.22.7",
    "eslint": "^8.44.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-jest": "^27.2.2",
    "jest": "^29.6.1",
    "prettier": "^3.0.0",
    "vite": "^4.4.3"
  }
}

8. prettier

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "endOfLine": "auto",
  "formatOnSave": true
}

참고자료
https://yrnana.dev/post/2021-03-21-prettier-eslint/