Vite+React+Ts 프론트 환경설정

Vite+React+Ts+Lint+Pretteir 를 통해 Fe 세팅을 해보았다.

요즘 웹팩대신 빠른 vite많이 사용한다고 하여 vite를 이용하여 세팅을 해보았다. 

 

Npm create vite@latest를 통해 프로젝트 생성 ( 현재 react 18.2.0 version ) 후 ( vite 공식 홈페이지 참조: https://ko.vitejs.dev/guide/ ) 

 

설정한 프론트 환경설정 file

 

Tsconfig.json

- {
    
    "target": "ES6", // compile 시 어떤 버전의 자바스크립트 버전으로 compile 할지
    
    "lib": ["ES6", "ES2020", "DOM", "DOM.Iterable"], // ts->js로 컴파일 할때 필요한 라이브러리
    
    "skipLibCheck": true, //  모든 선언 파일(*.d.ts)의 타입 검사를 건너 뜀 ( *.d.ts > js환경에서 사용된 library가 ts환경에서도 동작할 수 있도록 type 선언한 파일 )
    
    "moduleResolution": "bundler", // 각 import가 어떤 모듈을 가리키는지 해석하는 과정을 의미 옵션으로 node, node16, nodenext, classic 이 더 존재
    
    "resolveJsonModule": true, // ts에서 .json 확장자 import 할 수 있게 설정
    
    "noEmit": true, // true 설정시 컴파일 진행시 js파일이 생성되지 않는다.
    
    /* Linting */
    
    "noUnusedLocals": true, // 사용되지 않은 변수 있을 시 error 보고
    
    "noFallthroughCasesInSwitch": true, // switch문에서 fallThrough( break, return, throw ) 가 비어있는 경우 error 보고
    
    "types": ["@emotion/react/types/css-prop"] // ts와 emotion을 같이 쓰기 위해 추가 설정
    
    "include": ["src"], // 컴파일 대상 경로
    
    }

 

Tsconfig.node.json

{
  "compilerOptions": {
    "composite": true, // rootDir 밖의 참조되고 있는 프로젝트가 있을 시 true 설정 해야 됨
    "skipLibCheck": true, // tsconfig.json과 동일하게 설정 필요
    "module": "ESNext", // tsconfig.json과 동일하게 설정 필요
    "moduleResolution": "bundler", // tsconfig.json과 동일하게 설정 필요
    "allowSyntheticDefaultImports": true // true 인 경우 import  * as React from "react" 대신
  },
  "include": ["vite.config.ts"]

}

 

Eslint

- module.exports={
    
    env:{
    
    es6:true
    
    extends:[    'eslint:recommended',
    
    'plugin:react-hooks/recommended',
    
    ignorePatterns:['dist','.eslintrc.cjs'], // 린트하고 싶지 않은 directory 설정
    
    plugins:['react-refresh'], // 플러그인
    
    'react-refresh/only-export-components':[      'warn',      {allowConstantExport:true},    ],
    
    }

 

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  esbuild: {
    drop: ['console'], // 빌드시 condole.log 삭제
  },
});

 

Prettier.json

{
    "trailingComma": "es5", // 배열, 객체 마지막 요소에 콤마(,) 가 붙는 것 허용 
    "tabWidth": 2, // 탭 너비 
    "semi": true, // 세미콜론(;) 사용여부 
    "singleQuote": true, // " 대신 '사용
    "printWidth": 120 // 한줄 너비
}