💻 [Mac] M1 silicon mac 개발 환경 세팅하기

기존에도 개인 노트북으로 m1 silicon mac을 사용중이었지만 회사에서 새로 m1 mac을 지급해서 개발 환경 세팅을 정리해보려고 한다.
기존에 사용하던 macbook은 처음 사용해보는 mac으로 인해 얼레벌레 세팅되었기 때문에 🤦🏻‍♀️ 다시 한 번 정리해보기!

homebrew 설치하기

기존에는 Homebrew가 silicon mac을 지원하지 않았기 때문에
터미널 우클릭 - 정보 가져오기 - rosetta를 사용하여 열기
프로세스를 통해 설치해야했지만, 2021년 2월부터 Homebrew 3.0.0을 통해 silicon mac을 정식 지원하고 있기 때문에, rosetta를 통해 실행하지 않아도 된다.

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

설치 후

which brew
/opt/homebrew/bin/brew

brew --version
Homebrew 3.1.5
bHomebrew/homebrew-core (git revision 543e4a048e; last commit 2021-05-05)

를 통해 brew 명령어의 경로와 버전을 확인할 수 있다. 기존 intel 의 경우 /usr/local에 설치되고 silicon mac은 /opt/homebrew에 설치된다.

brew 명령어가 잘 실행되지 않고, 오류가 뜬다면 환경변수 추가가 필요하다.
vi ~/.zshrc 를 입력해,
export "PATH=/opt/homebrew/bin:$PATH" 추가 후 :wq! 를 통해 저장 후 종료시킨다.

brew를 다운로드 할 때 brew install cask를 통해 맥용 gui 어플리케이션을 같이 설치하면 좋다.

brew install 명령어 실행 시

No similarly named formulae found
No previously deleted formula found
No formulae found in taps

오류가 뜰 때가 있는데

rm -fr $(brew --repo homebrew/core)

brew의 core 디렉토리를 삭제 후 brew install 명령어를 다시 실행해본다!

git 설치하기

brew install -s git

git --version 으로 잘 설치되었는지 확인한다.

iterm2 설치

m1은 기본적으로 zsh 환경으로 되어있어 zsh는 따로 설치해주지 않아도 된다.

brew install iterm2

iterm2 한글 깨짐 방지는
profile > text > unicode > from 을 NFC로 변경한다 그리고
시스템 설정 > 보안 및 개인 정보 보호 > 개인 정보 보호 > 전체 디스크 접근권한을 통해 접근 권한을 부여할 수 있다.

oh-my-zsh

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

이렇게 하면, 기본적인 세팅은 마무리 된다.
하지만 Frontend 개발을 위해서는 몇 가지 세팅이 더 필요하다. 🧐

google chrome 설치

brew search chrome
chrome이 설치 가능한지 찾아본다
brew install google-chrome

visual studio code 설치

brew search visual studio code
vs code 설치가 가능한지 찾아본다
brew install visual-studio-code

세팅 완료 후, 내가 사용하는 extension을 설치해준다.

Bracket Pair Colorizer 2 - syntax 하이라이트 툴
Auto Rename Tag - styled-components를 사랑하는 나에게는 항상 유용한 클로징 태그 이름을 자동으로 바꾸어주는 extenstion
prettier 자동으로 교정해주는 prettier!
vscode-styled-components styled-components css 자동 완성
vetur vue.js 작업시 필요한 extenstion!

Node.js 설치하기

node.js같은 경우는 nvm을 사용해서 설치해줄 것이다.
우선 brew install nvm 을 통해 nvm을 설치해준다. 그 후, nvm을 통해 Node.js 설치해주려고 할 때 zsh: command not found: nvm 이런 에러가 발생한다.

vi ~/.zshrc 를 사용해

# NVM
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

해당 내용을 추가한 후, :wq!를 통해 저장 후 종료시킨다.

source ~/.zshrc 명령어로 zshrc파일을 적용시킨 후,
nvm install 14 명령어로 14버전을 설치한다.

14 버전을 설치하는데는 몇 가지 이유가 있는데, react native 관련 설치를 진행할 때 가장 오류가 없었던 버전이기때문에 해당 버전을 선택했다.

기본적인 세팅 완료!