create-react-app 대신 vite로 리액트 프로젝트를 생성하는 이유

프로젝트를 생성하는 것은 할 때마다 약간씩 헷갈린다. 기억왜곡인지 방식을 틀릴 때도 있고, 실수로 폴더 뎁스를 더 타거나 이름을 잘못 설정하기도 하고. 그래서 이번엔 기록으로 남겨두려고 한다.

 

어느 순간부터 create-react-app(이하 CRA)이 잘 동작하지 않았다. 템플릿을 못 가져와서 올바르게 실행되지 않아 지난번 최종 프로젝트 땐 git에 저장해놓은 패키지를 pull 받아서 사용했었다. 알고보니 CRA는 지원이 중단되었고 Vite라는 리액트 스타터가 뜨고 있다고 한다.

 

 

1. React + typesctipt + SWC 설치

Vite는 웹팩을 사용했던 CRA와 다르게 내부적으로 esbuild를 사용해 훨씬 빠르다고 한다. 이것을 몰랐다니 억울한 기분이 들었다. 최근 들었던 유데미 강의에서도 파일을 받으니 vite로 되어있던데 이런 이유였구나 싶었다. 웹 팩이 1세대라면 Vite는 2세대 번들러 도구입니다. 웹팩보다 더 빠른 속도를 장점으로 내세우고 있으며, 리액트와 궁합도 좋아서 최근에 가장 많이 사용하는 번들러 도구입니다.

 

Vite는 ssr보단 SPA를 선호하며, ssr은 옵트인 기능으로 사용할 수 있다고 한다.

 

Vite를 사용했을 때 장점은

• CRA를 거의 완전하게 대체
• 프레임워크/회사 종속성 없음
• 가볍고 빠른 설치
• 리액트외에도 다른 프레임워크도 사용가능

 

npm create vite@latest

 

이 명령어로 패키지를 설치할 수 있는데, 어떤 것을 선택할 지 뜬다. 

 

이런식으로 여러 라이브러리를 지원하고 있는 모습을 볼 수 있다. 그리고 리액트를 선택하면 

ts, ts+SWC, js, js+SWC를 선택할 수 있는데 ts+SWC를 선택했다.

SWC(Speedy Web Compiler)란?
자바스크립트 프로젝트의 컴파일과 번들링에 모두 사용될 수 있는, Rust라는 언어로 제작된 빌드 툴입니다. 기존에 사용하던 Babel을 대체할 수 있으며, 최근 Next.js 팀에서도 권장하고 있어 주목 받고 있는 빌드 툴입니다.

 

그리고 설치완료되면 root 폴더에서 npm i를 해줘서 마저 설치해주고 npm run dev로 실행할 수 있다.

start가 기본값이던 CRA와 달라진 모습니다.

 

2. tailwind 설치

npm install -D tailwindcss
npx tailwindcss init # tailwind.config.js 생성

두 명령어로 설치를 완료했다면 코드를 수정해줄 차례이다. init 명령어로 생성된 config 파일에 아래 코드를 넣어준다.

 

export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

다음으로 index.css를 수정할 차례이다. 따로 설정을 해주면 밑줄을 없앨 수 있지만 사용하는데 지장이 없다.

@tailwind base;
@tailwind components;
@tailwind utilities;

 

 

마지막으로 vite.config.ts를 수정해야 하는데, swc와 기본의 코드가 약간 다르다.

 

// SWC가 아닐경우 
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "tailwindcss";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), vanillaExtractPlugin(), wyw()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});

 

 

// swc일 경우
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "tailwindcss";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});

 

이로써 프로젝트를 시작할 준비가 되었다.