내 컴퓨터에 서버 작업실 만들기

서버를 만들기 전에 작업실부터 준비하기

지난 장에서 서버는 "요청을 기다렸다가 응답을 돌려주는 프로그램"이라고 설명했습니다. 이제 그 프로그램을 내 컴퓨터에서 직접 만들어 볼 차례입니다.

서버를 만들려면 작업실이 필요합니다. 요리로 비유하면 다음과 같습니다.

• Node.js: JavaScript로 서버 요리를 할 수 있게 해 주는 주방

• npm: 필요한 조리 도구를 가져오는 도구 상자

• VS Code: 코드를 쓰는 작업대

• 터미널: 컴퓨터에 글자로 명령을 내리는 창

• 프로젝트 폴더: 이번 서버에 필요한 파일을 모아 두는 서랍

Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있게 해 주는 실행 환경입니다. 공식 설명에서도 Node.js는 서버, 웹 앱, 명령줄 도구 등을 만들 수 있는 JavaScript 실행 환경이라고 소개합니다.¹ Express는 이 Node.js 위에서 서버를 더 편하게 만들도록 도와주는 도구입니다.

이번 장의 목표는 서버 코드를 많이 쓰는 것이 아닙니다. 이후 장에서 예제를 그대로 따라 할 수 있도록, 내 컴퓨터에 기본 작업실을 만드는 것이 목표입니다.

AI 생성 이미지

Node.js LTS 버전 설치하기

먼저 Node.js를 설치합니다.

브라우저에서 다음 주소로 이동합니다.

https://nodejs.org

Node.js 다운로드 화면에는 보통 여러 버전이 보입니다. 여기서는 LTS 버전을 선택합니다. LTS는 "Long Term Support"의 줄임말입니다. 비유하자면 새로 나온 실험용 도구보다, 오래 안정적으로 관리되는 기본 도구에 가깝습니다.

설치 파일을 내려받은 뒤 실행합니다.

• Windows라면 .msi 설치 파일을 실행합니다.

• macOS라면 .pkg 설치 파일을 실행합니다.

설치 과정에서 특별히 바꿔야 할 설정은 없습니다. 계속 진행해 설치를 마칩니다.

Node.js를 설치하면 보통 npm도 함께 설치됩니다. npm은 Node.js 프로젝트에서 필요한 도구를 내려받고 관리하는 프로그램입니다.² 나중에 Express도 npm으로 설치합니다.

설치가 잘 되었는지 확인하기

설치가 끝났다면 터미널을 열어 확인합니다. 터미널은 컴퓨터에 명령을 글자로 입력하는 창입니다. 처음 보면 낯설 수 있지만, 지금은 두 가지 명령만 입력하면 됩니다.

Windows에서는 다음 중 하나를 엽니다.

• 시작 메뉴에서 PowerShell 검색

• 또는 명령 프롬프트 검색

macOS에서는 다음을 엽니다.

• Spotlight 검색에서 Terminal 또는 터미널 검색

터미널이 열리면 아래 명령을 입력하고 Enter를 누릅니다.

node -v

성공하면 다음과 비슷한 버전 번호가 보입니다.

v22.17.0

숫자는 컴퓨터마다 다를 수 있습니다. 중요한 것은 v로 시작하는 버전 번호가 나온다는 점입니다.

이어서 npm도 확인합니다.

npm -v

성공하면 다음과 비슷하게 숫자가 보입니다.

10.9.2

여기서도 숫자가 정확히 같을 필요는 없습니다. 버전 번호가 보이면 정상입니다.

만약 node 명령을 찾을 수 없다는 메시지가 나온다면, 설치 직후에 열어 둔 터미널이 예전 상태를 기억하고 있을 수 있습니다. 터미널을 완전히 닫고 다시 열어 같은 명령을 입력해 보세요. 그래도 안 되면 Node.js 설치가 끝까지 되었는지 다시 확인합니다.

VS Code 설치하고 프로젝트 폴더 열기

이제 코드를 쓸 편집기를 준비합니다. 이 책에서는 Visual Studio Code, 줄여서 VS Code를 사용합니다.

브라우저에서 다음 주소로 이동합니다.

https://code.visualstudio.com

운영체제에 맞는 설치 파일을 내려받아 설치합니다.

