[유튜브 클론코딩] express로 서버 시작해보기

1. import express

import express from 'express';
// express 패키지 가져오기

const app = express();
// express application 만들기

node_modules에서 express 패키지를 가져오고 application을 생성했습니다.

 

앱이 작동하려면 사용자의 요청(Request)을 받아 그에 대한 응답(Response)을 보내야 합니다.

사용자가 뭔가를 요청할 때까지 앱을 기다리게 하기 위해서 listen() 함수를 사용합니다.

 

1.2 listen

app.listen();

listen() 함수는 listening 할 port 번호와 콜백함수를 받습니다.

 

port는 컴퓨터의 문이나 창문과 같은 것이며 수많은 port가 있는데 보통 높은 숫자의 port들은 비어있습니다.

이번 포스팅에서는 4000번을 사용할 것이며 port 번호는 같을 필요 없습니다.

 

콜백함수로는 간단하게 console.log()를 수행하는 함수를 작성해 보겠습니다.

app.listen(4000, () => console.log('Server listening on port 4000'));
// port 번호와 콜백함수

그럼 이제 브라우저의 주소창에 localhost:4000을 입력하면 서버에 접속할 수 있습니다.

localhost:4000 페이지

비록 오류가 돌아오긴 했지만, 서버에서 응답이 왔습니다.

 

서버가 꺼져있는 상태의 응답을 보고 싶다면 npm run을 입력했던 터미널에 윈도우 기준으로 Ctrl + C를 입력하면 서버가 꺼지게 되니, 다시 한번 localhost:4000에 접속해 보세요.

서버에 접속하지 못한 localhost:4000 페이지

지금까지의 코드를 다음과 같이 정리할 수 있습니다.

import express from "express";

const PORT = 4000;

const app = express();

app.listen(PORT, () => console.log(`Server listening on port http://localhost:${PORT}`));

---

2. Get

서버에 접속하긴 했지만 아직 서버는 아무것도 할 수 없는 상태입니다.

페이지에 뜬 오류 메시지에는 Cannot GET / 라고 적혀있습니다.

Cannot	GET	/
할 수 없음	HTTP method	페이지 주소

해석해 보자면 /(페이지)를 GET(가져올 수) 없다. 라고 해석할 수 있겠습니다.

HTTP와 GET과 같은 method에 대해 자세하게 알아보고 싶다면, HTTP와 method를 보고 오시는 걸 추천합니다.

 

그럼 이제 GET 요청(request)에 응답하는 코드를 작성해 봅시다.

2.1 GET()

express와 연관된 코드는 app이 만들어 진 다음에 작성해야 하며,

서버가 외부 접속을 listen 하기 전에 app 설정을 해주어야 하기 때문에 화살표를 그려놓은,

app 생성과 listen 사이에 app 설정 코드를 작성합니다.

 

위에서 떴던 오류는 브라우저가 /를 request 했는데 실패한 오류이기 때문에 GET을 할 수 있도록 해봅시다.

app.get();

listen 함수와 비슷하게 get 함수는 주소와 콜백함수를 받습니다.

 

간단하게 / 주소로 접속하면 console.log() 하도록 아래와 같이 작성해 봅시다.

app.get("/", () => console.log('Somebody is trying to go home.'));

 

수정한 코드가 성공적으로 저장되고 서버에 접속했다면 터미널에 아래와 같이 출력된 것을 볼 수 있습니다.

 

로그된 터미널

터미널에는 성공적으로 응답을 보였는데 브라우저를 보면 계속 로딩 중인 것을 볼 수 있습니다.

 

브라우저 로딩

이는 브라우저가 get request를 보내고 response를 기다리고 있지만 서버는 터미널에 console.log()만 하고 아무런 response를 해주지 않았기 때문에 계속 기다리기만 하고 있는 것입니다.

 

get함수를 사용하기 전과 다른 점은 서버에서 브라우저가 / 로 간다는 것을 알게 되었다는 것입니다.

 

아래는 코드 정리입니다.

import express from "express";

const PORT = 4000;

const app = express();

app.get("/", () => console.log('Somebody is trying to go home.'));

app.listen(PORT, () => console.log(`Server listening on port http://localhost:${PORT}`));

2.2 request, response

이제 request가 정상적으로 동작하고 있다는 것을 알게 되었으니, request와 response에 대해 알아봅시다.

get 함수의 인자인 콜백함수에는 request와 response 객체를 인자로 받을 수 있습니다.

app.get() 부분을 아래와 같이 수정하고 터미널에 출력되는 내용을 봐봅시다.

app.get("/", (req, res) => console.log(req, res));

매우 많은 것들이 출력되는 것을 볼 수 있을 것입니다, request와 response에 대한 정보는 express를 사용하고 있기 때문에 볼 수 있는 것이며 request와 response API 문서는 express API에서 볼 수 있습니다.

 

2.3 res.end(), res.send()

아직도 브라우저는 서버의 response를 기다리고 있을 테니 response 메서드 중에 간단한 두 가지를 사용해 봅시다.

app.get("/", (req, res) => {
    return res.end();
});

먼저, request를 종료하는 end 메서드입니다.

