아무튼 빠른 Vite를 이용하여 프로젝트 생성하기

프로젝트 생성

npm create vite@latest ${디렉토리} -- --template ${템플릿 명}

react 템플릿을 이용할 것이라면 아래와 같이 입력하면 됩니다.

npm create vite@latest ${디렉토리} -- --template react

react 템플릿을 ts와 함께 이용할 것이라면 아래와 같이 입력하면 됩니다.

npm create vite@latest ${디렉토리} -- --template react-ts

프로젝트 시작

npm run dev

npm run dev로 프로젝트를 시작하려고 하면 터미널에 에러가 출력됩니다.

failed to load config from /Users/hoon/Documents/dev/vite-tuto/vite.config.js
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from /Users/hoon/Documents/dev/vite-tuto/vite.config.js.timestamp-1669615363561.mjs
    at new NodeError (node:internal/errors:387:5)
    at packageResolve (node:internal/modules/esm/resolve:951:9)
    at moduleResolve (node:internal/modules/esm/resolve:1000:20)
    at defaultResolve (node:internal/modules/esm/resolve:1214:11)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

맨 앞줄을 읽어봅니다. [ERR_MODULE_NOT_FOUND] 뭔가를 찾지 못한 것 같습니다.

당황하지 말고

npm i

다시 프로젝트를 시작해봅시다.

npm run dev

또는

npx vite

프로젝트가 잘 시작되었습니다. 하지만 조금 아쉬운 점이 있습니다 포트가 5174번입니다. 제 머리론 5174를 외울 수 없으니 3000번 포트로 변경해봅시다.

vite.config.js 파일에 가봅시다.

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

export default defineConfig({
  plugins: [react()]
})

여기에 포트를 추가해주겠습니다.

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

export default defineConfig({
  plugins: [react()],
  server: {
  	port: 3000,
  },
})

3000번 포트로 변경되었습니다. 이제 포트를 기억할 수 있게 되었습니다. 다행입니다.