WSL2 - windows 위의 wsl2, 그 위의 VSCode 개발환경 구동

VSCode의 Remote - WSL 확장 (Remote - WSL Extension)

VSCode가 제일 많이 쓰이지만 요즘은 커서 쓰시는 분들도 꽤 늘어나는걸로 보입니다. 커서 AI가 싸다면 싸다고 할 수 있는 요금제이지만 무료라는 장점은 동서고금을 막론하고 강력한 회유책이죠. 또한 WSL2 위에서 VSCode를 돌리는 저같은 사람은 IDE를 바꾸면 세팅을 다시 해야하는 귀찮음 때문에 그냥 쓰던거 쓰고 있기는 합니다. 그것과는 별개로 커서 AI 써보니까 좋긴 하더군요...

그냥 WSL2 위에서 VSCode 디버깅 환경 세팅하다가 문뜩 관련 내용 블로그로 남겨봅니다.

• WSL (Windows Subsystem for Linux): Windows 10/11에서 리눅스를 네이티브처럼 실행할 수 있게 해주는 가상화 시스템
• Remote - WSL Extension: VS Code가 WSL 내부에 있는 파일, 터미널, 디버깅 등을 직접 다룰 수 있도록 해주는 확장
• Remote 개발 구조: VS Code는 Windows에서 실행되지만, 실제 코드 실행/디버깅은 WSL 내부에서 수행

📡 기본 구조

+-------------------------+          +-------------------------------+
|   Windows VS Code UI    |  ───►    |   WSL 내부 (Ubuntu)           |
|   (GUI)                 |          |   - Node.js / Yarn / Next.js  |
|                         |          |   - 터미널 (bash/zsh)         |
+-------------------------+          +-------------------------------+

• VS Code는 Windows에 설치되어 있음
• Remote - WSL 확장을 설치하면 다음과 같은 작업이 자동 진행됨:
• VS Code가 WSL 내부에 vscode-server라는 작은 서버 설치
• 이 서버와 RPC(Remote Procedure Call) 방식으로 통신
• 디버깅, 터미널, 파일 I/O, 명령 실행 등을 모두 WSL 내부에서 처리

⚙️ 구체적으로 일어나는 일

1. code . 명령어로 WSL에서 VS Code 실행
2. Remote - WSL 확장이 ~/.vscode-server/ 디렉토리에 VS Code Server 설치
3. VS Code가 이 서버에 WebSocket / RPC 방식으로 연결
4. UI는 Windows에서 실행되지만, 실제 명령은 WSL 내부에서 처리

💡 왜 이렇게 쓰는가?

• 리눅스 기반 개발 가능: Next.js, Node.js 등 리눅스 환경에서 안정적으로 실행
• 파일 경로 일관성: /home/user/... 경로 그대로 사용
• CLI 도구 직접 사용: Docker, Git, Bash 등을 리눅스에서 바로 사용 가능
• Windows와 리눅스의 충돌 해결: 줄바꿈, 퍼미션 문제 등 최소화

📁 참고 디렉토리 구조

• WSL 내부에 VS Code가 설치하는 디렉토리:

~/.vscode-server/bin/

→ 이 위치에서 VS Code의 백엔드가 실행되며, Windows와 리눅스 간 가교 역할을 수행

디버거 붙혔을 때 시스템 구조

출처가 어딘지 모르겠네요 죄송합니다..

📌 요약

• VS Code: Windows에서 실행됨 (UI, 확장 등)
• Remote - WSL 확장: WSL에 VS Code Server 설치
• 실제 작업: WSL 리눅스에서 코드 실행, 디버깅, 터미널 작동