Vite + React +Typescript 초기 세팅

1. Vite + React + Typescript 설치

npm create vite@latest my-react-app --template react-ts

 

->  Vite를 사용하여 React와 TypeScript 템플릿을 기반으로 새로운 프로젝트를 생성하는 명령어

 

 

✔️ TypeScript + SWC 설정한 이유

- SWC (Speedy Web Compiler)는 자바스크립트 및 TypeScript 파일을 빠르게 컴파일하는 도구

- Rust로 작성된 컴파일러로 속도에 최적화되어 있어 Babel보다 훨씬 더 빠른 성능을 제공

 

✔️ SWC와 Babel의 차이점

- 속도 : SWC는 Rust로 작성되어 있어 Babel보다 훨씬 빠른 성능

- 사용 목적 : SWC는 속도와 효율성에 초점을 맞추고 있으며, Babel은 확장성 있는 다양한 플러그인과 설정을 지원

- 구성 : SWC는 구성 및 설정이 더 간단하고 직관적

---

 2. npm install

npm install

 

- 필요한 node_modules 설치

---

3. npm run dev 

npm run dev

 

- package.json -> scripts 확인 후 실행

---

4. public, src

- logo 이미지 삭제

- App.css , index.css 초기화

---

 

[ ✔️ tsconfig.json 파일 없을 시 ]

tsc --init || npx tsc --init

 

 

[ ✔️ eslint 설정 ]

- .eslintrc.json 파일 root 생성

{
    "extends": [
        "react-app",
        "react-app/jest"
    ],
    "rules": {
        // 콘솔 확인용
        //"no-console" : "error"
    }
}

 

 

[ ✔️ prettier 설정 ]

 

1) vs code prettier 설치

 

2) .prettierrc.json 파일 root 생성

{
// 문자열을 정의할 때 따옴표(')를 사용하도록 설정
    "singleQuote": true,
    // 코드 줄 끝에 세미콜론(;)을 반드시 추가하도록 설정
    "semi": true,
    // 탭 문자의 너비를 2칸으로 설정
    "tabWidth": 2,
    // 객체나 배열 등의 마지막 항목 뒤에 쉼표(,)를 추가하도록 설정
    "trailingComma": "all"
}