macOS 개발 환경 구축하기

grip.news

5년 ago

효율적인 개발을 위해 나에게 맞는 도구들을 갖추고 꾸며 “개발 환경”을 만들어야 한다. XCode 와 같이 차선책이 존재하지 않는 경우가 있는 반면, Visual Studio Code 또는 ATOM 같이 선택이 가능한 경우도 있다. BSD 계열의 macOS 에서 개발 능력을 이끌어 내려면 Text 환경에 익숙해저야 한다. 이는 uBuntu/CentOS 와 같은 Linux 계열도 마찮가지다. 이번 포스트는 기능이 크게 제한되는 Terminal 을 대체할 수 있는 환경을 ‘나(글쓴이)’ 위주로 만들고 기록을 남기기 위해 작성 했다.

macOS 의 Terminal 은 VT 시절에 보던 터미널과 크게 다르지 않다.

우선 AppStore 를 방문해 XCode 를 설치하자. XCode 는 iOS 를 위한 Application 개발 뿐만 아니라, 개발에 필요한 컴파일 도구(make, gcc 등)가 함께 설치 되기 때문이다. 특히 Signing 을 위한 Apple Develop Account와 유연하게 연동하려면 XCode를 사용하는게 편하다. (Swift 는 옵션)

homebrew에 필요한 Command Line Tools 는 homebrew 설치시 알아서 설치해 준다.

homebrew 설치

홈브루는 자유-오픈 소스 소프트웨어 패키지 관리 시스템의 하나로서 애플의 macOS 운영 체제의 소프트웨어 설치를 단순하게 만들어준다. 특히 Apple 에서 제공하지 않는 유용한 패키지를 제공해 주며, NodeJS, Watchman 을 설치할 때 편리하다.

# 설치는 root 가 아니라, 사용자 계정으로.
$/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# 설치여부 확인
$ brew doctor
Your system is ready to brew.

Node.js 설치

React-Native 개발을 위해 Node.js 를 설치한다. 꼭 React Application 을 개발하기 위함이 아니더라도, Node.js 는 가볍고 빠른 API Server를 개발할 때 매우 유용하다. (본인 경우) 이 때 Node Package Manager를 사용해야 하는데, NPM 을 사용하려면 Node.js 설치가 필수다. 2019년 5월 현재 최신 버전은 11.x 이지만, LTS 인 10.x 를 설치하자. LTS 에서만 대응하는 패키지가 적잖기 때문.

# @뒤의 숫자는 버전을 의미한다.
$ brew install node@10
node@10 is keg-only, which means it was not symlinked into /usr/local,
because this is an alternate version of another formula.

If you need to have node@10 first in your PATH run:
  echo 'export PATH="/usr/local/opt/node@10/bin:$PATH"' >> ~/.bash_profile

For compilers to find node@10 you may need to set:
  export LDFLAGS="-L/usr/local/opt/node@10/lib"
  export CPPFLAGS="-I/usr/local/opt/node@10/include"

==> Summary

# 경로에 Node 및 환경 변수를 추가한다.
$echo 'export PATH="/usr/local/opt/node@10/bin:$PATH"' >> ~/.bash_profile
$ echo 'export LDFLAGS="-L/usr/local/opt/node@10/lib"' >> ~/.bash_profile
$ echo 'export CPPFLAGS="-I/usr/local/opt/node\@10/include"' >> ~/.bash_profile
$
$ source ~/.bash_profile

# node Alias
$ ln -s $(which node) /usr/local/bin/node

watchman / flow 설치

watchman은 facebook에서 파일 시스템의 변화를 감시하는 용도로 사용하는 툴로, 트래킹이 가능하며 빌드의 성능 향상을 위해 큰 도움이 되며, flow 는 자바스크립트 정적 분석을 도와준다.

$ brew install watchman flow

react-native-cli

React-Native 를 개발하기 위한 커맨드라인 도구를 설치한다.

$ npm -g install react-native-cli

git / git-lfs / wget

