다음을 통해 공유

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

이 가이드는 vite 프론트 엔드 도구를 사용하여 Windows용 Linux 하위 시스템(WSL)에서 실행되는 Linux 배포판(예: Ubuntu)에 React를 설치하는 방법을 안내합니다.

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)이 필요합니다.

중요

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를 사용하는 것이 좋습니다.

  1. WSL 명령줄(Ubuntu)을 엽니다.

  2. 새 프로젝트 폴더를 만들고(mkdir ReactProjects) 해당 디렉터리를 입력합니다(cd ReactProjects).

  3. vite를 사용하여 React를 설치합니다.

    npm create vite@latest my-react-app -- --template react

  4. 설치되면 디렉터리를 새 앱("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를 설치하는 것이 좋을 수도 있습니다.

  1. 웹앱을 프로덕션에 배포할 수 있으면 npm run build을(를) 실행하여 "dist" 폴더에 앱 빌드를 만듭니다. 정적 사이트 배포에서 자세히 알아볼 수 있습니다.

추가 리소스