VS Code는 단순한 메모장이 아닙니다. 코드 파일을 보기 좋게 색칠해 주고, 폴더 안의 파일을 한눈에 보여 주며, 터미널도 안에서 함께 열 수 있습니다. 그래서 서버 작업을 할 때 한 화면에서 대부분의 일을 처리할 수 있습니다.

이제 첫 프로젝트 폴더를 만들겠습니다. 폴더 이름은 띄어쓰기와 한글을 피해서 짓는 편이 좋습니다. 오류를 줄이기 위해 이 책에서는 다음 이름을 사용합니다.

express-practice

원하는 위치에 폴더를 만들어도 되지만, 처음에는 찾기 쉬운 바탕화면이나 문서 폴더를 추천합니다.

VS Code를 열고 다음 순서로 진행합니다.

1. 상단 메뉴에서 File을 누릅니다.

2. Open Folder...를 선택합니다.

3. 방금 만든 express-practice 폴더를 선택합니다.

4. VS Code가 "이 폴더를 신뢰하겠습니까?"라고 물으면, 본인이 만든 폴더이므로 신뢰를 선택합니다.

성공하면 VS Code 왼쪽 탐색기 영역에 express-practice 폴더 이름이 보입니다.

VS Code 안에서 터미널 열기

앞으로 명령은 가능하면 VS Code 안의 터미널에서 입력하겠습니다. 그래야 "내가 어느 폴더에서 명령을 실행하고 있는지" 확인하기 쉽습니다.

VS Code에서 터미널을 여는 방법은 다음과 같습니다.

1. 상단 메뉴에서 Terminal을 누릅니다.

2. New Terminal을 선택합니다.

화면 아래쪽에 터미널 창이 열립니다.

터미널 왼쪽이나 윗부분에 현재 폴더 경로가 표시됩니다. 끝부분이 express-practice라면 지금 명령을 입력할 위치가 맞습니다.

확인하려면 다음 명령을 입력합니다.

pwd

Windows PowerShell과 macOS 터미널 모두에서 현재 위치를 보여 줍니다. 결과의 마지막 부분에 express-practice가 들어 있으면 됩니다.

만약 다른 폴더에 있다면 cd 명령으로 이동할 수 있습니다. cd는 "change directory", 즉 폴더를 바꾸라는 뜻입니다.

예를 들어 바탕화면에 express-practice 폴더를 만들었다면 macOS에서는 보통 다음처럼 이동할 수 있습니다.

cd ~/Desktop/express-practice

Windows PowerShell에서는 바탕화면 위치가 보통 다음과 비슷합니다.

cd ~/Desktop/express-practice

컴퓨터 설정에 따라 바탕화면이 OneDrive 안에 있을 수도 있습니다. 이때 경로가 다르게 보이는 것은 이상한 일이 아닙니다. VS Code에서 폴더를 제대로 열었다면, 내장 터미널은 대체로 그 폴더에서 시작하므로 별도 이동이 필요하지 않습니다.

package.json 만들기

이제 이 폴더를 Node.js 프로젝트로 등록하겠습니다.

무엇을 만들고 있나요?
앞으로 Express 서버 파일을 담을 프로젝트 상자를 만들고 있습니다.

어떤 파일을 열어야 하나요?
아직 직접 열 파일은 없습니다. VS Code 아래쪽 터미널에서 명령을 입력합니다.

어떤 명령을 입력하나요?

npm init -y

성공하면 왼쪽 파일 목록에 package.json 파일이 생깁니다.

package.json은 프로젝트의 설명서입니다. 사람에게 보여 주는 긴 문서라기보다, npm과 Node.js가 읽는 짧은 정보 카드에 가깝습니다. 예를 들어 이 프로젝트의 이름, 버전, 실행 명령, 설치한 도구 목록이 이 파일에 기록됩니다.

npm init은 원래 프로젝트 이름이나 버전을 하나씩 물어봅니다. 뒤에 붙인 -y는 기본값으로 빠르게 만들겠다는 뜻입니다. 지금은 학습용 프로젝트이므로 기본값으로 충분합니다.

package.json을 열어 보면 대략 이런 내용이 보입니다.

