2026년 현재 React(SPA) 시작하기

1, 먼저 Typescript 기반으로 설치

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

- 실행시 곧바로 http://localhost:5173 수행화면을 확인할 수 있다.

 

2. Tailwindcss 설치

npm install tailwindcss @tailwindcss/vite

 

3. Tailwindcss 설정

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

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  // 개발 서버 설정 추가
  server: {
    port: 3030,
  },
})

 

4. src/index.css 파일을 수정

@import "tailwindcss";

 

5. 이제 npm run dev 로 실행해 보자.