새로운 React 프로젝트를 스캐폴딩하기 위해 create-react-app을 사용하는 데 지친 여러분 모두를 위해 이 게시물에서는 Vitejs를 사용하여 React 및 TailwindCSS를 실행하는 방법을 보여줍니다.

요약

Vitejs가 무엇입니까?

프로젝트 설정

결론

Vitejs는 무엇입니까?

Vitejs는 우리의 툴링에 스며든 몇 가지 단점을 해결하는 것을 목표로 합니다.

Webpack, Gulp 및 Parcel은 코드를 묶는 데 적합하지만 개발 서버를 시작할 때, 특히 엄청난 양의 JavaScript 코드를 로드해야 할 때 매우 느립니다.

더 전통적인 빌드 도구에서 번들러는 일반적으로 모든 것을 다시 번들해야 하며, 더 오래 걸리고 애플리케이션이 커집니다.

hot-module-replacement와 같은 경우에도 프로젝트 크기가 증가함에 따라 빌드 속도는 여전히 상당한 타격을 받을 수 있습니다.

Vitejs는 개발 서버를 처음 시작할 때도 엄청나게 빠릅니다.

또한 파일을 편집할 때 속도 이점을 제공합니다. 변경 사항은 거의 즉시 브라우저에 반영됩니다.

이제 Vitejs에 대한 약간의 배경 지식이 있으므로 React 프로젝트 설정을 시작하겠습니다.

프로젝트 설정

이 튜토리얼에서는 내가 선택한 프론트엔드 프레임워크로 React를 사용하지만 원하는 것을 사용할 수 있습니다.

Vitejs는 현재 다음을 지원합니다.

바닐라

바닐라-ts

뷰

vue-ts

반응하다

react-ts

프리액트

preact-ts

조명 요소

조명 요소 TS

호리호리한

날씬한-ts

불행히도 Vitejs는 작성 당시 Angular를 지원하지 않습니다.

Vitejs로 반응 설정

반응 프로젝트를 설정하는 것은 다소 쉽습니다. 프로젝트를 저장하려는 디렉토리를 선택하고 터미널을 열고 다음 명령을 실행하십시오.
npm init @vitejs/app vite-react --template react
그러면 React 프로젝트에 필요한 프로젝트 파일이 다운로드됩니다.

다시 말하지만, 원하는 모든 기술을 사용할 수 있습니다. 바닐라 JavaScript를 사용하여 프로젝트를 생성하려면 다음을 사용합니다.
npm init @vitejs/app vite-vanilla --template vanilla
그렇게 쉽습니다!

이제 디렉토리로 변경하고 종속성을 설치해야 합니다. 이것은 결국 JavaScript입니다.
cd vite-react
npm install
모든 것을 설치한 후 이제 다음 명령을 사용하여 개발 서버를 시작할 수 있습니다.
npm run serve
그리고 순식간에 터미널이 매우 만족스러운 모습을 보여주고 있음을 알 수 있습니다.



이제 TailwindCSS를 설치할 차례입니다.

TailwindCSS 설정

이것은 또한 매우 간단한 과정입니다.

먼저 종속 항목을 설치해야 합니다.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
성공적으로 설치된 후 다음 명령을 사용하여 tailwind 구성 파일을 만들 수 있습니다.
npx tailwindcss init -p
그러면 tailwind- 및 postcss-config 파일이 생성됩니다.

이제 src 디렉토리로 이동하여 index.css 파일을 열고 모든 코드를 제거한 후 다음 행을 추가하십시오.

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

그게 다야!

이제 ctrl + C를 사용하여 개발 서버를 중지하고 npm run dev를 사용하여 다시 시작하기만 하면 됩니다.

이제 설정을 테스트하기 위해 미리 정의된 기본 jsx 코드를 제거하고 우리만의 작은 tailwind-snippet을 추가할 수 있습니다.

내 App.jsx는 다음과 같습니다.

/* src/App.jsx */
import React from "react";
import "./App.css";

function App() {
  return (
    <div className="flex justify-center">
      <h1 className="font-bold text-2xl text-blue-900">
        React and Tailwind with Vitejs!
      </h1>
    </div>
  );
}

export default App;

결과는 다음과 같습니다.



그것으로 우리는 순풍 설정이 매력처럼 작동한다는 것을 확인했습니다.

결론

이번주는 여기까지!

다음 주에 또 다른 기사를 위해 저와 함께 하시길 바랍니다.

이 기사가 마음에 드셨다면 좋아요를 누르고 앞으로 어떤 콘텐츠를 읽고 싶은지 댓글로 알려주세요.