프로젝트 셋팅

 

1. vite 설치하기

npm create vite@latest

: 맥 터미널에서 마우스로 폴더를 끌어와서(폴더 이동) Vite + React + Ts + SWC(Rust 기반의 플랫폼, 빠르다) 를 설치해준다.

다음 순서대로 실행
1️⃣ cd (프로젝트 이름) : 폴더 이동
2️⃣ npm install : 설치
3️⃣ npm run dev : 실행

참고 사이트 : https://ko.vitejs.dev/guide/

 

2.  환경변수 설정

: api 주소, 인증 key 같은 중요한 값들을 따로 저장해서 관리할때 사용한다. (git 같은 오픈소스에 공유 ❌)

개발모드, 테스트용, 프로덕션용이 따로 있을때

 

export const PROJECT_API_PATH = import.meta.env.VITE_SERVICE_CODE
export const loginApi = `${VITE_PROJECT_DNS}/api경로`

1️⃣ 폴더 최상위 루트에 .env.파일명 생성 << env 파일이 수정되면 npm을 다시 시작해줘야 한다.
2️⃣ VITE_변수명=값 을 지정해서 사용, import.meta.env.VITE_변수명 으로 불러온다.
3️⃣ .gitignore 파일에 env파일을 추가해서 git에 올라가지 않도록 설정

.gitignore 파일

4️⃣ package.json 파일에서 env 파일환경에 맞게 스크립트 수정 (dotenv 사용가능)

{
  "scripts": {
    "start": "vite", // 개발 서버 실행
    // 배포용 빌드 작업
    "build": "NODE_ENV=development vite build",
    "build:test": "NODE_ENV=test vite build",
    "build:live": "NODE_ENV=production vite build"
    
    // dotenv 사용시
   "build:test": "dotenv -e .env.test vite build",
  }
}

 

 

3. Eslint & Prettier 설정

: Eslint > 문법수정, Prettier > 포매팅 용으로 설정

1️⃣ vs code 익스텐션 설치 및 settings (cmd + ,)에서  설정변경

ESLint, Code formatter

 

prettier 설정

저장시 format 설정

 

2️⃣ Prettier 설치

npm i -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react-hooks

* Eslint와 Prettier의 포매팅 기능이 중복되서 충돌되기 때문에 함께 사용하려면 설치해줘야 한다.
eslint-config-prettier : eslint 포매팅 설정 중 prettier와 충돌하는 부분 비활성화
eslint-plugin-prettier : prettier의 포맷 오류를 eslint오류로 출력

 

3️⃣ .eslintrc.cjs 파일 설정

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // 타입스크립트 추천 룰셋
    
    // eslint의 포매팅 기능을 prettier로 사용함. 항상 마지막에 세팅 되어야 함. 
    'plugin:prettier/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
    "no-unused-vars": "off", // 인터페이스 사용유무
    "@typescript-eslint/no-unused-vars": "warn", // ts 인터페이스 사용유무
    
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    'prettier/prettier': [
      'warn',
      {
        'endOfLine': 'auto',
        'singleQuote': true, // 작은 따옴표 사용
        'semi': true, // 세미콜론 사용
        'tabWidth': 2, // 탭 너비 설정
        'trailingComma': 'all', // 행 끝에 콤마 사용 설정
        'printWidth': 70, // 개행이 일어나는 한 행의 최대 너비
        'arrowParens': 'always', // 화살표 함수 괄호 설정
        'bracketSpacing': true,
      },
    ],
  },
}

 

 

4. 라이브러리 설치

npm i react-router-dom axios react-query recoil antd sass styled-components

• react-router-dom
• axios
• react-query 
• recoil
• antd
• sass
• styled-components