WSL - 1. Windows에서 Ubuntu 개발 환경 설정을 위한 WSL2 설치 및 VSCode 연동

Mac OS 사용자와 함께 개발 협업을 하다 보면 종종 아래에 보이는 것처럼 이상한 에러와 마주할 수 있다.

Expected linebreaks to be 'LF' but found 'CRLF'

 

이런 에러가 발생하는 이유는 무엇일까?

 

정답은 Mac OS와 Windows의 개행 문자 방식이 다르기 때문이다.

 

Mac에서는 LF(\n) 방식을 사용하고, Windows에서는 CRLF(\r\n) 방식을 사용한다.

 

그래서 개발 환경 설정을 하다 보면 위 사진과 비슷한 에러가 종종 발생한다.

 

보통 해당 오류를 해결하기 위해서는 prettier나 ESLint 설정에서 linebreak 관련 속성만 추가해도 해결되는데, 내 경우에는 인터넷에서 찾을 수 있는 모든 방법을 다 동원해도 오류가 고쳐지지 않았다.

 

그래서 Windows에서 Ubuntu 환경을 사용할 수 있는 방법을 탐색했고, 여러 방법들 중 WSL을 이용하여 개발 환경을 설정해 보기로 결정했다.

 

그럼 여기서 WSL이 무엇인지 간단하게 알아보자.

 

WSL(Windows Subsystem for Linux)이란?

Linux용 Windows 하위 시스템 아키텍처

 

 

간단히 요약하자면, Windows에서 Linux를 설치하여 사용할 수 있는 기능이다.

 

기존에는 Windows에서 Virtual Machine 같은 가상환경을 구성하거나 OS를 별도로 설치하여 Linux 환경을 사용했지만, WSL을 이용하면 프로그램을 실행하는 것처럼 훨씬 더 빠르고 간편하게 Linux 환경을 사용할 수 있다.

 

Linux 상에서 개발 환경을 설정하거나 Linux에서만 실행할 수 있는 파일을 다룰 때 유용하게 사용이 가능하다.

 

 

WSL은 버전 1과 2로 나뉜다.

WSL 1 vs WSL 2

 

WSL 1은 Linux와 Windows 사이에서의 인터페이스 역할을 직접 수행하기 때문에 Windows 내의 파일을 Linux 환경에서도 빠르게 접근하여 사용할 수 있다는 특징이 있다.

 

하지만 모든 사용자가 입력한 Linux 시스템 명령은 WSL을 통해 Window 시스템 명령으로 해석되어 실행되기 때문에 명령어 처리 속도가 느리다는 단점이 존재한다.

 

이에 비해 WSL 2에서는 각 OS 간 별도의 커널을 구성하고 Hyper-V를 통해 파일 시스템을 공유하기 때문에 파일 접근 및 마운트 속도가 느리다.

(따라서 Windows 파일 시스템을 주로 사용해야 하는 경우에는 WSL 1이 더 적합)

 

대신 리소스 소모가 줄어들고 각 OS의 User Mode를 병렬로 사용할 수 있기 때문에면서 명령어 처리 속도가 버전 1에 비해 향상되었다는 장점이 있다. 

 

 

둘의 차이를 표로 정리하면 다음과 같다.

기능	WSL 1	WSL 2
Windows와 Linux 통합	⭕	⭕
빠른 부팅	⭕	⭕
작은 리소스 공간 차지	⭕	⭕
관리 VM	❌	⭕
전체 Linux 커널	❌	⭕
전체 시스템 호출 호환성	❌	⭕
VMWare 및 VirtualBox로 실행	⭕	⭕
OS 파일 시스템 간 성능	⭕	❌

 

그리고 WSL 2는 Windows 10 2004 버전 이상에서만 설치가 가능하다.

(대충 웬만한 컴퓨터는 다 설치가 가능하다는 뜻)

 

또한, VMWare나 Virtual Box 등의 가상머신 프로그램과 동시에 사용이 불가능하다.

 

이유는 VMWare나 Virtual Box에서 사용하는 Hyper-V를 WSL 2에서도 사용하는 문제로 충돌이 발생하기 때문이라고 한다.

 

그럼 이제 Windows 환경에서 WSL을 설정하고 개발 환경 설정까지 해보자!

 

 

WSL 설정 및 Linux 설치

1. Windows 기능 켜기 메뉴로 접근 후,

 

- Linux용 Windows 하위 시스템

- 가상머신 플랫폼

 