{
  "name": "express-practice",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

지금 모든 줄을 이해할 필요는 없습니다. 중요한 것은 이 파일이 "이 폴더는 Node.js 프로젝트입니다"라고 알려 주는 표식이라는 점입니다.

Express 설치하기

이제 서버를 쉽게 만들게 해 주는 Express를 설치합니다. Express 공식 문서에서도 새 애플리케이션 폴더를 만들고, npm init으로 package.json을 만든 뒤, npm install express로 Express를 설치하는 흐름을 안내합니다.³

무엇을 만들고 있나요?
요청을 받고 응답을 돌려주는 서버를 만들기 위한 Express 도구를 프로젝트에 추가하고 있습니다.

어떤 파일을 열어야 하나요?
파일을 직접 수정하지 않습니다. VS Code 터미널에서 명령을 입력합니다.

어떤 명령을 입력하나요?

npm install express

잠시 기다리면 여러 줄의 메시지가 지나갑니다. 성공하면 왼쪽 파일 목록에 새 항목들이 생깁니다.

대표적으로 다음 세 가지를 볼 수 있습니다.

node_modules
package-lock.json
package.json

하나씩 의미를 살펴보겠습니다.

node_modules는 설치된 도구들이 실제로 들어 있는 큰 보관함입니다. Express 하나만 설치한 것처럼 보여도, Express가 내부적으로 사용하는 작은 도구들이 함께 들어옵니다. 그래서 폴더 안이 생각보다 복잡해 보일 수 있습니다. 정상입니다.

package-lock.json은 설치된 도구들의 정확한 버전을 기록하는 파일입니다. 같은 프로젝트를 다른 컴퓨터에서 다시 설치할 때 비슷한 환경을 만들도록 돕습니다.

package.json도 다시 확인해 보세요. 아래와 비슷한 부분이 추가되어 있을 것입니다.

"dependencies": {
  "express": "^5.1.0"
}

여기서 dependencies는 "이 프로젝트가 실행되기 위해 의존하는 도구 목록"입니다. 의존한다는 말이 어렵다면, "이 프로젝트가 필요로 하는 준비물 목록"이라고 생각하면 됩니다. Express 서버를 만들려면 Express가 필요하므로 이 목록에 기록됩니다.

버전 숫자는 설치 시점에 따라 다를 수 있습니다. 숫자가 예시와 달라도 express가 들어 있으면 괜찮습니다.

터미널 기본 조작 익히기

앞으로 자주 쓰게 될 터미널 조작을 정리해 두겠습니다. 외울 필요는 없습니다. 필요할 때 이 표를 다시 보면 됩니다.

Windows PowerShell에서도 위 명령 대부분을 사용할 수 있습니다. 명령 프롬프트를 쓰는 경우 파일 목록을 볼 때 ls 대신 dir을 사용해야 할 수 있습니다.

여기서 가장 중요한 명령은 cd와 Ctrl + C입니다.

cd는 작업 위치를 바꿉니다. 터미널은 "지금 어느 폴더에 있는지"에 따라 명령 결과가 달라집니다. 예를 들어 npm install express를 엉뚱한 폴더에서 실행하면, 그 폴더에 Express가 설치됩니다. 그래서 명령을 입력하기 전에는 현재 위치가 프로젝트 폴더인지 확인하는 습관이 도움이 됩니다.

Ctrl + C는 실행 중인 명령을 멈춥니다. 나중에 서버를 켜면 터미널이 계속 실행 중인 상태로 보일 것입니다. 그때 서버를 끄고 싶으면 터미널에서 Ctrl + C를 누릅니다. macOS에서도 이때는 Command 키가 아니라 Control 키를 사용합니다.

지금 상태 점검하기

이번 장을 마쳤다면 express-practice 폴더 안에 다음 항목이 있어야 합니다.

express-practice
├─ node_modules
├─ package-lock.json
└─ package.json

그리고 터미널에서 다음 명령이 작동해야 합니다.

node -v
npm -v

두 명령 모두 버전 번호를 보여 주면 서버 작업실 준비가 끝난 것입니다.

아직 서버를 켜지는 않았습니다. 지금까지 한 일은 주방을 만들고, 조리 도구를 가져오고, 조리대 위에 프로젝트 설명서를 올려 둔 단계입니다.

다음 장에서는 이 작업실 안에서 Express 서버 파일을 만들고, 브라우저로 직접 접속해 첫 응답을 확인합니다. 오류가 나더라도 괜찮습니다. 서버 개발은 작은 확인을 반복하면서 앞으로 나아가는 작업입니다.

참고

¹Node.js 공식 소개

²MDN Node 개발 환경 설정

³Express 공식 설치 문서