[220211] 터미널 커스텀하기 / 저장시 코드 자동정렬

이제는 더 미룰 수 없다. 너의 Git, 나의 코드.

 

* 맥OS 기반에서 설치한 글이다 *

자바스크립트를 할때까지만해도 굳이 필요성을 느끼지 못했던 커스텀.

원래 튜닝의 끝은 순정이지.라는 마음으로 미루고 미루다 난관에 봉착했다.

 

조금은 관심을 더 기울여야하는 내 기본코드. 어 그래서 branch가 어디라고?

말로만 듣던 깃과 깃헙에 가입하고 코딩을 시작하니 branch 위치를 알기가 불편하다.

블록별로 딱딱 떨어지던 지난 코딩과 다르게 뭐 하나만 바꿔도 폭포처럼 줄줄줄 쏟아지는 코드를 헤쳐나갈 자신이 없었다.

그래서 작성하는 터미널 커스텀 작성법.

 

---

 

1.    iterm2 설치하기

https://iterm2.com/index.html

iTerm2 - macOS Terminal Replacement

 

 

---

 

 

2.   homebrew 설치하기

https://brew.sh/index_ko

Homebrew

 

 

homebrew 사이트에 들어가서 위에 보이는 코드를 터미널에 붙여넣기를 하면된다.

아니면 이 코드를 복사 붙여넣기 해도 무방하다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

 

---

 

 

3.   zsh와 oh my zsh 설치

터미널에 다음 코드를 입력하면 zsh가 설치된다.

brew install zsh

 

zsh 설치가 끝난 후 아래 코드를 복사 후 붙여넣기하면 om my zsh 설치가 끝난다.

아마 무지개빛으로 영롱한 코드가 한다발 보일텐데, 나는 이미 설치해놓은 상태라서 안 뜬다.

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

 

 

---

4.   oh my zsh에서 테마 설치하기

oh my zsh에서는 친절하게도 자체적인 커스텀 옵션을 생성해 놓아서 고를 수가 있다.

https://github.com/ohmyzsh/ohmyzsh/wiki/Themes

GitHub - ohmyzsh/ohmyzsh: 🙃 A delightful community-driven (with 2,000+ contributors) framework for managing your zsh config

 

크롬에서 번역기능을 사용하면 더욱 친절하게 설명을 한글로 볼 수 있다.

 

 

 

하지만 나는 글보다 이미지가 알기 쉬우므로 미래의 나를 위해 이미지로 남겨놓겠다.

터미널을 켜서 다음 코드를 입력하자.

vi ~/.zshrc

이런 코드가 한바닥 나올건데, 침착하게 빨간 박스 있는곳까지 화살표 키보드를 사용해 내려가자.

아마 robbyrussell로 되어있을텐데, 상관없다.

나는 branch를 명확하게 나타내주는 agnoster코드를 사용할거니 i를 눌러 insert 모드로 바꾸고, 저렇게 바꿔주자.

바꿔준 후에는 esc를 눌러 insert모드를 종료하고, :wq!를 눌러서 바깥으로 나와주자.

 

그리고 터미널에 인간의 언어가 없을 가능성이 큰데, 폰트가 깨져서 그렇다.

깨지지 않는 새 폰트를 넣어주자.

 

 

 

---

 

 

5.   폰트 설치하기

어지간하면 호환이 다 잘된다는 D2 coding font를 설치했다.

https://github.com/naver/d2codingfont

GitHub - naver/d2codingfont: D2 Coding 글꼴

 

해당 링크로 들어가면 폰트에 대한 자세한 설명을 볼 수 있다.

그리고 밑 이미지를 따라하면 다운로드를 받을 수 있다.

뭘 받을지 모르겠다면 가장 밑에 있는 1.3.2를 받아서 설치하자.

처음에 어떻게 다운 받는지 몰라서 15분간 헤맨 과거의 내모습을 미래의 너는 하지마렴.

 

원하는 폰트를 맥os 글꼴에 추가한 후, iterm2로 돌아와서 cmd와 ,를 눌러주자.

