참고 블로그: https://luckyyowu.tistory.com/409
Ubuntu 설치와 부팅 과정에서 발생했던 문제들은 이전 글에서 따로 정리했기 때문에, 이번 글에서는 그 다음 단계인 개발 환경 설정 과정을 기록해보려고 한다.
기준이 되는 자료는 Ubuntu 20.04를 기준으로 작성된 글이었지만, 현재 사용하는 환경은 Ubuntu 22.04.5 LTS이다. 따라서 기존 글의 명령어를 그대로 따라가기보다는 현재 환경에서 필요한 부분을 확인하면서 진행했다.
1. Zsh 플러그인 추가하기
앞선 과정에서 Zsh와 Oh My Zsh를 설치하고, Bullet Train 테마까지 적용했다.
테마를 적용하고 나니 기본 Zsh보다 조금 더 편리하게 사용할 수 있도록 플러그인도 추가해보고 싶었다.
이번에 설정할 플러그인은 총 3개다.
zsh-autosuggestions
zsh-syntax-highlighting
zsh-better-npm-completion각각 하는 역할도 조금씩 다르다.
| 플러그인 | 역할 |
|---|---|
| zsh-autosuggestions | 과거에 입력했던 명령어를 바탕으로 자동완성 제안 |
| zsh-syntax-highlighting | 명령어의 문법을 색상으로 표시 |
| zsh-better-npm-completion | npm 명령어 자동완성 지원 |
2. zsh-autosuggestions 설치
먼저 이전 명령어를 바탕으로 자동완성을 제공하는 zsh-autosuggestions부터 설치했다.
기존에 참고했던 자료에서는 오래된 설치 방식을 사용하고 있었기 때문에 HTTPS를 이용해 GitHub 저장소를 직접 내려받는 방법으로 진행했다.
git clone https://github.com/zsh-users/zsh-autosuggestions.git \
${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions --depth=1설치가 끝난 뒤 플러그인 폴더를 확인한다.
ls ~/.oh-my-zsh/custom/plugins/여기에 다음 폴더가 보이면 정상적으로 설치된 것이다.
zsh-autosuggestions3. 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=1다시 플러그인 디렉터리를 확인한다.
ls ~/.oh-my-zsh/custom/plugins/이제 다음처럼 두 개의 플러그인이 확인된다.
zsh-autosuggestions
zsh-syntax-highlighting4. npm 자동완성 플러그인 설치
Node.js와 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=1설치 후 다시 확인해보면,
ls ~/.oh-my-zsh/custom/plugins/다음 세 가지가 존재해야 한다.
zsh-autosuggestions
zsh-syntax-highlighting
zsh-better-npm-completion5. 설치한 플러그인을 Zsh에 연결하기
플러그인을 내려받는 것만으로는 사용할 수 없기 때문에 ~/.zshrc에서 활성화해야 한다.
nano ~/.zshrc파일 안에서 기존의
plugins=(git)부분을 찾아 아래처럼 수정한다.
plugins=(
git
zsh-autosuggestions
zsh-syntax-highlighting
zsh-better-npm-completion
)수정한 내용은 nano 에서 다음 순서로 저장하면 된다.
Ctrl + O
Enter
Ctrl + X6. 설정을 다시 불러오기
~/.zshrc를 수정했으므로 변경 사항을 현재 터미널에 반영한다.
source ~/.zshrc여기서 한 가지 주의할 점이 있다.
~/.zshrc는 Zsh용 설정 파일이므로 현재 터미널이 Bash라면 먼저 Zsh를 실행해야 한다.
zsh그 다음 설정을 적용한다.
source ~/.zshrc7. 플러그인이 제대로 작동하는지 확인
설정이 적용되면 zsh-autosuggestions가 정상적으로 동작하는지 확인할 수 있다.
예를 들어 이전에
sudo apt update를 입력한 적이 있다면 터미널에서
sudo apt정도만 입력했을 때 이전 명령어가 흐릿한 글씨로 자동 제안될 수 있다.
이 기능이 바로 zsh-autosuggestions가 제공하는 자동완성이다.
zsh-syntax-highlighting은 명령어를 입력했을 때 문법에 따라 색상을 표시해준다. 따라서 실행하기 전에 입력한 명령어가 정상적인지 확인하기가 조금 더 편해진다.
8. Powerline 폰트는 꼭 필요한가?
참고했던 Ubuntu 설정 글에서는 다음 단계로 Powerline 폰트를 설치하도록 되어 있었다.
Bullet Train과 같은 터미널 테마에서는 특수문자나 아이콘을 사용하는 경우가 있기 때문에 폰트가 제대로 지원되지 않으면 화면에서 문자가 깨질 수 있다.
다만 현재 사용 중인 Ubuntu 22.04 환경에서는 Bullet Train이 정상적으로 표시되고 있다면 굳이 폰트를 추가로 설치할 필요는 없다고 판단했다.
실제로 특수문자나 아이콘이 깨지는 문제가 발생했을 때 추가로 폰트를 설정할 예정이다.
9. 개발에 필요한 프로그램 설치
Ubuntu를 개발 환경으로 사용하려면 필요한 개발 도구들을 추가로 설치할 수 있다.
예를 들어 Visual Studio Code는 Snap을 이용해서 설치할 수 있다.
sudo snap install code --classic설치가 완료되면 Ubuntu에서 VS Code를 IDE로 사용할 수 있다.
다만 개발 도구를 처음부터 전부 설치하기보다는, 앞으로 실제로 사용할 프로그램을 중심으로 하나씩 설치하는 방식으로 진행할 예정이다.
10. Node.js와 npm 환경 구성
다음은 Node.js 개발 환경이다.
Node.js는 프로젝트마다 요구하는 버전이 다를 수 있기 때문에 버전을 쉽게 바꿀 수 있는 관리 도구를 함께 사용하는 것이 편리하다.
참고한 글에서는 NVS(Node Version Switcher)를 사용하고 있었기 때문에 동일한 방식으로 구성했다.
먼저 NVS 저장소를 내려받는다.
export NVS_HOME="$HOME/.nvs"
git clone https://github.com/jasongin/nvs "$NVS_HOME"이후 NVS를 설치한다.
. "$NVS_HOME/nvs.sh" install그리고 LTS 버전의 Node.js를 추가하고 사용하도록 설정한다.
nvs add lts
nvs use lts
nvs link lts마지막으로 설치 결과를 확인한다.
node -v
npm -vNode.js와 npm 각각의 버전 정보가 출력되면 정상적으로 구성된 것이다.
11. TLP는 설치하지 않기
참고한 글의 마지막에는 TLP를 이용한 전원 관리 설정도 있었다.
하지만 TLP는 주로 노트북의 배터리 및 전원 관리와 관련된 도구이기 때문에, 현재 사용하고 있는 데스크톱 환경에서는 이번 설정에서 제외했다.
따라서 TLP 설치는 진행하지 않았다.
마무리
전체적인 흐름을 정리하면 다음과 같다.
Zsh
↓
Oh My Zsh
↓
Bullet Train
↓
Zsh 플러그인
├─ zsh-autosuggestions
├─ zsh-syntax-highlighting
└─ zsh-better-npm-completion
↓
개발 도구
↓
Node.js / npm