Node.js를 개발하는 환경을 구축합니다. 윈도우, 맥OS, 리눅스를 대상으로 합니다. 윈도우 사용자는 1. 윈도우 개발 환경 구축, 맥OS 사용자는 2. 맥OS 개발 환경 구축, 리눅스 사용자는 3. 리눅스 개발 환경 구축을 참고해 환경을 구축해주세요.
1. 윈도우 개발 환경 구축
Node.js 설치 → 깃 설치 순서로 진행합니다.
1.1 Node.js 설치
[Todo 01] 웹브라우저에서 Node.js 공식 사이트(https://nodejs.org)에 접속합니다.
[Todo 02] LTS 버전이 명시된 버튼을 눌러서 설치 파일을 내려받습니다.
[Todo 03] 내려받은 파일을 더블 클릭해 실행한 후 기본 설치를 진행하다가 다음과 같은 화면을 만나면 Tools for Native Modules에서는 체크 항목을 체크해주세요. 필요한 툴들을 자동으로 설치할지 체크하는 항목입니다. [Next] 버튼을 눌러 다음으로 진행하고, 설치가 완료될 때까지 기본 설치로 진행합니다.
[Todo 04] 이제 명령 프롬프트를 띄워서 Node.js가 잘 설치되었는지 확인해봅시다. ‘명령 프롬프트’를 실행한 후에 ‘node –version’ 입력하고 enter 를 치세요. 다음과 같이 버전 정보가 나오면 설치가 제대로 된 겁니다.¹
C:\Users\andy>node --version
v20.14.0
1.2 깃 설치
깃(Git)은 컴퓨터 파일의 변경 사항을 추적하고 사용자 간의 공동 작업을 조율하는 분산 버전 관리 시스템입니다. 이 책에서는 예제 코드를 내려받는 용도로만 사용합니다. 이미 깃이 설치되어 있다면이 과정은 건너뛰어주세요. 윈도우에 깃을 설치하는 방법 중 윈도우용 클라이언트를 받아서 설치하는 방법을 알아보겠습니다.
[Todo 01] https://git-scm.com에 접속한 후 [Download for Windows] 버튼을 클릭해 안내에 따라 윈도우용 설치 파일을 내려받습니다.
¹ 윈도우 파워쉘(Windows PowerShell)에서도 잘 되는지 확인해봅시다.
[Todo 02] 내려받은 설치 파일을 더블 클릭해 실행합니다. [Next] 버튼을 눌러 설치를 진행합니다.
[Todo 03] 기본 설치 경로는 C:\Program Files\Git입니다. 기본 설정 그대로 두고 [Next] 버튼을 눌러 진행입니다.
[Todo 04] 설정창이 보입니다. ‘Add a Git Bash Profile to Windows Terminal’을 체크해주는 것을 추천드립니다. Git Bash Profile을 추가하면 윈도우 터미널에서 Git Bash를 사용할 수 있습니다(깃을 사용하기에는 Git Bash가 윈도우 기본 터미널보다는 편리합니다). [Next] 버튼을 눌러 진행합니다.
[Todo 05] 시작 메뉴 폴더를 선택할 차례입니다. 기본값 Git을 그대로 두고 [Next] 버튼을 눌러 진행합니다.
[Todo 06] 깃의 기본 에디터를 선택할 차례입니다. 익숙한 에디터를 선택하면 됩니다. 기본 설정은 Vim으로 되어 있습니다. 주의 사항으로 Vim이 선택된 것은 역사적 이유이니 최신 GUI 에디터를 사용하는 것을 권장한다고 되어 있습니다. 원하는 ① 편집기를 선택한 후 ② [Next] 버튼을 눌러서 다음으로 넘어갑시다.
[Todo 07] 다음으로는 깃의 기본 브랜치명을 무엇으로 할지 정하는 설정입니다. 기본값은 master입니다. master는 인종차별적인 단어라는 인식이 있어서 main을 사용하는 추세입니다. ① main을 사용하는 옵션을 선택하고 ② [Next] 버튼을 눌러서 다음으로 넘어갑시다.
[Todo 08] 명령창(Command Line)에서 어떻게 깃을 사용하게 할지 정하는 설정입니다. 기본 설정을 그대로 두고 [Next]를 클릭합니다.
[Todo 09] 다음으로는 SSH 설정입니다. 이 부분도 기본 설정으로 두고 [Next] 버튼을 눌러서 넘어갑시다. SSH 관련된 부분을 직접 컨트롤하고 싶다면 다른 것을 선택하셔도 좋습니다.
[Todo 10] HTTPS 전송 계층 백엔드로 무엇을 사용할지 정하는 설정입니다. 기본 선택된 ‘Use the OpenSSL library’를 사용하도록 두고 [Next]를 클릭합니다.
[Todo 11] 개행을 어떻게 다룰지에 대한 설정입니다. 윈도우와 유닉스는 개행을 다르게 다루고 있습니다. 이에 서로 변환이 필요한데, checkout(내려받기) 시에는 윈도우 스타일로 commit(업로드) 시에는 유닉스 스타일로 하는 것이 좋습니다. 이 부분이 잘 못되면 일일이 개행 관련 처리를 해야 할 수도 있기 때문입니다. 기본값 그대로 두고 [Next] 버튼을 눌러서 다음으로 넘어갑시다.
[Todo 12] git bash로 사용할 터미널 에뮬레이터를 선택하는 설정입니다. 크게 관계없으니 기본으로 선택된 설정을 그대로 두고 [Next]를 클릭합니다.
[Todo 13] 다음으로는 git pull 동작의 설정입니다. git pull은 서버에 있는 코드를 가져와서(pull) 로컬머신의 코드에 합치는 작업입니다. 자세한 설명은 생략합니다만 초보자에게는 fast-forward or merge가 좋습니다. 그대로 두고 [Next] 버튼을 눌러서 넘어갑시다.²
[Todo 14] 깃의 인증서 관리자입니다. 기본 설정으로 두고 [Next] 버튼을 클릭합니다.
[Todo 15] 다음으로는 파일시스템 캐시와 심볼릭 링크를 사용할지에 대한 설정입니다. 기본 설정으로 두고 [Next] 버튼을 눌러 다음으로 넘어갑시다. 참고로 첫 번째 설정은 파일시스템 캐시를 활성화하는 옵션으로써 활성화하면 메모리에서 읽어오는 성능이 향상됩니다. 두 번째 심볼릭 링크는 윈도우에서는 지원하지 않습니다. 따라서 소스 코드 저장소에는 심볼릭 링크를 저장하지 않는 것이 좋습니다만, 필요한 경우 여기서 활성화할 수 있습니다(심볼릭 링크는 윈도우의 바로가기와 비슷한 기능입니다).
[Todo 16] Git bash에 유사 콘솔 기능을 추가한다거나 시스템 모니터를 추가하는 등의 실험적 기능이므로 사용하지 않고 [Install]을 눌러서 설치를 진행합니다.
[Todo 17] 릴리즈 노트를 볼 필요는 없으니 1 선택을 해제하고 2 [Finish]를 누르면 설치 완료입니다.
[Todo 18] 명령 프롬프트를 열어서 git –version 명령을 입력해 잘 설치됐는지 확인해봅시다.
> C:\Users\andy> git --version
git version 2.34.1.windows.1
²깃 Rebase에 익숙한 분은 해당 설정을 선택해도 좋습니다. Rebase는 fast-forward or merge와 마찬가지로 서버의 소스를 가져와 합치는 방법입니다. merge는 마지막 코드를 기반으로 코드를 병합한다면, Rebase는 모든 작업 이력을 비교해보고 소스 코드의 이력을 수정하면서 소스를 병합합니다.
2. 맥OS 개발 환경 구축
환경 구축은 Node.js 설치 → 깃 설치 순서로 진행합니다.
2.1 Node.js 설치
[Todo 01] 웹브라우저에서 Node.js 공식사이트(https://nodejs.org)에 접속합니다.
[Todo 02] LTS를 클릭해 내려받습니다.
[Todo 03] 내려받은 설치 파일을 클릭해 기본값으로 설치를 진행합니다.
Node.js는 [/usr/local/bin/node]에, npm은 [/usr/local/bin/npm]에 설치됩니다. /usr/local/bin이 $PATH에 설정되어 있어야 자동으로 명령어가 인식됩니다.
[Todo 04]설치가 완료되었으면 터미널을 띄워서 확인해봅시다. 파인더에서 [응용 프로그램] → [유틸리티]에서 터미널을 찾아 실행합니다.
[Todo 05] 터미널의 명령창에 node –version을 입력하고 enter 를 누르세요. 그러면 Node.js의 버전이 표시됩니다. 버전이 표시되었다면 제대로 설치된 겁니다.
$ node --version
v20.14.0
2.2 깃 설치
깃(Git)은 컴퓨터 파일의 변경 사항을 추적하고 사용자 간의 공동 작업을 조율하는 분산 버전 관리 시스템입니다. 이미 깃이 설치되어 있다면 이 과정을 건너뛰어주세요.
깃은 홈브류³로 설치할 수 있습니다.
[Todo 01] 홈브류를 이용한 설치는 간단합니다. 다음과 같이 brew 명령어 한 줄을 입력해주세요.
brew install git
3. 리눅스 개발 환경 구축
환경 구축은 Node.js 설치 → 깃 설치 순서로 진행합니다.
리눅스는 여러 가지 배포판이 있습니다. 여기서는 사용하기 편한 배포판인 우분투를 기준으로 설명합니다. 우분투 버전은 20.04.3 LTS 버전으로 진행합니다.
3.1 Node.js 설치
apt-get install로 Node.js를 설치할 수 있습니다. 매우 오래된 버전이므로 가능하면 PPA나 NVM을 사용해주세요. 이 책에서는 가장 간단한 PPA를 사용하는 법을 다룹니다. NVM도 사용하기 어렵지 않으므로 관심 있는 분은 https://github.com/nvm-sh/nvm에서 확인해보시길 바랍니다.
[Todo 01] 우선 터미널 프로그램을 실행합니다(단축키 control + alt + t).
[Todo 02] curl이 필요한데 우분투에는 기본적으로 설치되어 있지 않습니다. curl을 먼저 설치합니다.
$ sudo apt-get install curl -y
[Todo 03] 다음으로는 PPA를 추가합니다.
$ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
[Todo 04] Node.js를 설치합니다.
$ sudo apt-get install -y nodejs
[Todo 05] Node.js가 잘 동작하는지 확인해봅시다.
$ node --version
v18.14.1
[Todo 06] npm을 사용하려면 build-essential 패키지도 필요합니다. 다음 명령어를 사용해 설치해줍시다.
$ sudo apt-get install build-essential
3.2 깃 설치
깃(Git)은 컴퓨터 파일의 변경 사항을 추적하고 사용자 간의 공동 작업을 조율하는 분산 버전 관리 시스템입니다. 이 책에서는 예제 코드를 내려받는 용도로만 사용합니다. 이미 깃이 설치되어 있다면 이 과정은 건너뛰어주세요. 깃을 설치합니다.
[Todo 01] 터미널에 sudo apt-get update 명령을 입력해 패키지 정보를 최신으로 변경합니다.
$ sudo apt-get update
[Todo 02] apt-get install 명령으로 깃을 설치합니다.
$ sudo apt-get install git
[Todo 03] 잘 설치되었는지 깃 버전을 확인합니다.
$ git --version
git version 2.39.0
4. 비주얼 스튜디오 코드 설치
자바스크립트 기반에서 백엔드 개발을 할 때 VSCode는 현업에서 선호하는 통합 개발 환경(Integrated Development Environment, IDE)입니다. 이 책의 대상 독자가 HTML/CSS/자바스크립트를 익힌 백엔드 입문자이므로, 아직 익숙한 IDE가 없을 거라 가정해서 VSCode를 추천드리고 설치 및 간단한 사용법도 알려드립니다. 본문 내용이 VSCode에 의존적인 것은 아닙니다. 다른 IDE를 선호한다면 VSCode 설치를 하지 않아도 좋습니다.
4.1 윈도우
[Todo 01] 웹브라우저로 https://code.visualstudio.com에 접속 후 [Download for Windows] 버튼을 클릭해서 안내에 따라 설치 파일을 내려받습니다.
[Todo 02] ① 라이선스에 동의하고 ② [다음(N) >] 버튼을 클릭해 진행합니다.
[Todo 03] VSCode가 설치되는 위치는 다음과 같습니다. Users 아래 디렉터리는 사람마다 다르게 나옵니다. 특별히 수정할 것이 없으니 [다음(N) >] 버튼을 클릭해 다음으로 넘어가겠습니다.
[Todo 04] 특별히 수정할 것이 없으니 [다음(N) >] 버튼을 클릭해 다음으로 넘어가겠습니다.
[Todo 05] PATH에 추가를 하면 명령 프롬프트나 파워셸에서 code라는 명령어를 사용할 수 있습니다. code는 비주얼 스튜디오 코드를 실행하는 명령어입니다. 1 [PATH에 추가]를 선택하고 2 [다음(N)>] 버튼을 클릭해 다음으로 넘어가겠습니다.
[Todo 06] [설치(I)]를 눌러서 설치합니다.
[Todo 07] [종료(F)]를 눌러서 설치를 완료합니다!
4.2 맥OS
[Todo 01] https://code.visualstudio.com에 접속합니다.
[Todo 02] [Download Mac Universal] 버튼을 클릭해 압축 파일을 내려받습니다.
[Todo 03] 내려받은 압축 파일을 클릭해 압축을 풀어주세요.
[Todo 04] Visual Studio Code 실행 파일을 파인더의 [애플리케이션]으로 드래그 앤 드롭해 파일을 이동시키거나 복사 붙여넣기를 합니다.
4.3 리눅스
[Todo 01] 웹브라우저로 https://code.visualstudio.com에 접속합니다.
[Todo 02] .deb 파일을 클릭합니다. 레드햇 계열은 [.rpm]을 클릭하면 됩니다.
[Todo 03] 창이 뜨면 파일을 저장합니다.
[Todo 04] 내려받은 파일을 ① 더블클릭한 후→ ② [설치]버튼을 클릭해 설치를 진행합니다.
[Todo 05] 설치가 완료되면 검색창에 “visual studio code”를 입력해 설치가 잘되었는지 확인합니다.
이로써 환경 설치 방법 안내를 마칩니다.
