💻 맥북 에어(M1,2020)에 개발환경 세팅 - 리액트 개발자

작년에 살까 말까 고민하다가 안 샀는데
코로나 확진되고 자가 격리 기간 동안 물욕이 폭발하는 바람에 얼떨결에 구매해버림;;

이제 무거운 회사 맥북 말고 가벼운 맥북 에어 들고 개발해봅시다🥳

설치에 앞서 기존 맥북에서 마이그레이션을 하는 경우
Intel 버전의 애플리케이션들이 그대로 마이그레이션 되어
M1이 성능을 제대로 발휘하지 못한다고 한다

기존 맥북을 마이그레이션 하는 경우에는 M1에 맞게 업데이트를!
그리고 깡통 맥북에 개발환경을 세팅하는 경우라면 니즈에 맞게 잘 설치해야 된다,,

상단바 가장 좌측에 사과 모양 애플 로고를 누르고 - 이 맥에 관하여 - 저장공간 - 관리를 누르면 
아래와 같은 창이 뜬다. 그다음 응용 프로그램을 클릭하면 이 맥에 설치된 응용 프로그램을 확인할 수 있는데
여기서 종류 탭의 정보를 확인해서 애플리케이션을 업데이트하고 니즈에 맞게 잘 설치해봅시다

Universal -  M1과 Intel 모두 지원
Apple Silicon :  M1에 최적화된 어플리케이션 (Intel은 지원하지 않음)
Intel : M1에 최적화 된 애플리케이션이 아니라 로제타 2를 통해 자동으로 실행됨

M1을 구매했으니 가급적 M1에 최적화된 버전을 설치하는 게 좋겠죠,,,?
Apple Silicon 딱지(?)가 붙어있으면 지원한다는 뜻~

---

1. VSC 설치 

apple Silicon을 선택하면 자동으로 다운로드된다

Download Visual Studio Code - Mac, Linux, Windows

 

2. VSC Plugin 설치

- Live Server

 

- Prettier - Code formatter

 

- Reactjs code snippets

 

- ESLint

 

- Material Icon Theme

 

- Auto Rename Tag

 

3. ITerm2 설치

최신 버전을 받으면 자동으로 Apple Silicon을 지원한다

iTerm2 - macOS Terminal Replacement

 

4. Homebrew  설치

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

Homebrew

위 커맨드 라인을 입력하고 조금 기다리면 Installation successful! 이 뜬다
그리고 친절하게 next step으로 환경변수 하는 커맨드 라인을 알려준다
Iterm에서 커맨드 라인을 그대로 입력하면 설치 완료

 

5. Git 설치

위에서 설치한 brew를 이용해 git을 설치

brew install git

6. Node 설치

 brew를 통해 설치하고

brew install node

설치가 제대로 되었는지 확인하기 위해 버전을 확인해보면 된다

node -v
npm -v

 

7. yarn 설치

이것도 brew를 통해 설치
node가 이미 설치되어있기 때문에 --ignore-dependecies를 입력해 node를 제외하고 설치한다

brew install yarn --ignore-dependencies

 

 

제대로 설치가 되었는지 확인하기 위해 버전을 확인해보자

yarn -v