코딩에 대한 관심이 많아지는 최근 윈도우에서 개발 설정을 하시는 분들이 많습니다.
다만 윈도우용 개발 환경은 인터넷에 나와있는 개발용 튜토리얼들이랑 잘 안맞고, 어렵다, 불편하다 하시는 분들을 위해
따로 개발만 할 수 있는 윈도우 내의 가상운영체제 - WSL을 설치하여 이 위해서 개발할 수 있도록 도와드리려 합니다.
우선 VSCode를 깔아봅시다!
VSCode 란? : Visual Studio Code의 줄임말로 VSC라고도 불러요!
코드를 편집하기 위한 다양한 프로그램들이 있는데요
조금 무거운 IDE(Integrated Development Environment, 통합 개발 환경 - 궁금한 사람은 직접 찾아보세요!) 프로그램이 아닌 VSCode는 텍스트 에디터로 훨씬 빠르게 코드를 편집할 수 있고, 다양한 언어를 지원하며 여러 플러그인으로 IDE 못지 않은 개발 환경을 구축할 수 있어서 추천드려요!
https://code.visualstudio.com/
위 링크로 들어가서
형광펜 쳐진 버튼을 다운로드 해주시고 프로그램 설치를 해주세요!
위와 같은 창이 뜨면 다운로드가 시작되고 있을 겁니다!
이후 프로그램을 켜시면 이런 창이 뜰텐데요
왼쪽 바에 보면 블럭 형태의 아이콘을 클릭해주세요!
그럼 왼쪽에 이런 바가 추가로 생길텐데요, 추가 기능들(Extensions)를 검색하고, 다운로드 받아서 적용시킬 수 있는 메뉴입니다.
입맛에 맞게 알아서 고르면 되고, WSL 사용자는 Remote - WSL 설치!
추가로 깔면 좋은 것들
아래 리스트는 제가 개인적으로 써보고 좋았던 것들이에요!
- Atom One Dark Theme (VSCode 색상 테마) - 저는 이 색깔이 개인적으로 마음에 들더라구요!
- Material Icon Theme - 아이콘들을 저희가 아는 아이콘들(?)로 바꿔줍니다!
- snapcode - 본인의 코드를 예쁘게 png 파일로 찍을 수 있어요!
- Prettier - HTML 코드를 통일된 스타일로 정리해서 보여줍니다!
- Bracket Pair Colorizer - 괄호 짝끼리 색깔을 맞춰서 헷갈리지 않게 해줍니다
터미널 설정
** 주의! 윈도우 사용자분들은 이 문서를 따라오시기 전에 꼭 윈도우를 업데이트 해주세요! **
powershell을 켭니다.
윈도우 버튼을 누르시고 powershell을 입력하신 뒤 관리자 권한으로 열어주세요!
여기에
wsl —install
이라는 명령어를 작성해 주시면
이런 명령어가 나올 거예요!
(주인장의 노트북은 이미 깔아둬서... 한글버전 캡처를 못한 점 죄송합니다 ㅠㅠ)
설치가 정상적으로 되셨다면 이제 Microsoft Store로 들어가 봅시다!
여기까지 못하신 분들은 질문 주세요!
Microsoft Store 들어가 Windows Terminal 깔기
powershell을 켰던 것과 마찬가지로 윈도우 버튼을 누르신 뒤 Microsoft store를 검색해주세요
이후 아래와 같이 나온 창에서
Windows Terminal을 깔아볼께요!
프로그램을 설치하시고 나면
아래와 같은 창이 나올껍니다!
여기서 위의 V 버튼을 클릭해주시고 Ubuntu를 골라주세요!
만약 내려봤는데, 펭귄이나 주황색 Ubuntu가 안뜰때 해결방법
1. 컴퓨터 재부팅 후 powershell에 wsl 입력해보기
2. Microsoft Store 가서 Ubuntu 검색 후 숫자 안달려있는걸로 설치. 재부팅 후 Windows Terminal 열어서 똑같이 진행.
처음 우분투를 시작하셨다면 위와 같은 문구가 나올꺼에요
아무리 성능이 낮은 컴퓨터더라도 10분!(정말 10분까지 걸리는 컴퓨터는 없겠지만요..?)
10분이 넘어가도 저 다음으로 안넘어간다면 Ctrl + C를 눌러주세요!
이후
Please create a default UNIX user account. The username does not need to match your Windows username.
For more information visit: https://aka.ms/wslusers
라는 문구 이후
Enter new UNIX username:
이라는 명령어가 뜨고 뒤에 키보드 커서가 깜빡인다면 닉네임을 설정해주시면 됩니다!
(너무 길게 하시면 나중에 알아보시기 힘들수도 있어요~!)
이후 마찬가지로 비밀번호를 입력하라고
Enter new UNIX password:
라고 명령어가 뜨면 비밀번호를 입력해야하는데 여기서 잠깐!
비밀번호를 입력하는데 터미널에 입력이 안되는것처럼 보이는게 정상입니다!!!!!!
잘 입력되고 있는게 맞으니까 비밀번호를 입력해주세요!(다만 오타등을 확인할 수 없으니 잘못 쳤다 싶으면 백스페이스 키를 다다다다다 눌러주셔서 확실히 다 지우신 후 다시 입력하기~)
다 입력하시고 나면
위와 같은 사진이 나올 거예요.
고생하셨어요!! 여러분은 이제 리눅스라는 말로만 들어봤던 운영체제를 사용할 준비가 되셨어요!
이제 여러분의 터미널을 꾸며볼께요
막상 코딩 해보려고 큰맘 먹었다가 검정 화면을 보고 지레 겁먹어버린 경험이 있으신가요?😂
앞으로도 계속 볼 지긋지긋한 이 검정화면 예쁘게 꾸며보자구요!
Zsh 설치
우선 아래 내용을 따라오시기 전에
$ which $SHELL
/usr/bin/zshwhich $SHELL 이라는 명령어를 터미널에 치신 후 /usr/bin/zsh 이라는 결과간 나오시는 분들은 아래의 Oh-My-Zsh 설치로 이동해주세요!
Window 사용자의 경우
$ sudo apt update
$ sudo apt upgrade
$ sudo apt install zshMac 사용자의 경우
$ brew install zsh
$ brew install curl위의 명령어들을 한줄씩 입력해주세요!
Oh-My-Zsh 설치
여러분들의 터미널에
$ sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"위 명령어를 복사해서 붙여넣어 실행시켜 주세요!
(yes or no를 입력하는 창이 뜬다면 yes를 눌러주세요!)
이런 창이 뜬다면 정상적으로 설치되었습니다!
더...더..예쁘게 만들어 보기(Powerlevel10k 테마 설치)
이 oh-my-zsh이라는 프로그램 내부엔 카톡 테마 처럼 여러 테마가 있는데 그 중 추천드리고 싶은 Powerlevel10k라는 테마를 사용해 보려고합니다!
https://github.com/romkatv/powerlevel10k/blob/master/font.md
GitHub - romkatv/powerlevel10k: A Zsh theme
A Zsh theme. Contribute to romkatv/powerlevel10k development by creating an account on GitHub.
github.com
위 링크로 가 폰트 4개를 다운 받으시고 컴퓨터에 설치해주세요!
폰트 설정하기
저희가 사용할 powerlevel10k 테마는 특수문자를 많이많이 사용할 것이기 때문에 위에서 다운로드 받으신 MesloLGS NF 라는 폰트를 사용해야 안깨지고 문자들이 잘 나와요!
각자 사용하시는 운영체제 및 프로그램에 따라 폰트를 설정하는 방법이 다르니 대표적인 예시 2개를 설명드릴께요!
Windows Terminal의 경우
위의 빨간색 화살표를 따라오시면 글씨체를 변경하실 수 있어요!
macOS / iTerm2의 경우
출처: https://falaner.tistory.com/82
상단 바에서 iTerm2를 누르셔서 Preferences.. 로 들어가주세요!
이후 Preferences > Profiles > Font에서 다운받은 MelsoLGS NF를 선택하신 뒤 iTerm2를 껐다가 켜시면 폰트가 적용됩니다!
이후
$ git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k위 명령어를 입력해주세요
뭔가 주르르 나오다가 다시 입력할 수 있게 된다면 다시 터미널에
$ vim ~/.zshrc을 입력해주세요!
위와 같은 내용들이 보여야 합니다!
(만약 위와 같은 내용이 안보이고 vim not found 가 뜬다면 sudo apt install vim / sudo brew install vim 등을 통해 설치 후 진행해주세요!)
자 이제 키보드의 방향키만을 사용해서
여기 까지 오신 후
i를 입력 하신 뒤 큰따옴표 안의 내용물을 백스페이스 키로 지우고 ZSH_THEME = "powerlevel10k/powerlevel10k" 위와 같이 만들어주세요!
(아마도 기본은 ZSH_TEHEME = "robbyrussell" 로 되어있을 거에요!)
ZSH_THEME = "powerlevel10k/powerlevel10k" 와 같이 만드신 분들은 ESC 버튼을 누르신 뒤 :wq 를 입력 후 엔터를 쳐주세요! (아마 왼쪽 아래에 조그맣게 입력되고 있는게 보이실 거에요!)
이제 아래와 같은 창이 떠야 하는데
만약 안뜨신다면 zsh 을 터미널에 입력해주세요!
취향에 맞게 커스텀 해주시면 됩니다.
이런 막대기 모양으로 여러분의 터미널이 바뀌어야 해요!
oh-my-zsh 및 powerlevel10k가 좋은점!
- 추후에 깃 및 깃헙등을 활용하실때 브랜치 명이 바로 보여서 좋아요
- tab으로 폴더 및 파일 이름들이 자동완성되어서 일일히 치지 않아도 편해요!
- 예쁘니까 오래 보고 있어도 질리지 않아요(?)
여기까지 따라오셨다면 개발환경을 훌륭히 세팅하셨습니다!
아래 페이지는 자주 나오는 질문들을 정리한 페이지니 궁금한게 있으시면 들어가보세요!
'개발 > 개발환경 설정' 카테고리의 다른 글
| [유니티] Unity VSCode 자동완성 안될때(Intellisense, Mono, OmniSharp) (2) | 2022.05.29 |
|---|---|
| VSCode 에서 Default Terminal을 WSL로 설정하는 법 (0) | 2021.06.04 |
| 우분투 터미널을 꾸며봤다.(feat zsh, oh-my-zsh) (0) | 2021.02.06 |