브라우저는 end 응답을 받자마자 로딩이 끝나며 response가 끝날 것입니다.

 

두 번째로, 메시지를 보낼 수 있는 send 메서드입니다.

이번에는 테스트로 URL을 / 이 아닌 /login으로 설정해 봅시다.

app.get("/login", (req, res) => {
    return res.send('Server responsed');
});

브라우저 주소창에 localhost:4000/login으로 입력하면 브라우저에 입력한 문자열이 뜨며 response가 끝날 것입니다.

 

아래는 코드 정리입니다.

import express from "express";

const PORT = 4000;

const app = express();


app.get("/", (req, res) => {
    return res.end();
});

app.get("/login", (req, res) => {
    return res.send('Server responsed');
});

app.listen(PORT, () => console.log(`Server listening on port http://localhost:${PORT}`));

3. Middlewares

middleware은 middle software라는 뜻이며 request와 response 사이에 존재합니다.

 

우리가 app.get()의 인자로 사용했던 콜백함수들이 middleware가 될 수 있으며

또한 그 콜백함수는 request, response 외에도 next라는 인자를 받습니다.

next는 다음 함수를 호출하는 역할을 합니다.

 

app.get("/", (req, res, next) => {
    return next();
});

콜백함수에 next 인자를 추가하고 next() 함수를 작성했습니다.

그럼 아까봤던 것과 같이 Cannot GET /가 뜨게 됩니다.

 

콜백함수에서 next()를 실행했는데 호출할 다음 함수가 없어서 접속 자체가 안 되는 현상이 나타난 겁니다.

 

이제 정상적인 middleware를 만들어 봅시다.

const gossipMiddleware = (req, res, next) => {
    console.log(`Someone is going to : ${req.url}`);
    next();
}

app.get("/", gossipMiddleware, (req, res) => {
    console.log("I'm in the controller");
    return res.end();
});

app.get 위에 middleware를 따로 만들었고, app.get의 인자로 추가했습니다.

 

next가 인자로 들어가고, next를 사용하고 있는 gossipMiddleware를 middleware라고 부르며 response를 보내는 익명 화살표 함수를 controller라고 부릅니다.

화살표 함수 말고 gossipMiddleware처럼 일반 함수로 작성해도 똑같습니다.

 

이제 서버에 접속해 보면

middleware에서 console.log()한 URL과

controller에서 console.log()한 문자열이 출력됩니다.

 

3.1 USE

app.use();

use()는 global middleware를 만들 수 있게 해 줍니다.

get()에서는 "/"와 같은 URL을 지정해서 사용했었지만

use()에서는 어느 URL에서도 작동하는 middleware를 만듭니다.

 

middleware이기 때문에

use가 먼저 오고 get이 후에 오는 게 중요합니다.

 

이전에 만들었던 gossipMiddleware를 get에서 use로 옮겨 보겠습니다.

const gossipMiddleware = (req, res, next) => {
    console.log(`Someone is going to : ${req.url}`);
    next();
}

app.use(gossipMiddleware);

app.get("/", (req, res) => {
    console.log("I'm in the controller");
    return res.end();
});

그러면 위에서 봤던 출력과 같은 결과가 나오게 됩니다.

 

get()만 사용했던 코드와 다른 점은 URL마다 middlware 지정을 하지 않아도 use() 덕분에 모든 URL에서 middleware가 작동하게 되었습니다.

 

아래는 배웠던 것을 활용하여 URL을 검사하고 URL에 따라 다른 출력을 내보내는 코드입니다.

import express from "express";

const PORT = 4000;

const app = express();

const logger = (req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next();
}
const privateMiddleware = (req, res, next) => {
    const url = req.url;
    if(url === '/protected'){
        return res.send("<h1>Not Allowed</h1>")
    }
    console.log("Allowed, you may continue.");
    next();
}

app.use(logger);
app.use(privateMiddleware);

app.get("/", (req, res) => {
    console.log("I'm in the controller");
    return res.end();
});

app.get("/protected", (req, res) => {
    return res.send("Welcome to the private lounge.");
});

app.listen(PORT, () => console.log(`Server listening on port http://localhost:${PORT}`));

3.2 morgan

morgan은 node.js 용 request logger middleware입니다.

 

아래 명령어를 입력해서 설치해 줍니다.

nodemon이 작동 중이라면 Ctrl + C를 누르고 난 다음 명령어를 입력해야 합니다.

npm i morgan

 

express를 사용했던 것처럼 mogan을 import 하고

import morgan from "morgan";

use()를 이용해서 morgan을 사용합니다.

app.use(morgan("dev"));

 

그럼 req.method와 URL, HTTP status가 함께 출력되는 로그를 볼 수 있습니다.

 

아래는 마지막 코드 정리 입니다.

import express from "express";
import morgan from "morgan";

const PORT = 4000;

const app = express();
const loggerMiddleware = morgan("dev");

app.use(loggerMiddleware);
app.get("/", (req, res) => {
    console.log("I'm in the controller");
    return res.end();
});

app.listen(PORT, () => console.log(`Server listening on port http://localhost:${PORT}`));