이렇게 설정창이 뜰텐데, Profiles > Text 를 눌러서 Font창에서 아까 설치한 D2Coding 글꼴을 적용해주자

여기까지하면 코드가 깨지지 않고 잘 보일 것이다.

 

 

---

 

 

6.   iterm2 테마 변경

여기서 중요한건 기본 macos 터미널이 아니라 iterm 터미널 테마다.

다른 사이트에서 iterm2 터미널이라고 안 적어놓고 터미널으로 다 퉁쳐버려서 나는 왜 기본 터미널이 안 바뀌지 하고 3시간 검색했다.

미래의 나는 이거 까먹고 찾겠다고 검색하지 말자.

 

https://iterm2colorschemes.com/

Iterm Themes - Color Schemes and Themes for Iterm2

위 링크에 들어가면 사용하고 싶은 테마가 나오니 그 중에서 마음에 드는걸 고르자. (나는 Snazzy를 골랐다.)

저기 보이는 Snazzy 이름을 클릭하면 다른 창으로 이동하는데, 바뀐 그 url을 저장하자.

https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/schemes/Snazzy.itermcolors

 

cd download
mkdir themes
curl -LO [원하는 폰트 url]

iterm2 터미널을 원하는 위치에 themes 폴더를 만들어준다.

폰트를 저장할 장소를 만든거라, 다른 폴더를 만들어놨다면 거기에 설치해도 무방하다.

다운로드는 [원하는 폰트 url]은 아까 복사했던 url을 붙여넣으면 된다.

 

iterm2를 켜놓은 상태에서 cmd랑 ,을 누르면 환경설정창이 뜬다.

colors 탭을 클릭한 후, Color Pressets를 누르고 Import 버틑을 클릭해 아까 저장해둔 폴더를 찾는다.

폴더를 찾아서 선택한 후, item2를 종료후 다시 실행하면 예쁘게 설정되어 있다.

 

 

 

 

---

 

 

7.   터미널이나 vsc에서 폰트가 그래도 깨진다

 

7-1) 터미널

터미널 > 환경설정 > 프로파일 > 지금 사용하고있는 프로파일 선택 > 텍스트

여기서 서체가 D2Coding으로 잘 설정되어 있는지 확인하기.

 

 

7-2) 비주얼 스튜디오 코드, vsc

비주얼 스튜디오 > 기본설정 > 설정에 들어가서 family라고 검색하면 다음 항목이 뜬다

설치해줬던 'D2Coding'을 넣으면 터미널 출력값을 D2Coding 폰트로 볼 수 있다.

 

나는 vsc에서는 SourceCodePro가 훨씬 가독성이 좋아서 SourceCodePro를 설치했다.

(원하는 다른 폰트가 있다면 호환성이 매우좋은 구글폰트를 검색해서 적용하는 좋은 방법도 있다.)

SourceCodePro-Regular.ttf

0.11MB

이 파일을 다운 받아서 vsc의 설정을 다시 켜서, 빨간 버튼을 누르면 json 파일이 열리고 편집이 가능하게 된다.

중괄호 안에 저렇게 붙여넣으면 된다.

"terminal.integrated.fontFamily": "SourceCodePro-Regular"

 

 

설정에 돌아가서 family를 검색해보면 터미널 언어로 잘 자리잡은걸 확인할 수 있다.

 

 

 

---

8. 터미널 사용자명 변경하기

다시한번 다음 코드 입력하고,

$ vi .zshrc

 

수정모드인 'i' 누르고, 맨 밑에다가 다음 코드를 입력한 후, esc 키를 누르고 ':wq!'를 입력 한 후 나오면 된다.

prompt_context() { 
  prompt_segment black default "변경하고 싶은 이름" 
}

 

저장한 코드를 실행시켜주는 아래 명령문을 입력하면 사용자명이 변경된 것을 볼 수 있다.

$ source ~/.zshrc

 

 

 

---

9. 저장시 코드 자동정렬하기

 

Prettier를 설치했다면, vscode에서 설정이 가능하다.

 

command키와 ,를 동시에 눌러주면 설정이 뜬다.

 

위와 같이 설정해주면 저장할때마다 코드가 자동정렬된다.