참고 블로그: https://luckyyowu.tistory.com/409
지난 글에서는 Ubuntu 설치 후 발생했던 부팅 문제를 해결하고, Zsh, Oh My Zsh, Bullet Train까지 설정했다.
이번 글에서는 이어서 Zsh 플러그인, Powerline 폰트, VS Code, Node.js 개발 환경을 구축해보았다.
1. Zsh 플러그인 설치
앞서 Zsh와 Oh My Zsh를 설정했기 때문에, 이번에는 터미널 사용을 편리하게 만들어주는 플러그인을 추가했다.
설치한 플러그인은 총 3가지이다.
zsh-autosuggestions
zsh-syntax-highlighting
zsh-better-npm-completion1-1. zsh-autosuggestions
먼저 이전에 입력했던 명령어를 기반으로 자동완성을 제공하는 zsh-autosuggestions를 설치했다.
git clone https://github.com/zsh-users/zsh-autosuggestions.git \
${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions --depth=1복제가 완료되면 ~/.oh-my-zsh/custom/plugins/ 아래에 플러그인이 생성된다.
1-2. zsh-syntax-highlighting
다음으로 명령어의 문법을 색상으로 표시해주는 zsh-syntax-highlighting을 설치했다.
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git \
${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting --depth=11-3. zsh-better-npm-completion
마지막으로 npm 명령어 자동완성을 지원하는 zsh-better-npm-completion을 설치했다.
git clone https://github.com/lukechilds/zsh-better-npm-completion.git \
~/.oh-my-zsh/custom/plugins/zsh-better-npm-completion --depth=12. Zsh 플러그인 활성화
플러그인을 설치했다고 바로 사용할 수 있는 것은 아니기 때문에 ~/.zshrc에 등록해주었다.
nano ~/.zshrc기존의
plugins=(git)부분을 다음과 같이 수정했다.
plugins=(
git
zsh-autosuggestions
zsh-syntax-highlighting
zsh-better-npm-completion
)저장 후 Zsh 환경에서 설정을 다시 불러왔다.
source ~/.zshrc처음 실행했을 때는 Bash 환경에서 실행해서 다음과 같은 오류가 발생했다.
Error: Oh My Zsh can't be loaded from: bash.
You need to run zsh instead.확인해보니 현재 터미널이 Bash였기 때문이었다.
echo $0을 실행했을 때 처음에는 Bash 환경이었고, 이후 zsh를 실행하여 Zsh로 전환했다.
다시 확인했을 때는
zsh가 출력되어 정상적으로 Zsh 환경에서 실행되고 있음을 확인했다.
3. Zsh를 기본 셸로 설정
현재 터미널만 Zsh로 사용하는 것이 아니라, 앞으로 터미널을 열었을 때도 Zsh가 기본으로 실행되도록 설정했다.
chsh -s $(which zsh)여기서 조금 헷갈렸던 부분이 $()였다.
$(which zsh)는 which zsh를 실행한 결과를 명령어에 넣는다는 의미이다.
예를 들어
which zsh의 결과가
/usr/bin/zsh라면,
chsh -s $(which zsh)는 결과적으로
chsh -s /usr/bin/zsh와 같은 의미가 된다.
변경이 제대로 되었는지 다음 명령어로 확인했다.
getent passwd $USER결과의 마지막 부분이
:/usr/bin/zsh로 나와 기본 셸이 Zsh로 변경된 것을 확인했다.
4. Powerline 폰트 설치
다음으로 Bullet Train 테마에서 사용되는 아이콘이나 특수문자가 정상적으로 표시될 수 있도록 Powerline 폰트를 설치했다.
Ubuntu에서는 다음 명령어로 설치할 수 있다.
sudo apt install fonts-powerline5. VS Code 설치
개발 환경에서 사용할 IDE로 Visual Studio Code도 설치했다.
Snap을 이용해서 설치했다.
sudo snap install code --classic설치 후 버전을 확인했다.
code --version6. Node.js 설치 전 확인
Node.js를 설치하기 전에 현재 Node.js가 이미 설치되어 있는지 확인했다.
node -v그 결과 현재 Node.js가 설치되어 있지 않은 것을 확인했다.
따라서 참고한 글의 방법처럼 NVS(Node Version Switcher)를 이용해 Node.js 환경을 구성하기로 했다.
7. NVS 설치
먼저 NVS를 설치할 위치를 환경 변수로 지정했다.
export NVS_HOME="$HOME/.nvs"이후 NVS 저장소를 Git으로 복제했다.
git clone https://github.com/jasongin/nvs "$NVS_HOME"복제가 완료된 후 NVS를 설치했다.
. "$NVS_HOME/nvs.sh" install8. Node.js LTS 설치
이제 NVS를 이용해 Node.js LTS 버전을 설치했다.
nvs add lts설치가 완료된 후 현재 터미널에서 LTS 버전을 사용하도록 설정했다.
nvs use lts그리고 LTS 버전을 기본 버전으로 연결했다.
nvs link lts9. Node.js / npm 설치 확인
마지막으로 Node.js와 npm이 정상적으로 설치되었는지 확인했다.
node -vnpm -v각각 버전 정보가 정상적으로 출력되어 Node.js와 npm 개발 환경 구축이 완료된 것을 확인했다.
마무리
이번 실습에서는 Ubuntu에서 개발을 시작하기 위한 기본적인 터미널 및 개발 환경을 구성했다.
전체적으로 정리하면 다음과 같다.
Zsh
↓
Oh My Zsh
↓
Bullet Train
↓
Zsh 플러그인
├─ zsh-autosuggestions
├─ zsh-syntax-highlighting
└─ zsh-better-npm-completion
↓
Powerline 폰트
↓
VS Code
↓
NVS
↓
Node.js LTS
↓
npm