React와 Vite를 사용한 프로젝트 설정

오늘은 React와 Vite를 사용하여 빠르고 간편하게 프로젝트를 설정하는 방법에 대해 이야기해보겠습니다. Vite는 현대적인 프런트엔드 도구로, 빠른 개발 서버와 최적화된 빌드 과정을 제공합니다. React와 Vite를 결합하면 효율적인 개발 환경을 구축할 수 있습니다.

Vite와 React란?

Vite

Vite는 빠른 빌드 도구로, ES 모듈을 기반으로 한 개발 서버와 Rollup을 사용한 빌드 시스템을 제공합니다. Vite는 개발 중 빠른 HMR(Hot Module Replacement)을 지원하며, 빌드 속도가 매우 빠릅니다.

React

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로, 컴포넌트 기반 개발을 지원합니다. React는 가상 DOM을 사용하여 효율적인 업데이트를 수행하고, 단일 페이지 애플리케이션(SPA) 개발에 널리 사용됩니다.

프로젝트 생성 및 설정

Node.js 설치

먼저, Node.js가 설치되어 있어야 합니다. Node.js가 설치되지 않았다면 Node.js 공식 사이트에서 설치하세요.

Vite 프로젝트 생성

터미널(또는 명령 프롬프트)을 열고, "npm create vite@latest" 명령어를 입력하여 Vite 프로젝트를 생성합니다. 명령어를 입력하면 프로젝트 이름과 템플릿을 선택하라는 프롬프트가 나타납니다. 프로젝트 이름을 입력하고, 템플릿으로 React를 선택합니다.

프로젝트 디렉토리로 이동

프로젝트 디렉토리로 이동한 다음, "npm install" 명령어를 실행하여 필요한 종속성을 설치합니다.

개발 서버 실행

"npm run dev" 명령어를 입력하여 개발 서버를 실행합니다. 브라우저를 열고 "http://localhost:3000"에 접속하면 기본 React 애플리케이션이 실행되는 것을 확인할 수 있습니다.

프로젝트 구조 이해

Vite와 React 프로젝트의 기본 구조는 다음과 같습니다:

• 프로젝트 루트 디렉토리에는 node_modules, public, src 등의 폴더와 함께 .gitignore, package.json, vite.config.js 파일이 있습니다.
• public 폴더에는 애플리케이션의 진입점인 index.html 파일이 있습니다.
• src 폴더에는 React 애플리케이션의 주요 코드가 들어있으며, main.jsx 파일이 애플리케이션의 진입점 JavaScript 파일입니다. App.jsx 파일은 기본 React 컴포넌트 파일입니다.

기본 설정 변경

경로 별칭 설정

경로 별칭을 설정하여 파일 경로를 간단하게 할 수 있습니다. vite.config.js 파일을 열고, 경로 별칭을 설정하는 코드를 추가합니다. 예를 들어, @를 src 디렉토리로 설정할 수 있습니다.

환경 변수 설정

Vite에서는 .env 파일을 사용하여 환경 변수를 설정할 수 있습니다. 프로젝트 루트에 .env 파일을 생성하고 원하는 환경 변수를 추가합니다. 코드에서 "import.meta.env"를 사용하여 환경 변수를 참조할 수 있습니다.

CSS 프레임워크 추가

Tailwind CSS와 같은 CSS 프레임워크를 추가할 수 있습니다. Tailwind CSS를 설치한 후, tailwind.config.js 파일과 postcss.config.js 파일을 설정합니다. src/index.css 파일을 수정하여 Tailwind CSS 지시문을 추가합니다.

결론

Vite와 React를 사용하면 빠르고 효율적인 프런트엔드 개발 환경을 구축할 수 있습니다. 이 글에서는 Vite 프로젝트 생성, 기본 설정 변경, 환경 변수 설정, CSS 프레임워크 추가 등의 내용을 다루었습니다. Vite의 빠른 개발 서버와 React의 강력한 컴포넌트 기반 개발 방식을 결합하여 더 나은 웹 애플리케이션을 개발할 수 있습니다.