간단한 Express Server 만들기

NO PAIN, NO GAIN·2019년 9월 24일

express

express를 이용해서 Server를 만들어 보겠습니다.

실행환경

vscode
vscode에서 실행한 터미널
( vscode에서 터미널을 띄울려면 맥은 "control + ₩ (숫자1 왼쪽버튼)" )

사전준비

myapp 폴더 생성
myapp 폴더 안에 index.js 생성
npm init -y

사전준비를 마친 폴더 구조

express 설치

npm install express

index.js

const express = require('express');
const app = express();

const PORT = 3000;

app.listen(PORT);

서버켜기

node index.js

터미널에서 node index.js를 하면 실행은 되지만 아무것도 나오질 않아서 됐나, 안됐나 헷갈릴 수 있습니다. app.listen 위에 함수를 추가해보도록 합시다.

// index.js
// (생략)...

function handleListen() {
	console.log("Listen on 3000 port")
}

app.listen(PORT, handleListen);

app.listen에 handleListen을 추가했습니다. app.listen이 동작하면,

" 3000 port에 접속하면, handleListen을 실행하십시오. "

가 되겠습니다.

서버를 닫고 다시 켜야합니다. 서버를 닫을 때는 control + c 를 눌러주세요.
터미널에서 control + c 를 누르게 되면 지금 실행하고 있는 것을 취소하겠다는 명령입니다.

위에 그림을 보면 Listen on 3000 prot가 찍힌걸 확인할 수 있습니다.
와~ 서버 하나를 만들었습니다.

이렇게 하면 재미없으니깐 브라우저에서 글자 하나를 띄워보겠습니다.

브라우저에 글자 띄우기

브라우저에서 localhost:3000으로 만든 서버로 접속해 보겠습니다. 접속을 하게 되면 "cannot GET /"이라고 뜰 겁니다. 이게 뜨는 이유는 "/" 로 접속을 했는데 "GET" 한 정보가 없어서 뜨는 에러입니다. localhost:3000/profile 로 접속하면 또한 받을 수 있는 정보가 없기 때문에 "cannot GET /profile" error 메세지가 띄게 됩니다.

서버에 요청을 보낼 때 사용하는 메소드는 GET과 POST가 있습니다. 간단하게 말하면 GET은 정보를 받아올 때 사용하는 것이고, POST는 정보를 전달, 생성, 수정, 삭제 할 때 사용합니다. 구글에 접속한다고 했을 때, 나오는 화면은 구글 서버에 GET요청을 한겁니다. "구글 URL 주소로 접속하면 이런이런 정보를 사용자에게 줘라" 라고 할 수 있습니다. 로그인은 POST요청입니다. 내 아이디와 비밀번호를 입력하면 그 내용이 구글 서버로 가게되고, 서버에서는 사용자의 정보가 서버에 있는 정보와 일치여부에 따라 로그인을 하게 하는 응답이나, 아니면 틀린정보에 대한 error 메세지를 응답으로 보내 줍니다.

지금은 간단한 서버를 만드는 것이니, GET에 대한 내용을 다루겠습니다.

우선 error 메세지가 발생하지 않도록 하겠습니다.

// index.js
const express = require('express');
const app = express();

const PORT = 3000;

function handleListen () {
  console.log("Listen on 3000 port");
}

function handleHome (req, res) {
  console.log('Home');
}

app.get('/', handleHome)

app.listen(PORT, handleListen);

서버를 다시 켜고 localhost:3000에 접속하게 되면 vscode에서 띄운 터미널에서는 "home" 문구가 나오는데 브라우저 화면은 변화가 없습니다. 하지만 상단에 탭을 보게되면 loading이 계속 되고 있습니다.

그 이유는 "localhost:3000"에 접속(요청)을 하면 응답을 해줘야하는데 서버에서는 어떠한 응답도 해주지 않고 있습니다. loading이 계속되는 이유입니다.

응답을 줘서 loading을 멈춰보겠습니다.

// index.js
// ...(생략)
function handleHome (req, res) {
  console.log('Terminal Home');
  res.send('Browser Home');
}

app.get('/', handleHome)

app.listen(PORT, handleListen);