기본적으로 macOS 에는 git 이 설치되어 있지만, 최신 안정화 버전에 비해 한단계 정도 버전이 낮다. 큰 용량의 바이너리 파일을 관리하기 위해 현행 버전의 git-lfs (Large File Storage)를 설치할 예정이기 때문에 git 도 함께 업데이트 하자. wget 은 워낙 유명한 도구다 보니 설명이 필요없을 듯.

$brew install git git-lfs wget

# 원활한 한글 처리를 위해 유니코드 옵션을 활성화 하고 기본 계정을 전역으로 저장하자.
$ git config --global core.precomposeunicode true
$ git config --global core.quotepath false
$ git config --global user.name <Your Name>
$ git config --global user.email <you@your-domain.com>

iTerm2 설치, 터미널 교체

기본 Terminal 를 대신할 iTerm2 을 설치하자. iTerm2 은 더 ‘이쁘고, 유용하게’ 사용할 수 있는 다수의 옵션을 사용할 수 있다. cask 명령으로 설치하자.

더 이상 “설치하기 위해 이 파일을 …에 끌어다 놓기” 할 필요 없습니다. brew cask 명령으로 macOS 앱, 폰트, 플러그인, 오픈소스가 아닌 소프트웨어를 설치할 수 있습니다.

$ brew cask install iterm2

Application 에 iTerm2 아이콘이 추가된 것을 확인할 수 있다.

Dracula Theme

상당히 많은 iTerm2 를 위한 Theme 가 준비되어 있다. 본인 기호에 맞는 Theme 를 사용하면 되는데, 나는 Dracula 를 좋아한다. (이외에 많이 사용하는 Theme 로 Snazzy 가 있다)

git 의 repo 를 clone 하거나, 압축된 파일을 받아 “Dracula.itermcolors” 를 추출하자.

# git 으로 받기
$ git clone https://github.com/dracula/iterm.git

# (또는) 압축파일 받기
$ wget https://github.com/dracula/iterm/archive/master.zip

추가하는 방법은 다음과 같다.

iTerm2 > Preferences > Profiles > Colors Tab 선택
Color Presets 클릭
Import… 선택
Dracula.itermcolors 선택
Dracula from Color 선택

Oh My ZSH!

macOS 는 기본적으로 Bash 를 사용하고 있는데 매우 단조롭다. Oh My ZSH!는 최근에 나온 쉘인 zsh의 환경설정을 다루는 프레임워크이며, 커뮤니티 활동이 매우 활발하여 120여 개의 테마와 120여 개의 플러그인이 준비되어있다. zsh 와 zsh-completions를 함께 설치하자.

$ brew install zsh zsh-completions

# 기본 쉘을 bash 에서 zsh 로 변경하자.
$ sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

oh my zsh 를 설치함과 동시에 iTerm2 이 매우 편해졌을 것이다. 우선, 명령어를 입력하면 기존에 입력했던 명령어가 힌트로 나와 자동 완성이 가능하다.

디렉터리를 바꿀 때 .. / … 만으로도 가능하며, git pull 등의 명형어를 gl 로 축약해 사용할 수 있다.

구문 강조와 자동완성 플러그인을 설치하자. 시인성을 좋게 만들어 줄 뿐만 아니라, 반복되는 작업을 간소화 해 준다.

$ git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
$ git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

플러그인을 반영하기 위해 ~/.zshrc 를 수정하자. 앞서 git 을 설치했기 때문에 plugin 에 git 이 하나 덩그러니 있을 것이다.

$ vi ~/.zshrc
.
.
.
plugins=(
  git
  zsh-syntax-highlighting   #추가
  zsh-autosuggestions   # 추가
)

$ source ~/.zshrc

나는 지인으로 부터 추천 받은 pure prompt 를 사용한다. 체감적으로 빠르다고 할까.

$ npm install --global pure-prompt
$ vi ~/.zshrc
.
.
(가장 아래에)
autoload -U promptinit; promptinit
prompt pure

$ source ~/.zshrc

fzf (A command-line fuzzy finder)

