쁘띠한 개발 이야기

소개

• 이번 블로그 글에서는 Vite를 사용하여 프로젝트를 생성하는 방법을 소개합니다.
• Vite는 빠르고 간단한 프론트엔드 빌드 도구로, 빠른 개발 서버와 최적화된 빌드를 제공합니다.
• 이 글에서는 Vite를 통해 React와 TypeScript를 사용하는 프로젝트를 한 번에 생성하는 명령어를 설명하겠습니다.

목적

이 글의 목적은 Vite를 사용하여 React와 TypeScript 프로젝트를 빠르고 간편하게 설정하는 방법을 공유하는 것입니다.

Vite를 처음 사용하는 개발자들도 쉽게 따라 할 수 있도록 명령어와 과정에 대해 상세히 설명하겠습니다.

방법

1. Vite 프로젝트 생성

먼저, Vite를 사용하여 프로젝트를 생성하는 기본 명령어는 다음과 같습니다:

위 명령어를 사용하여 Vite 프로젝트를 생성할 수 있지만, 프레임워크와 사용할 언어 옵션 추가가 필요합니다.

이때, 본인 시스템에 설치된 NPM 버전을 확인 후, 버전에 맞는 명령어를 입력합니다.

npm --version

# NPM 6.0
npm create vite@latest [프로젝트 명] --template react-ts   # NPM 6.0
or
# NPM 7.0. 6.0과 비교해서 -- 대쉬 두번이 추가로 삽입
npm create vite@latest [프로젝트 명] -- --template react-ts   # NPM 7.0

* 프레임워크와 언어 선택

명령어의 마지막 부분인 react-ts는 사용할 프레임워크와 언어에 따라 다릅니다. 예를 들어, React와 TypeScript를 사용하려면 react-ts, Vue와 TypeScript를 사용하려면 vue-ts 등을 선택할 수 있습니다. 아래는 사용할 수 있는 템플릿의 예시입니다:

• React + TypeScript: react-ts
• Vue + TypeScript: vue-ts
• Svelte + TypeScript: svelte-ts

이와 같이 사용할 프레임워크와 언어를 확인하고 적절한 템플릿을 사용하면 됩니다.

6. 프로젝트 종속성 설치

프로젝트 생성 후, 다음 명령어를 사용하여 프로젝트의 종속성을 설치합니다:

cd my-vite-project
npm install

7. 개발 서버 실행

종속성을 설치한 후, 다음 명령어를 사용하여 개발 서버를 실행합니다:

npm run dev

이 명령어를 실행하면 개발 서버가 시작되고, 로컬 서버 주소가 터미널에 출력됩니다. 보통 http://localhost:3000과 같은 주소로 접근할 수 있습니다.

결론

이 글에서는 Vite를 사용하여 프로젝트를 생성하는 방법을 설명했습니다. Vite를 사용하면 빠르고 간편하게 프론트엔드 프로젝트를 설정할 수 있으며, React와 TypeScript와 같은 인기 있는 프레임워크와 언어도 쉽게 통합할 수 있습니다. NPM 버전에 맞는 명령어를 사용하여 프로젝트를 생성하고, 적절한 템플릿을 선택한 후 종속성을 설치하고 개발 서버를 실행하여 효율적인 개발 환경을 구축하시기 바랍니다.