Linux용 Windows 하위 시스템에 React 설치

이 가이드에서는 Vite 프런트 엔드 도구를 사용하여 WSL(Linux용 Windows 하위 시스템)에서 React 개발 환경을 설정하는 방법에 대해 설명합니다.

Linux 서버에 배포하거나, Docker 컨테이너를 사용하거나, Bash 기반 도구를 사용하려는 경우 WSL을 사용하는 것이 좋습니다. React를 새로 사용하고 빠르게 시작하려면 대신 Windows에 React를 직접 설치하는 것이 좋습니다.

React에 대한 배경 지식과 웹앱, 모바일 앱(React Native) 및 네이티브 데스크톱 앱(데스크톱용 React Native)과 같은 다양한 시나리오는 React 개요를 참조하세요.

필수 조건

WSL 2: Linux 배포판(Ubuntu 권장)을 사용하여 WSL을 설치하고 WSL 2 모드 wsl -l -v에서 실행 중인지 확인합니다. Windows 10 버전 2004 이상 또는 Windows 11이 필요합니다.
WSL 2의Node.js: nvm을 사용하여 WSL 배포 내에 Node.js 설치합니다. WSL 내에서 Windows 설치 버전의 Node.js 사용하지 마세요.

중요

탑재된 Windows 드라이브()가 아닌 WSL 파일 시스템 내에 ~/projects/mnt/c/프로젝트 파일을 저장합니다. 파일 시스템 경계를 넘어 작업하면 설치 및 빌드 시간이 크게 느려집니다.

WSL 터미널(예: Ubuntu)을 엽니다.
새 프로젝트 폴더를 만들고 다음을 입력합니다.
```
mkdir ~/ReactProjects
cd ~/ReactProjects
```
Vite를 사용하여 새 React 앱을 만듭니다.
```
npm create vite@latest my-react-app -- --template react
```
Vite는 my-react-app 폴더에 새 React 프로젝트를 설정합니다.
새 앱 폴더로 이동하여 종속성을 설치합니다.
```
cd my-react-app
npm install
```
로컬 개발 서버를 시작합니다.
```
npm run dev
```
앱은 http://localhost:5173에서 사용할 수 있습니다. Ctrl+C를 사용하여 서버를 중지합니다.
배포할 준비가 되면 프로덕션 번들을 빌드합니다.
```
npm run build
```
출력은 dist 폴더에 배치됩니다. 호스팅 옵션은 정적 사이트 배포 를 참조하세요.

참고

Vite는 SPA(단일 페이지 앱)에 적합합니다. 서버 쪽 렌더링 또는 Node.js 백 엔드가 필요한 경우 대신 Next.js 것이 좋습니다. 정적 사이트 생성은 Gatsby를 참조하세요.

이 페이지가 도움이 되었나요?