주어진 input 에 대해서 fuzzy finding 을 하게 해준다. 원하는 파일이나 히스토리를 ‘실시간’으로 쉽고 빠르게 찾을 수 있도록 도와준다.

$ brew install fzf
$ $(brew --prefix)/opt/fzf/install
# 질문 항목에 대해 모두 Y 를 입력

주요 단축키

단축키	기능
`⌃` + `T`	하위 디렉토리 파일 검색
`⌃` + `R`	히스토리 검색
`esc` + `C`	하위 디렉토리 검색 후 이동

fasd

fasd는 zsh의 플러그인으로 POSIX 쉘용 파일 및 디렉토리에 대한 빠른 액세스를 제공한다. 액세스 한 파일과 디렉토리를 추적하므로 터미널에서 신속하게 참조 및 이동할 수 있게 할 수 있다.

$ brew install fasd
$ vi ~/.zshrc
.
.
.
plugins=(
  fasd
)

$ source ./~zshrc

어느정도 히스토리가 쌓이게 되면 단축 명령어로 해당 폴더로 이동 하거나 파일/디렉토리를 검색할 수 있다.

단축키	기능
`z`	디렉토리 이동
`s`	파일 or 디렉토리 검색

tmux / tmuxinator

tmux(Terminal MUltipleXer)역시 zsh 플러그인으로 iTerm2 내 화면을 분할해 사용할 수 있도록 도와준다. 복수개의 창을 빠르게 열고 이동할 수 있어 iTerm2 창을 여러개 띄우는 것보다 효율적이다. 하지만 명령어가 복잡하기 때문에 tmuxinator 를 이용해 단순화 할 수 있다.

$ brew install ruby
$ brew install tmux
$ gem install tmuxinator
.
.
.

plugins=(
 tmux
 tmuxinator
 )
alias mux="tmuxinator"


# 테마를 반영하자

$ cd ~/
$ git clone https://github.com/gpakosz/.tmux.git
$ ln -s -f .tmux/.tmux.conf
$ cp .tmux/.tmux.conf.local .

$ vi .tmux/.tmux.conf.local

# 가장 아래 추가
# increase history size
set -g history-limit 10000

# start with mouse mode enabled
set -g mouse on

# force Vi mode
# really you should export VISUAL or EDITOR environment variable, see manual
set -g status-keys vi
set -g mode-keys vi

$ source ~/.zshrc

명령어	기능
`tmux`	세션 생성
`tmux attach`	생성되어 있는 세션에 진입
`tmux ls`	세션 목록 확인

단축키	기능
`⌃` + `b`, `c`	새 창 만들기
`⌃` + `b`, `d`	tmux 환경에서 나오기
`⌃` + `b`, `1`~`9`	해당 창으로 이동
`⌃` + `b`, `%`	세로로 창을 나눔 (좌/우)
`⌃` + `b`, `"`	가로로 창을 나눔 (위/아래)
`⌃` + `b`, `화살표`	나뉘어진 창을 좌/우/위/아래로 움직임

neovim

vim editor 는 구문 구분이 쉽지 않다. neovim 과 테마를 반영하면, 파일의 성격에 맞도록 강조해 줌으로서 사용성을 향상시킨다.

$ brew install neovim
$ brew tap homebrew/cask-fonts
$ brew cask install font-hack-nerd-font

# vi 를 입력하면 neovim 이 실행 될 수 있도록 alias 시킨다.
$ vi ~/.zshrc
.
.
alias vim="nvim"
alias vi="nvim"
alias vimdiff="nvim -d"
export EDITOR=/usr/local/bin/nvim

# 플러그인 설치
$ curl -sLf https://spacevim.org/install.sh | bash
$ vi (1 입력 후 엔터, 업데이트 완료 후 종료)

# 테마 변경
$ vi ~/.SpaceVim.d/init.vim
.
.
let g:spacevim_colorscheme = 'onedark' #추가

그리고 폰트를 변경해 줌으로서 설정이 완료 된다.