Linux용 Windows 하위 시스템에 React 설치
이 가이드에서는 Linux 배포판에 React를 설치하는 단계를 안내합니다. vite 프런트 엔드 도구를 사용하여 WSL(Linux용 Windows 하위 시스템)에서 실행되는 Ubuntu입니다.
Bash 명령 또는 도구를 사용하거나 Linux 서버에 배포하거나 Docker 컨테이너를 사용하려는 SPA(단일 페이지 앱)를 만드는 경우 이 지침을 따르는 것이 좋습니다. React를 새롭게 접하고 학습에만 관심이 있는 경우 Windows에서 직접 vite를 사용하여 설치하는 것이 좋습니다.
React(웹앱), React 네이티브(모바일 앱) 및 데스크톱용 React 네이티브(데스크톱 앱) 중에서 결정하는 React에 대한 자세한 내용은 React 개요를 참조하세요.
필수 조건
- 최신 버전의 Windows 10 설치(버전 1903+, 빌드 18362+) 또는 Windows 11
- Linux 배포(예: Ubuntu)를 포함한 WSL(Linux용 Windows 하위 시스템)을 설치하고 WSL 2 모드에서 실행되고 있는지 확인합니다. PowerShell을 열고
wsl -l -v를 입력하여 확인할 수 있습니다. - WSL 2에 Node.js 설치: 이러한 지침은 설치에 nvm(노드 버전 관리자)을 사용합니다. vite를 실행하려면 최신 버전의 NodeJS와 최신 버전의 노드 패키지 관리자(npm)이 필요합니다.
Important
WSL에 Linux 배포를 설치하면 파일을 저장할 수 있는 디렉터리가 생성됩니다(\\wsl\Ubuntu-20.04)(Ubuntu-20.04를 사용 중인 Linux 배포로 대체). Windows 파일 탐색기에서 이 디렉터리를 열려면 WSL 명령줄을 열고 cd ~를 사용하여 홈 디렉터리를 선택한 후 explorer.exe . 명령을 입력합니다. 이때 탑재된 C 드라이브(/mnt/c/Users/yourname$)에 NodeJS를 설치하거나 작업할 파일을 저장하지 않도록 주의하세요. 그렇지 않으면 설치 및 빌드 시간이 상당히 늘어납니다.
React 설치
WSL에 전체 React 도구 체인을 설치하려면 vite를 사용하는 것이 좋습니다.
WSL 명령줄(Ubuntu)을 엽니다.
새 프로젝트 폴더를 만들고(
mkdir ReactProjects) 해당 디렉터리를 입력합니다(cd ReactProjects).vite를 사용하여 React를 설치합니다.
npm create vite@latest my-react-app -- --template react설치되면 디렉터리를 새 앱("my-react-app" 또는 호출하도록 선택한 항목)
cd my-react-app(으)로 변경하고 종속성npm install을(를) 설치한 다음 로컬 개발 서버를 시작합니다.npm run dev이 명령은 Node.js 서버를 시작하고 새 브라우저 창을 실행하여 앱을 표시합니다. Ctrl + c를 사용하여 명령줄에서 React 앱 실행을 중지할 수 있습니다.
참고 항목
Vite에는 Babel, esbuild, Rollup을 사용하는 프론트엔드 빌드 파이프라인이 포함되지만 백엔드 논리 또는 데이터베이스는 처리되지 않습니다. Node.js 백엔드를 사용하는 React로 서버 렌더링 웹사이트를 구축하려는 경우, 단일 페이지 앱(SPA)에 더 적합한 이 Vite 설치보다는 Next.js를 설치하는 것을 권장합니다. 정적 콘텐츠 지향 웹사이트를 빌드하려면 Gatsby를 설치하는 것이 좋을 수도 있습니다.
- 웹앱을 프로덕션에 배포할 수 있으면
npm run build을(를) 실행하여 "dist" 폴더에 앱 빌드를 만듭니다. 정적 사이트 배포에서 자세히 알아볼 수 있습니다.
추가 리소스
Windows developer