❗️ 이 시리즈는 React.js로 이미 작성된 프로젝트의 업무 인수인계 및 개인 기록용으로 작성되었습니다.
React.js 프로젝트를 새로 만드는 과정은 담겨있지 않습니다.
혹시 잘못된 내용이 있다면 언제든지 댓글 부탁드립니다! 😁
포스트 작성 시점 기준 개발 환경은 다음과 같습니다.
- OS : macOS 10.15.5 (catalina)
- IDE : intelliJ IDEA Ultimate 2020.1.3 (WebStorm 상위 호환) / VSCode 1.47
- Shell : zsh - macOS catalina부터 기본 쉘이 변경되었습니다.
Node.js 설치
1. 명령줄 도구를 이용한 설치
macOS에는 Homebrew라는 강력한 패키지 매니저가 있습니다.
저는 개인적으로 명령줄 도구(Command-Line Tool) 외에도
대부분의 맥용 애플리케이션을 brew를 이용해 설치 / 관리하고 있습니다.
관리 포인트를 줄일 수 있고 간단한 명령어로
각 애플리케이션의 버전 등의 상태 파악이 편리하기 때문입니다.
자동 체크섬 기능도 있어서 비교적 파일 변조로부터 안전합니다.
가끔 brew repo 업데이트가 늦어서 버전이 달라져 체크섬 실패로 설치 및 업데이트가 안되는 건 함정
개발 환경이 Windows 10이라면 최신 2004 업데이트 이후
WSL2를 통해서 리눅스의 apt-get / yum 등의 패키지 매니저를 사용할 수 있습니다.
Node.js는 WSL2 환경에 설치하여도 정상 작동하며
VSCode의 WSL 확장을 통해 지원이 잘 되는 것을 확인했습니다.
추후 WSL2로 Node.js 개발 환경 설정하기 포스트도 추가할 예정입니다.
우선 NVM(Node Version Manager)을 설치합니다.
- NVM 공식 깃허브 권장 방식
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" - homebrew 사용 방식
NVM 공식 깃허브에서는 brew를 이용한 설치를 권장하지 않고 있습니다.
하지만 High Sierra 시절부터 사용했었고 현재 딱히 문제가 없어서 저는 유지 중입니다.
내용으로 짐작컨데 brew로 설치 후에 정상 작동하지 않는 경우에 대한 이슈 제기가 많았던 것 같습니다.
아래 방법을 따라하시면 문제 없이 사용 가능합니다.$ brew install nvm
설치 후 만약 사용자 경로에 .nvm 디렉토리가 없다면 생성해줍니다.
$ mkdir ~/.nvm
그리고 ~/.zshrc 파일에 vim이나 vscode 등을 이용하여
NVM 관련 환경 변수를 등록해주는 작업을 해줍니다.
export NVM_DIR="$HOME/.nvm" [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion
NVM이 정상 설치 되었는지 버전과 도움말을 확인해봅시다.
$ nvm --version # 버전 확인 $ nvm --help # 도움말 확인
만약 설치가 확인 되지 않았다면 터미널 세션에서 아직 .zshrc 파일을 로드하지 못했을 수 있습니다.
아래 명령어를 실행해서 로드해주거나 터미널을 새로 열어줍니다.
$ source .zshrc # .zshrc의 변경 내용을 현재 터미널에 적용
로드에 성공 후 다시 도움말을 확인하면 다음과 같은 상세한 도움말을 얻을 수 있습니다.
포스트 작성 중에 발견한 hyper-pokemon 테마가 자랑하고 싶었던 건 비밀
NVM을 설치하는 이유는 프로젝트마다 사용한 Node.js 버전이 다른 경우
해당 프로젝트의 Node.js로 손쉽게 교체해주기 위함입니다.
우선 최신 LTS(Long Term Support) 버전을 설치하겠습니다.
$ nvm install --lts # Node.js의 최신 LTS 버전 설치 명령줄 옵션 $ nvm current # 현재 nvm이 사용 중인 Node.js 버전 확인 $ nvm ls # NVM으로 설치한 Node.js 목록 출력
설치가 완료되었습니다.
특정 LTS 구버전이 필요하시면 위에 나온 lts/* 이하의 별명들을 활용하면 설치 가능합니다.
물론 버전명 명시로도 설치가 가능하구요.
$ nvm install --lts=dubnium # v10.x.x 버전의 코드네임 $ nvm install v8.17.0 # 특정 버전을 정확히 명시해서 설치
그리고 지금 사용할 Node.js 버전을 선택해주고 잘 적용 되었는지 확인합니다.
$ nvm use --lts # 최신 LTS 버전을 사용 $ nvm current # NVM이 현재 사용 중인 버전 확인 $ node -v # 현재 OS에서 사용 중인 Node.js의 버전 확인
위 두 가지 명령어로 확인한 버전이 같아야 정상적으로 환경 변수 설정이 끝난 것입니다.
만약 다르다면 NVM 이외의 방법으로 Node.js를 설치하진 않았는지 확인해봐야합니다.
2. Node.js 홈페이지 다운로드를 통한 설치
만약 특별히 Node.js를 사용하는 프로젝트가 많지 않거나
버전 관리가 필요 없을 경우 Node.js 공식 홈페이지에서 .pkg 파일을 다운받아 설치하셔도 됩니다.
오늘은 밤이 늦어서 이만 줄입니다. 다음 편엔 IDE 설정을 진행하겠습니다.
