5일간의 프로젝트를 진행하며 많은 기능적인 문제도 발생했지만 바로 github 문제도 있었다.
지금 나의 브랜치가 어디 인지 모르고 git push를 통해 문제가 발생하거나 내가 작업한 내용들이 날라 갔다ㅠㅠ
기존의 Terminal에서는 github에서 clone을 통해 연동을 한다면 branch 명이 표시가 안됬었다.
그런데 팀원분들의 vscode의 terminal을 보면 브랜치 위치를 보여줬다.... 다른 분들도 왜 안 보이는지 나에게 물어보기도 하고...
그리하여 나의 터미널을 꾸미고 편하게 사용하기 위해 터미널을 설정하는 방법을 정리하려 한다.
1. zsh
MacOS의 기본 쉘로 zsh이다 . 그런데 혹시 모르니
echo $SHELL
터미널에서 이것을 확인해 보는 것을 추천한다.
2. iterm2
쉘이 zsh라면 iterm2를 설치하면된다.
iterm2는 터미널의 확장 프로그램느낌으로 mac에서의 기본 terminal보다 편리하고 많은 기능을 제공한다.
Downloads - iTerm2 - macOS Terminal Replacement
iterm2.com
다운로드를 진행하면 된다.
, + command
키를 눌러 Profiles에서 상태바 추가나 원나는 색상으로도 변경인 가능하다.
문제는 vscode의 터미널은 변화가 없다.
3. oh-my-zsh
iterm에서 테마를 적용해가위해 깔아야 하는 부분이다. 많은 테마가 있어 직접 선택해서 적용이 가능하다.
iterm에 아래와 같이 코드를 작성해 주자
brew install zsh zsh-completions
brew을 통해 zsh-completions를 다운로드 받아 준다.
- homebrew 가 없는 분들을 위해 링크를 남긴다. https://brew.sh/
다음으로는 아래의 코드를 작성해 주면 화면에 oh my zsh라고 재미난 화면이 뜰 것이다.
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
4. 테마
원 하는 테마를 선택해야 하는데 이 링크를 타고 들어가 원하는 테마를 선택하는 것을 추천한다.
Themes
🙃 A delightful community-driven (with 2,300+ contributors) framework for managing your zsh configuration. Includes 300+ optional plugins (rails, git, macOS, hub, docker, homebrew, node, php, pyth...
github.com
저는 agnoster이라는 테마로 선택했습니다. 글자도 확 식 하게 잘 보여서 선택했습니다.
원하는 테마의 이름을 기억해 두고 이제는 iterm에
vi ~/.zshrc
이 코드를 입력해 줍니다.
저는 이런 식으로 창이 떴는데 여기서 e를 눌러 주고 편집을 하기 위해 이동했습니다.
그리고 ZSH_THEME="spaceship"라는 부분이 찾아서 제가 선택한 테마인 agnoster로 변경을 해줘야 합니다.
변경방법은
변경하고 싶은 부분에 가서 키보드 'i' 를 눌러주고
변경을 하고 'ESC'를 누르고 :wq 를 작성하고 나와 줍니다.
그러고 iterm을 제부팅 하거나
source ~/.zshrc을 입력해 주면 적용이 된 것을 확인 가능합니다.
5. 이모지가 출력이 안 되는 경우
제가 사용한 테마는 이모지가 중요한데 적용이 안돼서 나오는 문제가 있었습니다.
그런 경우 폰트를 다운로드하여 적용해 줘야 합니다.
# clone
git clone https://github.com/powerline/fonts.git --depth=1
# install
cd fonts
./install.sh
# clean-up a bit
cd ..
rm -rf fonts
이 방법으로 폰트를 설치하고 적용해 줍니다.
iterm을 통해 아래의 코드를 입력 후 이모지의 출력이 잘 되는지 확인합니다.
echo "\ue0b0 \u00b1 \ue0a0 \u27a6 \u2718 \u26a1 \u2699"
아니면 다운로드한 폰트를 iterm에서 적용을 해주세요.
iterm -> settings -> profiles -> text -> font에서 변경을 해줍니다.
그런데 iterm에서는 적용이 가능하지만 vscode에서는 적용이 안된다?? 이것도 제가 경험한 문제입니다.
6. vscode 테마 오류
vscode -> settings -> 검색 : terminal font family -> 폰트 확인
폰트를 확인하고 5번에서 iterm의 폰트와 같은 것을 적용해 줍니다.
commend + space bar -> 서체 관리자 -> iterm에서 같은 서체를 검색같은 서체가 있다면 vscode에서 적용해 주면 됩니다.
없다면 5번 폰트 설치를 다시 해야 합니다.
7. vscode 터미널 agnoster색상 변경
afnoster에서의 색상이 마음에 안 들어서 iterm에서 변경을 했지만 vscode에는 적용이 안됐습니다.
그래서 vscode에 따로 적용을 했습니다.
시스템에서 color customizations을 검색합니다.
Edit in settings.json을 클릭하여 들어가 줍니다.
그리고 이 밑에 코드를 추가해 줍니다.
"workbench.colorCustomizations": {
"terminal.background": "#191919",
"terminal.foreground": "#C5C8C6",
"terminalCursor.background": "#C5C8C6",
"terminalCursor.foreground": "#C5C8C6",
"terminal.ansiBlack": "#191919",
"terminal.ansiBlue": "#e5e5e5",
"terminal.ansiBrightBlack": "#969896",
"terminal.ansiBrightBlue": "#3971ED",
"terminal.ansiBrightCyan": "#3971ED",
"terminal.ansiBrightGreen": "#b2b2b2",
"terminal.ansiBrightMagenta": "#A36AC7",
"terminal.ansiBrightRed": "#CC342B",
"terminal.ansiBrightWhite": "#FFFFFF",
"terminal.ansiBrightYellow": "#a9a9a9",
"terminal.ansiCyan": "#3971ED",
"terminal.ansiGreen": "#666",
"terminal.ansiMagenta": "#A36AC7",
"terminal.ansiRed": "#CC342B",
"terminal.ansiWhite": "#C5C8C6",
"terminal.ansiYellow": "#666"
}
원하는 색상을 변경하고 vscode에 terminal을 켜두고 주석을 치며 변화가 있는지 확인합니다.
그리고 원하는 RGB 값으로 변경하면 됩니다.
8. terminal 이름 안 보이게
터미널에 보면 사용자이름과 컴퓨터 이름이 나와있는데 너무 길게 나옵니다. 이런 경유 이름만 출력하게 하는 방법이 있습니다.
2번에서 처럼 zsh를 사용해서 적용합니다. 맨 마지막 부분에 밑에 코드를 붙여 넣어주면 끝납니다
prompt_context() {
if [[ "$USER" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; then
prompt_segment black default "%(!.%{%F{yellow}%}.)$USER"
fi
}
9. terminal 이름 변경
터미널에서 사용자의 이름이 마음이 안들경우 변경이 가능합니다. 이것도 2번처럼 적용하면 됩니다.
맨 마지막 부분에 추가해 주고 "하고 싶은 이름"부분을 변경해 주시면 됩니다.
prompt_context() {
prompt_segment black default "하고싶은이름"
}
마무리
여러 블로그나 외국 문서를 찾아보며 적용했습니다. 그런데 중간중간 오류와 문제가 많이 생겼습니다.
다른 사분들은 1시간 걸릴 거 3시간은 걸린 듯합니다ㅠㅠ
다른 분들도 저처럼 너무 시간투자 하지 마시고 이 글을 보고 빨리 문제를 해결했으면 좋겠습니다.