[JavaScript, Node.js] 유튜브 클론 정리 3장 (1) - 서버 생성, GET Requests, Responses

머리글

이제 본격적으로 서버를 만들어보도록 하겠다.

서버 생성하기

우선 메인이 될 js 파일에 express를 import 한다.

import express from "express";

이렇게 하면 알아서 모듈을 express라는 이름으로 가져온다.
그리고 app을 생성해 준다.

const app = express();

const PORT = 4000;

const app = express();

const handleListening = () =>
  console.log(`✅ Server listenting on port http://localhost:${PORT} 🚀`);

app.listen(PORT, handleListening);

우선 서버에 대해서 이해를 해보자.
서버는 항상 켜져 있는 컴퓨터와 비슷한 개념이다.
그리고 인터넷으로 연결되어 있다.
서버는 request를 listening 하고 있다.

예를 들어 우리가 naver.com에 접속을 하려고 URL을 입력했다면,
이 과정이 request라는 것이다.

이 요청을 받은 서버는 무언가 정해진 동작을 하게 된다.

위의 경우 4000번 포트를 통해 접속을 하게 되면,
handleListening라는 callback 함수를 수행하게 된다.
그리고 접속을 하게 되면 콘솔에 서버에 연결되었다는 로그를 띄워준다.

그리고 우리가 위의 주소에 접속을 하게 되면 다음과 같은 화면을 마주친다.

GET?

GET는 HTTP의 메서드 중에 하나다.
HTTP란 사람과 서버, 서버와 서버 간의 소통 방법이다.

GET의 경우 무언가를 요청하는 메서드다.
지금의 경우 "/"라는 주소를 요청하고 있다.
이는 우리가 접속을 하면 브라우저에서 자동으로 이루어진다.

즉, 브라우저로 어디로 이동하는 개념이 아닌,
사이트가 나에게 오게 만드는 개념이다.

GET이라는 request를 서버의 root("/")로 보내고 있는 상황이다.
그렇다면 서버는 어떻게 반응(response)을 해줘야 할까?
지금 당장은 정해놓은 response가 없으므로 반응을 하지 않는다.

app.get("/", () => console.log("Hi!");

app 함수를 정의해 놓은 바로 밑 줄에 다음과 같이 적어보자.
이 함수는 누군가 "/"의 주소로 get 요청을 보낸다면, callback 함수를 실행한다는 의미이다.
위의 경우 callback 함수는 console.log("Hi")가 되며 누군가 root에 get 요청을 보내면 콘솔에 'Hi!'라는 문장을 출력한다.

다시 루트 주소로 접속해 보면, 로딩이 무한정 진행된다.
그런데 아까와 달리 cannot GET / 과 같은 에러는 뜨지 않는다.
VS Code의 터미널을 확인하면 'Hi!'가 떠있다.

요청을 처리까진 했는데, 아직 응답은 하지 않았다.
그렇다면 어떻게 응답해야 할까?

Response

우선 위의 get 함수를 조금 변경해 주자.

const handleHome = (req, res) => {
	return res.end();
};

app.get("/", handleHome);

크게 차이점은 없지만 콜백함수를 따로 빼서 하나의 함수로 만들었고, 인수로 (req, res)가 생겼다.
req는 request, res는 response의 약자로 다른 이름으로 써도 무방하지만 보통은 위와 같이 사용한다.
이 두 인수는 express로부터 받은 것이다.

res.end()의 경우 response를 끝낸다는 의미다.
이렇게 하고 접속해 보면, 무한 로딩이 종료된다.
그럼 조금 바꿔서 다음과 같이 입력해 보자.

res.send("HI!")

이제 다시 사이트에 접속해 보면 HI!라고 표시가 되어있다.
이런 식으로 응답에 대한 콜백을 정할 수 있다.

html을 보내는 방법도 있다.

res.send("<h1>Hi</h1>");

res의 응답에는 더 많은 기능이 있으니 공식 문서를 통해 확인해 보자.
https://expressjs.com/

Express - Node.js web application framework

마무리

이번 시간에는 서버를 생성해 보고, GET 요청이 무엇인지 알아보고, Request와 Response에 대해서 알아봤다.

다음 시간에는 Middleware에 대해서 알아보도록 하겠다.