오늘 만들 것: 내 컴퓨터에서 응답하는 작은 서버
이번 장에서는 아주 작은 Express 서버를 만듭니다.
서버라고 해서 처음부터 회원가입, 결제, 데이터베이스를 다룰 필요는 없습니다. 오늘의 목표는 단 하나입니다.
브라우저가
http://localhost:3000으로 요청을 보내면, 내 컴퓨터가 짧은 문장을 응답하게 만들기
이 경험이 중요합니다. 이전 장에서 서버를 "요청을 기다렸다가 응답하는 프로그램"이라고 했습니다. 이제 그 설명을 직접 확인해 보겠습니다.
우리가 만들 서버는 작은 예약 접수 창구라고 생각하면 됩니다. 아직 실제 예약을 저장하지는 않습니다. 대신 손님이 첫 창구로 찾아오면 "예약 접수 서버가 켜졌습니다."라고 답합니다.
AI 생성 이미지
app.js 파일 만들기
먼저 어떤 파일을 만들지부터 정합니다.
만들고 있는 것: 가장 작은 Express 서버
열 파일:
express-practice폴더 안의app.js입력할 명령: 아직 없음. 먼저 파일을 만듭니다.
성공하면 보이는 것: VS Code 왼쪽 파일 목록에
app.js가 보입니다.
VS Code에서 지난 장에 만든 express-practice 폴더를 엽니다. 왼쪽 파일 목록에서 새 파일을 만들고 이름을 다음처럼 입력합니다.
app.jsapp은 애플리케이션, 즉 우리가 만들 서버 프로그램을 뜻한다고 보면 됩니다. .js는 JavaScript 파일이라는 표시입니다.
이제 이 파일 안에 서버 코드를 한 줄씩 쌓아 보겠습니다.
Express 불러오기
먼저 Express를 코드 안으로 가져옵니다.
app.js에 다음 한 줄을 입력합니다.
const express = require('express');이 줄은 "설치해 둔 Express 도구를 이 파일에서 쓰겠다"는 뜻입니다.
비유하자면 주방에서 요리를 시작하기 전에 필요한 조리 도구를 꺼내는 단계입니다. Express는 요청을 받고 응답을 보내는 일을 편하게 해 주는 도구입니다.
여기서 require('express')는 express라는 패키지를 불러옵니다. 지난 장에서 npm install express를 실행했다면 이 줄을 사용할 수 있습니다.
만약 Express를 설치하지 않았다면 이 줄에서 오류가 납니다. 오류가 난다고 해서 학습이 실패한 것은 아닙니다. 서버를 처음 켤 때는 대부분 이런 작은 확인 과정을 거칩니다.
서버 앱 만들기
다음 줄을 추가합니다.
const app = express();현재 app.js는 이렇게 되어 있어야 합니다.
const express = require('express');
const app = express();첫 줄에서 Express 도구를 꺼냈다면, 두 번째 줄은 그 도구로 실제 서버 앱을 하나 만든 것입니다.
app은 앞으로 우리가 계속 명령을 붙일 대상입니다.
예를 들면 이런 식입니다.
이 주소로 오면 이런 답을 해라.
이 파일들을 보여 줘라.
서버를 몇 번 문으로 열어라.
아직 서버는 켜지지 않았습니다. 지금은 서버 프로그램의 재료를 준비한 상태입니다.
첫 주소 만들기
이제 브라우저가 어떤 주소로 왔을 때 무엇을 응답할지 정합니다.
다음 코드를 추가합니다.
app.get('/', (req, res) => {
res.send('예약 접수 서버가 켜졌습니다.');
});지금까지의 전체 코드는 이렇게 됩니다.
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('예약 접수 서버가 켜졌습니다.');
});한 줄씩 보겠습니다.
app.get('/', ...)이 부분은 "누군가 / 주소로 GET 요청을 보내면"이라는 뜻입니다.
GET은 서버에게 무언가를 보여 달라고 요청할 때 자주 쓰는 방식입니다. 지금은 어렵게 외울 필요가 없습니다. 브라우저 주소창에 주소를 입력해서 들어가는 행동은 보통 GET 요청이라고 이해하면 충분합니다.
'/'는 가장 기본 주소입니다. 예를 들어 http://localhost:3000으로 들어오면 그 안의 기본 경로가 /입니다.
다음 부분을 보겠습니다.
(req, res) => {
res.send('예약 접수 서버가 켜졌습니다.');
}여기서 req는 request, 즉 요청입니다. 손님이 가져온 주문서라고 생각하면 됩니다.
res는 response, 즉 응답입니다. 주방에서 손님에게 돌려주는 결과입니다.
지금은 요청 내용을 자세히 읽지 않습니다. 대신 어떤 요청이 오면 바로 이 문장을 응답합니다.
res.send('예약 접수 서버가 켜졌습니다.');send는 말 그대로 "보내기"입니다. 이 문장이 브라우저 화면에 나타납니다.
서버의 문 열기: listen
아직 한 가지가 남았습니다. 서버 프로그램에게 "요청을 기다리기 시작해"라고 말해야 합니다.
아래 코드를 맨 아래에 추가합니다.
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});이제 app.js 전체는 다음과 같습니다.
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('예약 접수 서버가 켜졌습니다.');
});
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});여기서 핵심은 3000입니다.
컴퓨터 안에는 여러 프로그램이 동시에 인터넷 관련 일을 할 수 있습니다. 그래서 "내 컴퓨터로 와라"라고만 말하면 부족합니다. 어느 문으로 들어올지도 정해야 합니다.
localhost: 내 컴퓨터를 가리키는 이름3000: 내 컴퓨터 안에서 이 서버가 열어 둔 문 번호
따라서 http://localhost:3000은 이렇게 읽을 수 있습니다.
내 컴퓨터 안에 있는 3000번 문으로 들어가겠다.
포트 번호는 문 번호처럼 이해하면 됩니다. 실제 용어로는 포트라고 부릅니다.
터미널에서 서버 실행하기
이제 서버를 켜겠습니다.
만들고 있는 것:
app.js에 작성한 Express 서버 실행열 파일:
app.js를 저장한 뒤, VS Code 터미널 열기입력할 명령:
node app.js성공하면 보이는 것: 터미널에 서버 실행 메시지가 보이고, 브라우저에서 문장이 나타남
먼저 app.js를 저장합니다.
VS Code에서 터미널을 엽니다.
상단 메뉴에서 다음을 선택해도 됩니다.
Terminal > New Terminal터미널 위치가 express-practice 폴더인지 확인합니다. 지난 장에서 배운 것처럼 아래 명령을 사용할 수 있습니다.
pwdWindows PowerShell에서는 현재 위치가 이미 표시되는 경우도 많습니다. 중요한 것은 현재 위치가 express-practice 폴더여야 한다는 점입니다.
이제 다음 명령을 입력합니다.
node app.js성공하면 터미널에 이런 문장이 보입니다.
서버가 http://localhost:3000 에서 실행 중입니다.이 메시지가 보이면 서버가 켜진 것입니다.
여기서 주의할 점이 있습니다. 서버가 켜져 있는 동안 터미널은 다음 명령을 바로 입력받지 않는 것처럼 보일 수 있습니다. 멈춘 것이 아닙니다. 서버가 요청을 기다리는 중입니다.
브라우저에서 확인하기
이제 Chrome, Edge, Safari 같은 브라우저를 엽니다.
주소창에 다음 주소를 입력합니다.
http://localhost:3000성공하면 브라우저 화면에 다음 문장이 보입니다.
예약 접수 서버가 켜졌습니다.이 장의 가장 중요한 순간입니다.
브라우저가 요청을 보냈고, 내 컴퓨터에서 실행 중인 Express 서버가 응답했습니다. 지금은 짧은 문장 하나지만, 같은 방식으로 나중에는 HTML 페이지, 문의 접수 결과, 상품 목록 JSON도 보낼 수 있습니다.
서버 개발의 큰 흐름은 이 작은 성공 위에 계속 쌓입니다.
서버 끄기: Ctrl + C
서버를 끄려면 브라우저가 아니라 터미널로 돌아갑니다.
서버가 실행 중인 터미널에서 다음 키를 누릅니다.
Ctrl + CmacOS에서도 보통 Control + C를 사용합니다. Command + C가 아닙니다.
누르면 터미널이 다시 명령을 입력할 수 있는 상태로 돌아옵니다. 이것은 서버가 꺼졌다는 뜻입니다.
서버를 끈 뒤 브라우저에서 http://localhost:3000을 새로고침하면 연결할 수 없다는 메시지가 나올 수 있습니다. 자연스러운 결과입니다. 3000번 문을 열고 있던 서버가 종료되었기 때문입니다.
코드를 바꾸면 다시 실행해야 하는 이유
이제 응답 문장을 바꿔 보겠습니다.
app.js에서 다음 줄을 찾습니다.
res.send('예약 접수 서버가 켜졌습니다.');문장을 다음처럼 바꿉니다.
res.send('첫 Express 서버 수정 성공!');파일을 저장합니다.
그런데 브라우저를 새로고침해도 문장은 바로 바뀌지 않습니다. 이유는 간단합니다.
node app.js로 서버를 실행하면 Node.js는 그 순간의 파일 내용을 읽고 서버를 켭니다. 실행 중에 파일을 고쳐도, 기본 상태에서는 서버가 자동으로 새 파일 내용을 다시 읽지 않습니다.
그래서 코드를 바꾼 뒤에는 다음 순서로 다시 실행합니다.
파일을 저장합니다.
터미널에서
Ctrl + C로 서버를 끕니다.다시 실행합니다.
node app.js브라우저를 새로고침합니다.
성공하면 바뀐 문장이 보입니다.
나중에는 파일 변경을 감지해 자동으로 서버를 다시 켜 주는 도구도 사용할 수 있습니다. 하지만 처음에는 직접 끄고 다시 켜는 흐름을 익히는 편이 좋습니다. 서버가 언제 켜져 있고, 언제 꺼져 있는지 몸으로 이해할 수 있기 때문입니다.
첫 서버에서 자주 만나는 오류
첫 서버 실행에서는 오류를 만나는 일이 흔합니다. 오류 메시지는 혼내는 문장이 아니라, 어디를 확인해야 하는지 알려 주는 안내문에 가깝습니다.
Cannot find module 'express'
터미널에 이런 메시지가 보일 수 있습니다.
Cannot find module 'express'뜻은 "Express를 찾을 수 없다"입니다.
주로 다음 두 가지를 확인하면 됩니다.
첫째, 현재 터미널 위치가 express-practice 폴더인지 확인합니다.
pwd둘째, Express를 설치했는지 확인합니다.
npm install express설치가 끝난 뒤 다시 실행합니다.
node app.jsCannot find module '/.../app.js'
이 오류는 app.js 파일을 찾지 못했다는 뜻입니다.
확인할 것은 세 가지입니다.
파일 이름이 정확히
app.js인가?터미널 위치가
app.js가 있는 폴더인가?node app.js에서 철자를 다르게 입력하지 않았는가?
현재 폴더의 파일 목록을 보려면 다음 명령을 사용할 수 있습니다.
lsWindows PowerShell에서도 ls를 사용할 수 있습니다. 목록에 app.js가 보이면 위치는 맞습니다.
EADDRINUSE 또는 address already in use
이 오류는 3000번 문을 이미 다른 프로그램이 사용 중이라는 뜻입니다.
예를 들어 방금 실행한 서버가 아직 켜져 있는데 다른 터미널에서 또 node app.js를 실행하면 이런 일이 생길 수 있습니다.
먼저 기존 서버가 실행 중인 터미널을 찾아 Ctrl + C를 누릅니다. 그다음 다시 실행합니다.
node app.js그래도 해결되지 않으면 포트 번호를 잠시 바꿔도 됩니다.
app.listen(3001, () => {
console.log('서버가 http://localhost:3001 에서 실행 중입니다.');
});이 경우 브라우저 주소도 함께 바꿔야 합니다.
http://localhost:3001포트 번호를 코드에서만 바꾸고 브라우저 주소를 그대로 두면 연결되지 않습니다. 문 번호를 바꾸었으면 찾아가는 문도 바꿔야 합니다.
SyntaxError
SyntaxError는 JavaScript 문법 어딘가가 맞지 않는다는 뜻입니다.
자주 생기는 원인은 다음과 같습니다.
따옴표를 열고 닫지 않음
괄호
(,),{,}중 하나가 빠짐콤마나 점 같은 문장부호를 잘못 입력함
express를expres처럼 잘못 입력함
오류 메시지에는 보통 줄 번호가 함께 나옵니다. 예를 들어 app.js:4라고 나오면 app.js의 4번째 줄 근처를 확인하면 됩니다. 꼭 그 줄 하나만 문제라는 뜻은 아니지만, 확인을 시작하기 좋은 위치입니다.
이번 장에서 얻은 감각
이번 장에서 만든 코드는 짧습니다. 하지만 서버의 핵심 흐름은 모두 들어 있습니다.
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('예약 접수 서버가 켜졌습니다.');
});
app.listen(3000, () => {
console.log('서버가 http://localhost:3000 에서 실행 중입니다.');
});이 코드는 네 가지 일을 합니다.
Express를 불러옵니다.
서버 앱을 만듭니다.
/주소로 온 요청에 응답합니다.3000번 포트에서 요청을 기다립니다.
이제 "내 컴퓨터가 웹 요청에 응답한다"는 감각을 얻었습니다.
다음 장에서는 이 요청과 응답을 조금 더 자세히 읽어 봅니다. 브라우저가 무엇을 보내고, 서버가 무엇을 돌려주는지 알면 Express 코드가 더 이상 낯선 주문처럼 보이지 않습니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.