두 가지를 체크하고 확인 버튼을 누른 후 컴퓨터를 재부팅한다.

 

이후, 관리자 권한으로 cmd를 실행하여 다음 명령어를 입력한다.

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart 
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

 

작업이 완료되면 아래 링크를 통해 리눅스 커널 업데이트 최신 패키지를 다운로드 후 실행하여 설치를 완료한다.

https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

 

 

이제 본격적으로 Linux를 설치하자!

 

설치 이전에 확인해야 할 사항이 있다.

 

WSL의 기본 버전은 1로 설정되어 있다. 여기서 WSL 2버전으로 변경하기 위해서는 아래의 명령어를 입력하면 된다.

wsl --set-default-version 2

 

그리고 Microsoft Store에 접속 후, 원하는 Linux OS 이름을 검색 후 원하는 버전을 다운로드한다.

 

아래 목록 중에서 하나를 선택하여 다운로드하면 될 듯 하다.

• Ubuntu 18.04 LTS
• Ubuntu 20.04 LTS
• openSUSE Leap 15.1
• SUSE Linux Enterprise Server 12 SP5
• SUSE Linux Enterprise Server 15 SP1
• Kali Linux
• Debian GNU/Linux
• Fedora Remix for WSL
• Pengwin
• Pengwin Enterprise
• Alpine WSL
• Raft(평가판)

 

난 참고로 Ubuntu 18.04 LTS 버전을 받았다.

 

설치가 완료되면 실행 후 사용자 계정 정보(username, password)를 입력하면 모든 준비가 끝난다.

Ubuntu 실행 및 사용자 정보 입력

 

cmd에서 다음 명령어를 입력하여 정상적으로 설치가 완료된 것을 확인할 수 있다.

wsl -l -v

 

이렇게 나오면 정상적으로 설치 및 실행이 완료된 것이다.

 

만약 STATE가 Running이 아닌 경우에는 cmd에 wsl을 입력하여 실행을 해주자.

현재 설치된 Linux OS 목록

 

 

WSL 환경에서 VSCode 실행

먼저, VSCode 실행 후 Extension 탭을 클릭하고 WSL Extension을 설치한다.

 

WSL 플러그인 설치가 완료되면 Remote Explorer 탭이 추가되고, 해당 탭을 통해 최근 WSL 환경에서 실행한 프로젝트 목록을 조회할 수 있다.

 

그럼 이제 프로젝트를 실행해 보자.

 

WSL 환경에서 프로젝트를 실행하는 방법은 2가지가 있다.

 

첫 번째 방법은 cmd를 이용한 방법이다.

 

VSCode에서 열고자 하는 폴더 경로에서 cmd 창을 연 후 다음 명령어를 입력하면 VSCode가 실행된다.

code .

 

두 번째 방법은 VSCode 내에서의 방법이다.

 

WSL Extension을 설치하면 VSCode 좌측 하단에 >< 이렇게 생긴 아이콘이 생기는데, 해당 아이콘을 클릭하여 프로젝트를 열 수 있다.

WSL 아이콘

아이콘 클릭 시 뜨는 화면

 

오류 해결

1. node-gyp 오류

github에서 해당 프로젝트를 clone한 후, npm install 과정을 진행하면서 발생한 오류이다.

node-sass gyp Error

 

원인은 해당 프로젝트의 node 버전이 현재 개발 환경에 설치된 node 버전보다 달라서 생기는 문제이다.

 

nvm을 설치하여 현재 설치된 node 버전을 변경하여 문제를 해결할 수 있다.

(나는 설치된 17 버전보다 낮은 버전인 12 버전으로 변경했다.)

 

2. 파일 변경 사항 감지가 안되는 오류

WSL에서 VSCode를 실행하여 리액트 코드를 작성하고 있는 도중, Hot Reload 기능이 정상적으로 동작하지 않는 것을 확인했다.

 

파일 내용을 수정해도 자동으로 변경 사항이 실행 중인 개발 서버에 반영되지 않는 문제였다.

 

이유를 찾아보니, Windows 디렉토리인 c 드라이브 내에 프로젝트 폴더가 위치해 있어 WSL에서 파일 업데이트를 감지하지 못한 것이었다.

 

기존 프로젝트 폴더를 c 드라이브에서  Ubuntu의 /home/사용자명 하위로 이동시켜서 간단하게 해결했다.

 

 

참고 자료

WSL 1과 WSL 2 비교

WSL 설치