Categories
Node Tips

윈도우10 리액트 개발환경 구축 (WSL 2)

윈도우10 리액트 개발환경 구축을 위해 WSL 2를 사용해보니 다른 가상머신을 사용했을때 보다 쾌적하게 작업할 수 있었습니다. 특히 리눅스 환경에서 주로 개발을 했기에 적응도 쉬웠습니다.

지난번 쿠팡 자동화 툴을 만들 때는 버츄얼 박스(Virtual Box) 위에 유분투를 사용 했습니다. 현재는 이 개인 프로젝트를 좀 더 개량하고 있는데요. 이번에는 바로 이 WSL 2를 사용해 리액트 개발환경을 윈도우10에 구축하였습니다.

Windows Subsystem for Linux(WSL)이란? 리눅스용 Windows 하위 시스템입니다. 이는 대부분의 리눅스 기능을 윈도우에서 직접 실행 가능하게 합니다. 단, GUI 어플리케이션 사용에는 제한이 있지만 제 사용 용도에는 충분했습니다. 그럼 이 WSL을 활용하여 윈도우10 리액트 개발 환경 구축하는 방법을 알아보겠습니다.

목차

  1. 윈도우10 최신 빌드 업데이트
  2. 개발자 모드 및 윈도우 기능 켜기
  3. 유분투 설치
  4. WSL2 설치
  5. nvm, node 설치
  6. git 설치 및 프로젝트 다운로드
  7. vscode에 프로젝트 불러오기

윈도우10 최신 빌드 업데이트

WSL 버전에는 현재 1과 2가 있습니다. WSL 2는 WSL 1 보다 속도와 성능면에서 큰 향상이 있어 노드 개발시에는 WSL 2를 사용하는 것을 추천합니다.

단, WSL 2는 윈도우10 OS 빌드 18917 이상에서만 사용할 수 있습니다. 만약 버전이 낮으면 윈도우10 참가자 프로그램으로 OS 빌드 업데이트하기 바랍니다.

개발자 모드 및 윈도우 기능 켜기

1. 설정으로 이동합니다.

윈도우10 설정 이동하기

2. Windows 설정에서 시스템과 업데이트 및 보안으로 이동해 설정합니다.

3. OS 빌드를 확인합니다. 만약 WSL 2를 사용하기 위해선 빌드버전이 18917 이상이어야 합니다.

윈도우10 os 빌드 확인

4. 개발자 기능 사용에서 개발자 모드를 선택합니다.

5. 제어판으로 이동합니다.

6. 시스템 및 보안을 선택합니다.

7. 프로그램 및 기능으로 이동합니다.

8. Windows 기능 켜기/끄기로 이동합니다.

9. Windows 기능에서 Linux용 Windows 하위 시스템과 가상 머신 플랫폼을 선택합니다.

10. 요청된 변경 사항 설치를 마치려면 PC를 재부팅합니다.

유분투 설치

1. Microsoft Store로 이동합니다.

2. Ubuntu 18.04 검색 후 설치합니다.

3. Ubuntu 18.04가 설치가 진행됩니다.

4. 설치가 완료되면 username/password를 설정합니다.

이제 wsl을 실행하면 윈도우에서 bash 셀을 만날 수 있습니다. 저는 기본 터미널이 마음에 안 들어 Hyper 터미널을 설치했습니다.

WSL2 설치

1. 시작에서 마우스 오른쪽 버튼 클릭 후 Windows PowerShell(관리자)를 오픈합니다.

2. “ws -l”로 현재 설치된 Linux용 Windows 하위 시스템을 확인합니다.

3. “wsl –set-version Ubuntu-18.04 2″을 실행하여 WSL 2 버전으로 변경합니다.

만약 위의 명령어 실행 시 “커널 업데이트해야 합니다” 혹은 “지정된 식별자의 가상 머신 또는 컨테이너가 실행되고 있지 않습니다.”라는 메세지가 뜬다면 본문 하단의 문제점 해결을 확인하기 바랍니다.

nvm, node 설치

1. nvm을 설치 전 curl을 설치합니다.

sudo apt-get install curl

2. nvm을 설치합니다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

3. “command -v nvm”으로 설치를 확인합니다. 이제 nvm 명령어로 자신이 원하는 노드(Node) 버전을 선택해 설치합니다. 저는 v10.9.0을 설치했습니다.

nvm install 10.9.0

github 프로젝트 다운로드

1. 이제 github 프로젝트를 다운로드합니다.

2. git은 이미 설치가 되있었고 git clone을 하니 github에 ssh key 등록이 안돼 거절되었습니다.

3. 간단히 ssh-keygen으로 새로운 ssh 키를 생성합니다. 이메일 주소는 github에 등록된 주소와 동일해야 합니다.

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

생성된 새로운 ssh key를 github 세팅에 등록합니다.

4. git clone 으로 프로젝트를 다운로드합니다.

Visual Studio Code에 프로젝트 불러오기

1. 윈도우10에 Visual Studio Code 설치 후 실행합니다. 만약 WSL을 설치했다면 아래와 같이 ‘Remote – WSL’ 확장 프로그램을 설치하라는 메세지를 확인할 수 있습니다. Install을 클릭해 설치합니다.

2. 설치 완료 후 아래 와 같이 “Remote-WSL: New Window using Distro…” 클릭하여 오픈합니다.

4. WSL: Ubuntu-18.04에 연결이 되면 아래와 같이 Local – INSTALLED, WSL: UBUNTU-18.04 – INSTALLED 패널을 확인할 수 있습니다.

3. 이제 WSL: Ubuntu-18.04에 “Node Extension Pack” 확장 프로그램을 설치합니다.

4. 이제 프로젝트를 불러와 실행을 시킵니다.

여기까지 WSL 2를 활용하여 윈도우10 리액트 개발환경을 구축하는 것을 알아봤습니다. 다른 가상머신 설치 없이 윈도우10에서 바로 거의 대부분의 리눅스 환경을 사용할 수 있다는 점이 놀라웠습니다. 장점은 다른 가상머신을 사용해 부팅 속도가 느리거나 많은 리소스를 사용할 필요가 없는 점입니다.

문제점 해결

  1. 만약 wsl 2 세팅 중 “커널 업데이트해야 합니다”라는 메세지가 나오면 WSL 2 Linux 커널 업데이트로 이동 후  최신 WSL2 Linux 커널 업데이트 패키지를 다운로드 후 실행합니다.
  2. 만약 wsl 2 세팅 중 “지정된 식별자의 가상 머신 또는 컨테이너가 실행되고 있지 않습니다.”라는 메세지가 나오면 PowerShell에서 다음 명령어를 실행합니다. (WSL 2 설치)
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

이상으로 평범한 직장인이었습니다.

4 replies on “윈도우10 리액트 개발환경 구축 (WSL 2)”

안녕하세요~ 반갑습니다. ^^)/ 함께 돈 벌고 자주 소통해요~ 좋은 주말 보내세요.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다