Skip to main content

Brewfile을 이용한 개발 환경 자동화 세팅 구축기 (Macbook - M1)

Duduling
Duduling
Front-end Web Developer

Macbook 자동화 세팅 구축하기

서론​

회사에서 M1 맥북을 새로 받았는데 기존에 있던 온보딩 문서가 오래 되기도 했고 새로 설치하면서 정리하고 싶은 욕구가 생겼다. 그렇게 생각을 하던 도중 뭔가 이런 것을 sh로 개발 환경 자동화 세팅을 해 놓으면 앞으로도 누구라도 맥북을 받아서 개발 환경을 빠르게 세팅 할 수 있지 않을까? 싶은 생각에 도전하게 되었다.

총 분류는 3가지로 나누어져 있다. 내가 프론이기에 백엔드 부분의 툴까지는 정확히 모르고 프론트 중심으로 설정을 했다. (추 후 백엔드의 이야기를 들어보니 백엔드는 IntelliJ로 모든 것을 한다고 한다.. 👍🏻)

그럼 시작! 😎

1. Common​

1-1. Homebrew​

# Install brew
> /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

> echo 'eval "$(/opt/homebrew/bin/brew shellenv)"'
> source ~/.zshrc

1-2. dev.Brewfile​

# Common
brew "cask"
brew "mas"

brew "kubectl"
brew "kubectx"

cask "iterm2"
cask "lens"
cask "docker"
cask "tunnelblick"
cask "mysqlworkbench"

cask "notion"
cask "gather"

brew "nvm"
cask "firefox"
cask "brave-browser"
cask "google-chrome"
cask "webstorm"
cask "visual-studio-code"

cask "zeplin"
cask "postman"

cask "hyper"
cask "spectacle"
cask "gitkraken"
cask "sublime-text"

cask "alfred"
cask "appcleaner"
cask "telegram"
cask "dropbox"
cask "aldente"

mas "Slack", id: 803453959
mas "KakaoTalk", id: 869223134
mas "Keka" id: 470158793
mas "Microsoft To Do" id: 1274495053
mas "AutoMute - No More Oopsies" id: 1118136179

입맛에 따라 추가하고 빼셔서 구축하시면 됩니다.

# 위 파일을 실행
> brew bundle --file=${./dev.Brewfile}

위 파일로 목록들을 정리해 한번에 brew install을 할 수 있다.

2. ZSH​

2-1. oh-my-zsh​

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

2-2. zsh plugins​

# Install zsh-completions
> git clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions

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

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

# Install zsh-history-substring-search
> git clone https://github.com/zsh-users/zsh-history-substring-search ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-history-substring-search

  • ~/.zshrc

    plugins=(
    	...
    	zsh-completions
        zsh-autosuggestions
    	zsh-syntax-highlighting
    	zsh-history-substring-search
    )

    autoload -U compinit && compinit

    # Custom Zsh

    # Remove computer name
    prompt_context() {
     if [[ "$USER" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; then
     	prompt_segment black default "%(!.%{%F{yellow}%}.)$USER"
     fi
    }

    # Add random emoji
    prompt_context() {
      # Custom (Random emoji)
      emojis=("⚡️" "🔥" "🇰" "👑" "😎" "🐸" "🐵" "🦄" "🌈" "🍻" "🚀" "💡" "🎉" "🔑"  "🚦" "🌙")
      RAND_EMOJI_N=$(( $RANDOM % ${#emojis[@]} + 1))
      prompt_segment black default "Your name ${emojis[$RAND_EMOJI_N]} "
    }

3. Hyper -> Warp로 변경 됨 (Option)​

Warp 좋아요...! 한번 써보세요!

Duduling's TIL - 포스팅 바로가기

2. Front​

2-1. Install NVM​

> brew install nvm

  • ~/.zshrc

    ...

    # NVM
     export NVM_DIR="$HOME/.nvm"
    [ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
    [ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion
> nvm install ${version}

2-2. Install npm​

> npm i -g lerna

2-3. VsCode Extension​

  • extensions.list


    # Duduling's pick
    # 컨트롤 + 옵션 + L 누르면 콘솔 만들어 줌
    ChakrounAnas.turbo-console-log
    # 프로젝트별로 대시보드 만들어서 보는 플러그인
    kruemelkatze.vscode-dashboard
    # Git 쓰려면 무적권
    eamodio.gitlens
    # 협업 할 때 서로 라이브 코딩 플러그인
    ms-vsliveshare.vsliveshare

    # html 태그 래핑 플러그인
    hwencc.html-tag-wrapper
    # html 태그 자동 닫기 플러그인
    formulahendry.auto-close-tag
    # tag 세트로 이름 같이 바꿔주는 플러그인
    formulahendry.auto-rename-tag
    # 색상 코드를 색상으로 보여주는 플러그인
    naumovs.color-highlight
    # 괄호 색으로 엮어주는 플러그인
    CoenraadS.bracket-pair-colorizer
    # class 이름 짓는거 도와 줌
    Zignd.html-css-class-completion

    # SVG 프리뷰
    cssho.vscode-svgviewer
    # env 관련 플러그인
    mikestead.dotenv
    # html 브라우저로 열어주는 플러그인
    techer.open-in-browser
    # 마크 다운 프리뷰 플러그인
    bierner.markdown-preview-github-styles
    # 자동 임포트 경로 찾아주는 플러그인
    NuclleaR.vscode-extension-auto-import

    # 코드 작성 및 도움을 주는 플러그인s
    dbaeumer.vscode-eslint
    esbenp.prettier-vscode
    dsznajder.es7-react-js-snippets
    VisualStudioExptTeam.vscodeintellicode

    # Material Theme 관련 플러그인s
    Equinusocio.vsc-community-material-theme
    Equinusocio.vsc-material-theme
    PKief.material-icon-theme

해당 파일을 복사해서 밑에와 같이 실행 시키면 된다.

> cat ${extensions.list} |% { code --install-extension $_}

3. ETC​

3-1. 하단 Dock 지연 없이 숨기기​

> defaults write com.apple.dock autohide -bool true && defaults write com.apple.dock autohide-delay -float 0 && defaults write com.apple.dock autohide-time-modifier -float 0.75 && killall Dock

마무리​

이렇게 하면 얼추 80% 정도는 세팅이 끝난다. 😆
추 후에는 이제 각 프로그램 안에서 세부 설정을 진행하면 된다.
사실 아예 자동화를 만들려고 했지만 그렇게 만들던 오히려 사람들이 세부적으로 만지기 더 불편할 것 같아 그냥 놔뒀다.
앞으로 이 글만 남아 있다면 세팅하는 것이 별로 귀찮은 일이 아닐 것 같다.

끝!

References​