WSL2(Windows Subsystem for Linux 2)에 Ubuntu를 설치한 환경에서 Visual Studio Code를 실행하면 Linux와 Windows 생태계를 연결하여 편리하게 개발 환경을 설정할 수 있다. 이 글에서는 WSL 2 Ubuntu에서 Visual Studio Code를 설치하고 사용하는 방법에 대해 알아본다.
WSL2에 Ubuntu 설치
다음 ‘WSL2에 Ubuntu 설치하기’를 참고하여 WSL2 Ubuntu 환경을 구축한다.
Windows에 Visual Studio Code 설치
WSL의 장점 중 하나는 원격 개발 Extension을 사용하여 기본 Window 버전의 Visual Studio Code를 그대로 사용할 수 있다는 것이다.
먼저 ‘Microsoft Store’를 실행하고 ‘Visual Studio Code’를 검색하여 설치한다.
또는 https://code.visualstudio.com/Download 에서 Visual Studio Code를 설치할 수 있다.
설치가 완료되면 Visual Studio Code를 실행한다.
Remote Development Extension 설치
Visual Studio Code의 왼쪽 사이드바의 ‘Extension’을 클릭(Ctrl+Shift+X)후 검색 창에 Remote Development라고 입력한 다음 Remote Development를 설치한다.
Node.js 설치 및 새 프로젝트 생성
WSL2 Ubuntu 터미널을 열고 nodejs와 npm을 설치한다.
sudo apt update
sudo apt install nodejs -y
sudo apt install npm -y
설치가 완료되면, 서버용 새폴더를 만들고 그 폴더로 이동한 뒤, Visual Studio Code에서 폴더를 열고 작업을 수행할 수 있도록 code .를 입력한다.
완료되면 Visual Studio Code의 기본 버전이 폴더를 연채로 실행된다.
기본 웹 서버 만들기
Visual Studio Code에서 ‘package.json’ 이라는 새 파일을 만들고 다음을 입력한다.
(참조: https://learn.microsoft.com/en-gb/archive/blogs/cdndevs/visual-studio-code-and-local-web-server)
{
"name": "Demo",
"version": "1.0.0",
"description": "demo project.",
"scripts": {
"lite": "lite-server --port 10001",
"start": "npm run lite"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^1.3.1"
}
}파일을 저장한 다음에 같은 폴더에 index.html 이라는 새 파일을 만들고, 다음 텍스트를 추가한 후 저장하고 닫는다.
<h1>Hello World<h1>Ubuntu 터미널로 돌아거거나, Visual Studio Code 터미널(Ctrl+`) 창에 다음을 입력하여 package.json 에 자세히 설명된 위 사양에 따라 정의된 서버를 설치한다.
npm install
npm start
터미널 창에 출력된 Local 링크인 http://localhost:10001 을 Ctrl 키와 함께 클릭하면 아래와 같이 웹 브라우저에서 localhost:10001로 이동할 수 있다.
