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

  • 아티클

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

Bash 명령 또는 도구를 사용하거나 Linux 서버에 배포하거나 Docker 컨테이너를 사용하려는 SPA(단일 페이지 앱)를 만드는 경우 이 지침을 따르는 것이 좋습니다. React를 새롭게 접하고 학습에만 관심이 있는 경우 Windows에서 직접 vite를 사용하여 설치하는 것이 좋습니다.

React에 대한 일반 정보와 React(웹앱), React Native(모바일 앱) 또는 Windows용 React Native(데스크톱 앱)를 선택하는 방법에 대한 자세한 내용은 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를 사용하는 것이 좋습니다.

  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" 폴더에 앱 빌드를 만듭니다. 정적 사이트 배포에서 자세히 알아볼 수 있습니다.

추가 리소스