저는 태어나서 지금까지 줄곧 Windows 사용자로 살아왔습니다. Linux도 여러 번 만져보긴 했지만, 개인적인 성향 때문에 결국 Windows를 고수해 왔죠. 물론 두 운영체제 모두 장단점이 있습니다. 하지만 웹 개발을 배우기 시작했을 때 Windows의 가장 큰 단점으로 느꼈던 것은 익숙한 Linux 명령줄 도구들을 사용할 수 없다는 점이었습니다.
바로 WSL(Windows Subsystem for Linux)이 등장하기 전까지의 이야기였습니다.
정말 훌륭한 기능입니다! Windows에서 Bash 셸을 사용할 수 있고, Node.js 앱도 모두 이를 통해 실행할 수 있습니다. 특히 Windows 10 Fall Creators Update 이후로는 WSL 설정이 놀랄 만큼 간단해졌습니다.
이 글을 쓰게 된 계기를 간단히 말씀드리자면, nvm과 WSL을 함께 사용하면서 Bash on Windows에 문제가 생겼고, 답답한 마음에 노트북을 통째로 밀어버린 적이 있습니다. 지금 생각해 보면 과한 반응이었죠.
컴퓨터를 복구한 후에는 처음부터 다시 개발 환경을 구축해야 했습니다. 다행히 저는 새 컴퓨터를 구매하거나 예상치 못한 사고가 발생하는 경우에 대비해 모든 설정과 구성 정보를 GitHub 저장소에 백업해 두고 있었습니다.
이 글에서는 제가 WSL 개발 환경을 어떻게 구축하는지 소개하고자 합니다. 개인적인 취향이 담긴 설정 방법이며, 다음에 Windows에서 개발 환경을 처음부터 다시 세워야 할 때를 위한 단계별 가이드이기도 합니다.
1. 시스템 업데이트 및 업그레이드
Microsoft Store에서 WSL을 설치하고 기본 사용자를 추가했다면, 가장 먼저 할 일은 시스템 전체를 업데이트하고 업그레이드하는 것입니다.
sudo apt update
sudo apt -y upgradeLinux 배포판을 사용해 본 적이 없다면 -y 플래그가 낯설 수 있습니다. 이 옵션은 터미널에 표시되는 모든 확인 프롬프트에 자동으로 "예"라고 답하라는 의미입니다. 일부 프로그램은 업데이트하고 싶지 않을 수도 있으니 상황에 따라 생략해도 좋지만, 저는 편의상 사용합니다.
-y 플래그를 붙이면 일일이 확인 창을 누르지 않아도 됩니다.
2. 빌드 도구 설치
npm의 네이티브 애드온(native add-ons)을 컴파일하고 설치하려면 빌드 도구가 필요할 수 있습니다. 저는 Gatsby 이미지 처리에 사용되는 sharp, 그리고 그것이 의존하는 node-gyp 때문에 이 도구가 반드시 필요했습니다.
sudo apt install -y build-essential3. Node.js 설치
nodejs.org 공식 사이트의 안내대로 Node.js를 설치하면 권한 설정이 제대로 잡히지 않습니다. 그래서 npm install을 실행할 때마다 에러가 발생하더군요. 여러 시행착오 끝에 n을 사용하면 이 문제가 깔끔하게 해결된다는 것을 알게 되었습니다.
n-install로 Node.js 설치하기
새로 설치한 환경이므로 바로 n-install 스크립트를 실행하면 됩니다.
curl -L https://git.io/n-install | bash이 명령 하나로 최신 안정 버전(stable)의 Node.js가 설치됩니다.
스크립트 실행이 끝나면 다음 명령으로 bash를 재시작하세요.
. /home/my_user_name/.bashrc # 화면에 표시되는 경로를 복사해서 붙여넣으세요Node와 npm 버전을 확인해 봅니다.
node -v && npm -v4. Fish 셸 설치
Fish는 이제 제 메인 셸입니다. 강력한 자동 완성/인텔리센스 기능 덕분인데요, 예쁜 테마도 함께 사용할 수 있습니다.
sudo apt -y install fish
sudo apt -y upgrade && sudo apt -y autoremoveOh My Fish(OMF) 설치
Oh My Fish는 Fish 전용 패키지 매니저로, 다양한 패키지와 테마를 손쉽게 설치할 수 있게 해줍니다.
curl -L https://get.oh-my.fish | fishOMF 테마 설치
omf install clearance5. Git과 SSH 설정 — 시작의 시작
자, 여기까지가 WSL의 기본 설정입니다. 이제 Git을 설정해야겠죠. 저는 한동안 WSL에서 HTTPS 대신 SSH 방식으로 Git을 사용해 왔습니다.
참고: 이 글을 작성하는 시점에는 VSCode의 WSL-Git 연동이 정상 동작하지 않았습니다. 그래서 Windows 쪽에도 Git을 따로 설치했습니다. 터미널만으로 Git을 전부 처리해도 무방하지만, 저는 VSCode의 Git 통합 기능이 너무 좋아서 이렇게 운영하고 있습니다.
SSH 설정은 관련 가이드를 참고하시면 됩니다. 제가 HTTPS 대신 SSH를 권하는 이유는 Git Credential Manager와 keyring manager에서 온갖 문제를 겪었기 때문입니다. 결국 SSH 키를 생성해 GitHub 인증을 하는 편이 훨씬 빨랐습니다. 링크된 가이드가 전 과정을 친절하게 안내해 줍니다.
6. Dotfiles 옮기기
dotfiles를 GitHub 저장소에 백업해 두었다면, 지금이 WSL 폴더로 옮길 좋은 타이밍입니다. 예전에는 파일을 하나씩 옮긴 뒤 수동으로 권한을 조정했는데, 이후 rsync를 알게 되어 한 번에 처리하게 되었습니다.
rsync -avzh /mnt/c/Users/dotfiles/ ~/위 명령은 dotfiles 폴더의 내용물을 WSL의 홈(~/) 디렉터리로 복사합니다. 아래 명령으로 결과를 확인할 수 있습니다.
ls -la ~/
위 이미지처럼 .gitconfig, .gitignore, .npmrc 파일을 복사해 왔는데, 권한이 .bashrc와 일치하지 않는 것을 볼 수 있습니다.
chmod로 파일 권한을 변경하고, 비슷한 파일의 속성값을 참조하려면 stat을 사용하세요.
stat -c "%a %n" ~/.*이 명령은 점(.)으로 시작하는 모든 파일의 권한을 나열해 줍니다. 제 경우는 다음과 같습니다.
777 /home/scott/.
755 /home/scott/..
600 /home/scott/.bash_history
644 /home/scott/.bash_logout
644 /home/scott/.bashrc
777 /home/scott/.cache
777 /home/scott/.config
777 /home/scott/.gitconfig
777 /home/scott/.gitignore
777 /home/scott/.local
777 /home/scott/.npm
777 /home/scott/.npmrc
644 /home/scott/.profile
644 /home/scott/.sudo_as_admin_successful여기서는 .gitconfig, .gitignore, .npmrc 세 파일만 변경하면 됩니다.
chmod 644 .gitconfig .gitignore .npmrc
권한이 올바르게 정리된 모습입니다.
마무리하며
이제 최신 Ubuntu, Node.js, Fish 터미널까지 갖춘 WSL 환경이 완성되었습니다. 물론 개발에 필요한 전역(global) npm 패키지들을 설치하는 일이 아직 남아 있습니다. 즐거운 코딩 되세요!
읽어주셔서 감사합니다
이 글이 유용했다면 클랩 몇 개를 남겨주시고, 앞으로의 업데이트를 받아보려면 구독해 주세요. 생각을 트위터로 공유해 주셔도 좋습니다.
빠진 내용이 있거나 더 나은 방법을 알고 계시다면 언제든 알려주세요.
이와 같은 글들은 제 블로그에서 더 읽어보실 수 있습니다.