![thumbnail](/static/40bbc823969801dc9ba166af8aa9ca0b/b1abc/230116_react-thumbnail.png)
맥에서 React로 개발하기 위한 환경 설정과 VSCode 기본 설정을 해보자.
macOS React 개발 환경 세팅
Homebrew 설치
먼저 macOS용 패키지 관리자인 homebrew
를 설치한다. 위 사이트에 방문하여 Install Homebrew의 내용을 복사한 후 터미널에 붙여 넣어준다.
![Homebrew Page Homebrew Page](/static/e6cf3508655ff13a08697f8f4548a062/dface/230116_homebrew.png)
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
패스워드를 요구하는 문구가 뜨면 맥의 비밀번호를 입력한다. 그럼 아래와 같이 설치가 완료된다. (패스워드는 안 보이는 게 정상이다)
![Install Homebrew Install Homebrew](/static/6b5776e235836afef5904e17e912639f/dface/230116_homebrew-install.png)
설치가 완료되면 brew 명령어를 사용할 수 있게 ==> Next steps:
에 나온 명령 2줄을 복사하여 실행해준다.
$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/유저이름/.zprofile
$ eval "$(/opt/homebrew/bin/brew shellenv)"
![Homebrew next steps Homebrew next steps](/static/0f7c2f8a0bed23808a34f3e3e64d5506/dface/230116_homebrew-next-steps.png)
그러면 brew
명령어를 사용할 수 있게 된다.
Node.js 설치
nvm으로 Node.js를 설치해 줄 것이다. nvm은 Node Version Manager로 시스템에 여러 버전의 node.js를 설치하고 버전을 쉽게 변경할 수 있게 하는 등 노드 버전을 관리하는 도구이다. 아래 명령어로 설치한다.
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
shell에 내용이 반영될 수 있도록 본인이 사용하는 shell에 맞게 명령어를 실행한다.
$ source ~/.bashrc
$ source ~/.zshrc
$ source ~/.profile
이제 Node.js를 설치할 수 있게 되었다. 아래 명령어로 node 버전을 확인한 다음 Latest LTS: 버전으로 설치한다. 현재 글을 작성하는 기준으로는 v18.13.0 버전이 가장 최신 LTS이다.
$ nvm ls-remote
$ nvm install v18.13.0
![Latest LTS Latest LTS](/static/a61cf961d83d04bdecc00e89421e341f/f03ec/230116_latest-lts.png)
node -v
로 설치된 버전을 확인할 수 있다.
$ node -v
yarn 설치
node 패키지 관리자로 yarn을 사용하고 싶으면 brew나 npm으로 설치해 줄 수 있다.
$ brew install yarn --ignore-dependencies
or
$ npm install -g yarn
yarn 버전 확인
$ yarn -v
VSCode 설치 및 환경 설정
VSCode 설치
터미널에 아래 명령으로 VSCode(Visual Studio Code)를 설치하자.
$ brew install --cask visual-studio-code
언어 변경
언어 설정을 한국어로 변경하고 싶으면 단축키 shift + command + X
를 누르거나 좌측 메뉴 바 5번째 아이콘 확장(extension) 탭으로 이동한다. 검색창에 Korean을 입력하고 Korean Language Pack for Visual
을 찾아 설치해준다.
설치가 완료된 후, VSCode를 종료하고 다시 들어가면 한글로 나온다.
![VSCode Korean Language VSCode Korean Language](/static/a071e221fcb473a5880a845df58df2ef/fe486/230116_vscode-korean.png)
테마 변경
VSCode 테마 색상을 변경하고 싶다면 command + ,
를 눌러 설정으로 이동한다. 검색창에 color theme를 입력하면 테마를 변경할 수 있는 목록이 뜬다. 원하는 색상으로 변경하자.
![VSCode Theme VSCode Theme](/static/d59edfd2914263de81f430f451487e9f/fe486/230116_vscode-theme.png)
prettier 설치
prettier는 코드를 일정 패턴으로 정리해서 보여주는 프로그램이다. 줄 바꿈, 띄어쓰기, 들여쓰기 등 본인이 설정한 값으로 보기 좋게 정리해준다.
확장 탭에 들어가 마켓플레이스에 prettier를 입력하고 설치해준다.
![VSCode prettier VSCode prettier](/static/c8e5936fdd09e9a5de2ce3ae1675ace6/fe486/230116_prettier.png)
settings.json
에 아래 코드를 붙여 넣어 준다. settings.json
은 설정 탭의 상단 바 빨간 박스 아이콘을 누르면 파일이 열린다.
![VSCode setting VSCode setting](/static/78bc1836b524cd9e343f43d2e3631914/fe486/230116_settings.png)
{
"editor.tabSize": 2, // 들여쓰기 칸 수 (원하는 대로 설정)
"editor.defaultFormatter": "esbenp.prettier-vscode", // 기본 formatter 설정
"editor.formatOnSave": true, // 파일 저장 시 prettier 설정대로 저장
// 타입스크립트 사용 시
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnPaste": true,
"editor.formatOnSave": true
}
}
여기까지하면 맥에서 리액트를 사용하기 위한 기본 설정은 끝났다.
References
https://github.com/nvm-sh/nvm