내가 보려고 만든 FE개발자가 맥 초기화 후 해야할 일 ( macOS 기준, M2 )

맥을 초기화하고 나면 사이트 이곳 저곳 다니면서 설정하는게 귀찮아서 환경설정 올인원 게시물을 작성했다.

1. homebrew설치 : 자세한 설치 방법은 해당 게시물 참고

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

2. chrome 설치

설치하면서 안되면 트러블슈팅해야하니까 선호하는 브라우저로 바로 설치해준다.

홈브루로 chrome을 설치하는 이유는 업데이트와 같은 앱 관리를 할 때 brew 명령어를 통해 컴퓨터안에 있는 응용프로그램들을 한꺼번에 관리할 수 있기 때문이다. ( 슬랙과 디스코드도 설치 가능하다 ) 

brew install --cask google-chrome

---

패키지매니저를 설치해보자

3. nvm 설치

brew install nvm

nvm은 설치 후 꼭 path 설정을 해줘야한다.https://github.com/nvm-sh/nvm

mkdir ~/.nvm # .nvm 파일 생성

vi ~/.zshrc # .zshrc 파일 편집

.zshrc 파일 안에 아래 텍스트를 붙여넣고 esc + :wq! 명령어로 저장한 후

export NVM_DIR="$HOME/.nvm"
    [ -s "$HOMEBREW_PREFIX/opt/nvm/nvm.sh" ] && \. "$HOMEBREW_PREFIX/opt/nvm/nvm.sh" # This loads nvm
    [ -s "$HOMEBREW_PREFIX/opt/nvm/etc/bash_completion.d/nvm" ] && \. "$HOMEBREW_PREFIX/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion

아래 source 명령어를 입력해 nvm을 입력된 경로로 재로드하거나 터미널을 껏다 다시 실행해준다.

source ~/.zshrc

nvm -v 로 버전이 잘 나온다면 설치완료. (2025.01.18 기준 nvm v0.40.1)

4. node, node, npx 설치

nvm install node

• node와 npm이 함께 설치된다
• node -v 와 npm -v으로 잘 설치됐는지 확인하자 (2025.01.18 기준 npm v10.9.2, node v23.6.0)
• npx는 npm 5.2.0이상 버전을 설치했을 경우 함께 설치된다.

4. yarn 설치

npm install -g yarn

(2025.01.18 기준 yarn v1.22.22)

6. vs code 설치

homebrew로 응용프로그램을 설치하는 이유는 후에 업데이트를 할 때 관리하기 편하기 때문이다.

brew install --cask visual-studio-code

7. git 설치 및 ssh key 발급

brew install git

🔑 ssh key 생성

• ssh key 있는지 확인

cat ~/.ssh/id_rsa.pub

없다면 아래와 같은 메시지가 뜬다.

cat: /Users/username/.ssh/id_rsa.pub: No such file or directory

keygen 명령어로 ssh-key 생성

ssh-keygen

해당 명령어를 입력하면 비밀번호 입력/비밀번호 확인 입력 두번 입력하라는 안내가 나오는데 그냥 없이 사용하려 Enter두번 눌러주었다.

cat ~/.ssh/id_rsa.pub

다시 한번 더 확인하면 ssh-key가 있는 것을 확인할 수 있다. 복사 명령어 : pbcopy < ~/.ssh/id_rsa.pub

homebrew로 추가 응용 프로그램 설치

• brew 명령어로 패키지 매니저 뿐만아니라 프로젝트 협업 시 쓰이는 slack이나 discord도 설치하여 업데이트 관리가 가능하다.
• 아래는 homebrew로 slack설치 명령어. 

brew install --cask slack

추가적으로 공부하면 좋은 자료

• https://yceffort.kr/2022/05/npm-vs-yarn-vs-pnpm
• https://toss.tech/article/node-modules-and-yarn-berry
• https://devopedia.org/package-manager
• https://stackoverflow.com/questions/16997950/whats-the-difference-between-module-package-and-library-in-haskell
• https://toss.tech/article/27772
• https://www.jeong-min.com/42-package-manager/
• https://lynmp.com/ko/article/tb585d114096490055
• https://velog.io/@yzii/npm-npx-yarn-%EC%95%8C%EA%B3%A0-%EC%93%B0%EC%9E%90