[ React ] vite를 통한 react + typescript 기본세팅

1. create vite 를 통한 패키지 관리자 실행

■ 명령어

//@latest 를 통해 가장 최신의 vite 패키지 실행

npm create vite@latest​

■ 프로젝트 이름 설정 및 react 항목 선택

리액트 선택

■ 타입 스크립트 선택 및 프로젝트 visual studio code 로 열기

아래 SWC 는 ruby 기반의 자바스크립트 컴파일러 임으로 굳이 선택 필요 X

---

반응형

맥북 기준 만들어진 폴더로 이동 및 아래 명령어를 입력하여 visual studio code 실행

// 점 띄어쓰기 주의
codo .

---

2. 리액트 프로젝트 기본세팅

■ code . 으로 연 react 환경에서 패키지 설정

npm i 명령어를 통한 패키지 initialize

■ 필요없는 컴포넌트 및 파일 정리

public, assets 폴더의 svg 이미지 지우기

---

App.tsx 에 " import './App.css' " 제외 모두 지워주기

▼

---

App.css , Index.css 내부 내용 모두 지워주기

index.css

App.css

---

index.css 를 통한 css 초기화

---

SMALL

2. path 를 통한 폴더 alias 설정

■ npm 을 통한 path 설치

path 설치

npm install path

■ vite.config.ts 에 폴더 별칭 설정

• 이 작업을 통해 아래처럼 루트를 거치지 않고 바로 컴포넌트를 부를 수 있다.

import ShowRoom from "@components/three/ShowRoom";

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path' //추가

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve:{ //추가
    alias:[{
      find : "@src",
      replacement : path.resolve(__dirname, "src")
    },
    {
      find:"@components",
      replacement: path.resolve(__dirname,"src/components")
    }
  ]
  }
})

■ tsconfig.json 에 별칭 경로 지정

" tsconfig.json "

/* vite config 파일 경로 별칭 지정*/ 
    "baseUrl": ".",
    "paths": {
      "@components/*":["src/components/*"]
    },

⦿ 만약 위 작업 후 컴포넌트를 불러 올 시 빨간 줄이 뜬다면?

아래 설치

npm i @types/node

/* tsconfig.json 에 아래 추가 */

 "types": [
      "node"
    ]