[TIL] 211120

Lee Syong·2021년 11월 20일

TIL node.js

TIL

목록 보기

94/204

📝 오늘 한 것

express - 서버 만들기 / GET requests / Responses

📚 배운 것

Express - API Reference를 참고할 수 있다

1. 서버 만들기

1) src 폴더 생성

서버를 만들기 전에 복잡해질 것을 대비해 정리하는 단계이다.
src 폴더를 만들어 index.js 파일을 그 안으로 옮긴다. VS code의 내장 터미널에서 npm run dev가 실행 중인 상태라면, index.js 파일을 찾을 수 없다는 에러가 뜰 것이다.
package.json 파일의 dev script에서 index.js를 src/server.js로 수정한다
npm run dev를 입력해 정상작동 되는지 확인한다
내 경우, 처음에는 아래와 같은 에러가 발생했다

[nodemon] app crashed - waiting for file changes before starting...

새로운 터미널을 만들어 다시 시도해보니 정상작동 했다

2) express application

서버를 만들어보자

import express from "express";

const app = express();

node_modules 폴더에 설치된 express를 찾아 이를 express라는 이름으로 import 한다

받아온 express 패키지를 사용하기 위해 express() 함수를 이용해 express application을 만든다

3) app.listen(포트 번호, 콜백 함수)

서버란 쉽게 말하면 24시간 내내 온라인에 연결된 컴퓨터를 말한다.
서버는 서버와 상호작용이 필요한 모든 request를 listen 한다.
이는 아래와 같이 나타낼 수 있다.

const handleListening = () => console.log("Server listening on port 4000 🎈");

app.listen(4000, handleListening)

listen()의 인자로 listening 할 port와 콜백 함수를 넣는다.
port는 컴퓨터의 문이나 창문과 같은 것으로 컴퓨터의 수많은 port 중 서버가 listening 할 port를 적어줘야 한다. (보통 높은 숫자의 port는 열려 있다.)
콜백 함수는 서버가 시작할 때 실행될 함수이다.

위 코드를 추가한 후 저장하면, 터미널에는 자동으로 console.log 값이 찍히게 된다.
서버를 만든 것이다!

4) 서버에 가는 방법

(1) localhost:포트 번호

보통은 서버를 시작했다면 localhost를 통해서 갈 수 있다.
브라우저 주소 창에 localhost:포트 번호를 입력한다.
이 경우에는 localhost:4000을 입력하면 페이지가 뜬다.

현재는 브라우저 탭 제목에 error라고 뜨면서 페이지에는 아래와 같은 문구가 뜨게 된다.

Cannot GET /

이는 서버가 할 수 있는 일은 없지만 어쨌든 서버는 열려 있음을 뜻한다.

(2) 서버 종료하기

위와 비교하기 위해 서버를 종료해볼 수 있다.
nodemon과 서버를 종료하기 위해서는 ctrl + C를 누른다.
그 후, 위 페이지에 가서 새로고침을 누르면 아래와 같은 메시지가 뜬다.

사이트에 연결할 수 없음
localhost에서 연결을 거부했습니다.

즉, 서버가 닫힌 것이다.
다시 npm run dev를 입력하면 서버가 열리게 된다.

5) 수정 & 최종

import express from "express";

const PORT = 4000; // 추가

const app = express();

const handleListening = () =>
  console.log(`Server listening on port http://localhost:${PORT} 🎈`); // 수정

app.listen(PORT, handleListening); // 수정

💡 정리하면, 서버를 만들고 여는 법을 배웠다. 그러나, 이렇게 만든 서버는 아직 할 수 있는 게 아무것도 없다. 이제 서버가 requests에 response 하는 법을 배워보자.

2. GET Requests

1) `Cannot GET /` 의 의미

(1) /

서버의 root 혹은 첫 페이지를 의미한다.
ex) https://google.com === https://google.com/

이처럼 get request에는 route가 있다. /(root) 뿐 아니라 /login, /profile 등 무엇이든 될 수 있다.

(2) GET

HTTP 요청 메서드 중 하나이다.
'페이지를 갖다 줘'라는 의미로 쓰인다.

※ 강의와 함께 HTTP 요청 메서드 참고

💡 HTTP

클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜

💡 HTTP 요청 메서드(HTTP request)

주어진 리소스에 수행하길 원하는 행동을 나타낸다. HTTP 동사라고도 한다.
대표적으로 GET 메서드 등이 있다. 이는 특정한 리소스를 가져오도록 요청한다.

예를 들어,

사용자가 어떤 페이지에 접속하려고 한다.
→ 웹 사이트야, 나한테 너네 홈페이지 갖다 줘.

브라우저는 HTTP 요청 메서드를 만들어 서버에 보낸다.
→ 사용자를 대신해 서버에 웹 사이트를 요청하고, 서버로부터 응답을 받아 사용자에게 페이지를 가져다 준다.

(3) Cannot GET /

브라우저가 서버의 /(root)로 get request를 보냈지만, 요청한 페이지를 가져올 수 없음을 의미한다.
일단 서버가 열리긴 했지만, 위 코드만으로는 서버가 할 수 있는 게 없음을 뜻한다.

이는 서버가 닫혔을 때 뜨는 문구인 'localhost에서 연결을 거부했습니다'와는 다른 뜻이다.

2) GET Requests 받고 처리하기

(1) application 설정

그렇다면, 서버가 get request에 어떻게 응답해야 하는지 설정해야 한다.
설정에 따라 application은 listen 하기 시작하고, 외부에 개방될 것이다.

import express from "express";

const PORT = 4000;

// express application을 만든다
const app = express();

// 이 사이에 'application 설정'을 해야 한다 ❗

// 외부 접속을 listen 한다
const handleListening = () =>
  console.log(`Server listening on port http://localhost:${PORT} 🎈`);

app.listen(PORT, handleListening);

(2) app.get("루트", 콜백 함수)

사용자가 어떤 페이지로 접속하려고 함에 따라, 브라우저가 root 페이지로 get request를 보내면, app(express application, 즉 서버)은 콜백 함수를 실행시킨다.

코드

예를 들어 기존 코드에 아래 코드를 추가한 후 저장하면,

const handleHome = () => console.log("Somebody is trying to go home.");

app.get("/", handleHome);

터미널에는 먼저 app.listen()에 의해 handleListening 콜백 함수의 console.log 값이 출력된다.
( → 서버가 시작되면, handleListening 콜백 함수가 실행된다. )

그 후 localhost:4000/ 페이지에서 새로고침을 누르면, app.get()에 의해 handleHome 콜백 함수의 console.log 값이 출력된다.
( → 브라우저가 get request를 보내면, handleHome 콜백 함수가 실행된다. )
이는 'button.addEventListener('click', onClickListener)'과 비슷하게 작동한다.

설명

현재 브라우저는 서버에 get request를 보내고 있는 중이다.
이제 서버는 브라우저가 보낸 get request에 반응할 수 있게 되었기 때문에 localhost:4000 페이지에 들어가도 cannot GET / 이 뜨지 않는다.

그러나, 대신에 브라우저는 이제 요청을 보낸 것에 대해 서버로부터 응답을 받기 위해 무한 로딩을 띄우며 기다리게 된다.
이는 handleHome 함수에는 console.log만 적혀 있을 뿐, 서버가 브라우저에 어떻게 응답할지는 적혀 있지 않기 때문이다.
따라서 서버는 더 이상 아무것도 하지 않으므로 브라우저는 계속 서버의 응답을 기다리다가 결국 포기하고 아래와 같이 문구를 띄우게 된다.

페이지가 작동하지 않습니다.
localhost에서 전송한 데이터가 없습니다.

💡 정리하면, 서버가 뭘 해야 할지 몰라서 'Cannot GET /' 에러를 띄웠던 이전에 비하면, 이제는 get request를 받고 처리도 하지만, 여전히 응답을 하지는 않는 상태라고 할 수 있다.

3. Responses

1) req, res

브라우저가 서버에 get request를 보내면, express는 handleHome 함수의 첫 번째 인자에 [ request object ]를, 두 번째 인자에 [ response object ]를 넣어준다.

const handleHome = (req, res) => console.log("Somebody is trying to go home.");

app.get("/", handleHome);

cf. 이는 아래 코드와 비슷하게 작동한다.

const onClickListener = (event) => console.log("Button was clicked.");

button.addEventListener('click', onClickListener);

2) request를 종료하는 방법

브라우저가 request를 보내면, 서버는 response를 return 해야 한다.
response를 return 하기 위해 request를 종료하는 몇 가지 방법이 있다.

(1) res.end()

첫 번째 방법으로 end() 메서드를 이용할 수 있다.
end() 메서드를 이용해 응답을 끝내고 이를 return 하도록 한다.

다시 페이지를 새로고침 하면, 드디어 무한 로딩이 끝나고 정상적으로 페이지가 표시되는 것(흰 화면)을 확인할 수 있다.

물론 아래 코드의 경우, 서버가 응답한 '내용'은 없다. 서버가 브라우저에게 아무것도 보내지 않은 채 request를 그냥 끝내버렸기 때문이다. 하지만, 적어도 서버가 무언가를 '해서' 응답을 하긴 했다.

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

app.get("/", handleHome);

(2) res.send()

또 다른 방법으로 send() 메서드를 이용할 수 있다.
send() 메서드에는 메시지를 적을 수 있다.
"" 안에 텍스트와 HTML, JSON, 파일, status code 등 많은 종류의 메시지를 전달할 수 있다.
request를 끝내고 response를 return 하도록 한다.

다시 페이지를 새로고침 하면, 화면에 메시지가 뜨는 것을 확인할 수 있다.

const handleHome = (req, res) => {
  // 무언가를 한 후
  return res.send("Hello!");
};

app.get("/", handleHome);

💡 정리하면, 서버는 express로부터 request를 받아서, handleHome 함수에서 무언가를 한 후, 끝으로 request를 종료해 response를 return 한다.

3) route 추가하기

/login 을 추가해보았다.

const handleHome = (req, res) => {
  return res.send("Hello!");
};

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

app.get("/", handleHome);
app.get("/login", handleLogin);

이제 브라우저의 주소 창에 localhost:4000 을 입력해 들어가면 화면에 Hello! 라는 문구가 뜨고(send)
localhost:4000/login 을 입력해 들어가면 흰 화면이 뜬다.(end)

서버가 /, /login 총 2개의 url을 이해하게 된 것이다.

✨ 내일 할 것

강의 계속 듣기

Lee Syong

능동적으로 살자, 행복하게😁

이전 포스트

[TIL] 211119

다음 포스트

[TIL] 211120

TIL

📝 오늘 한 것

📚 배운 것

1. 서버 만들기

1) src 폴더 생성

2) express application

3) app.listen(포트 번호, 콜백 함수)

4) 서버에 가는 방법

(1) localhost:포트 번호

(2) 서버 종료하기

5) 수정 & 최종

2. GET Requests

1) `Cannot GET /` 의 의미

(1) /

(2) GET

(3) Cannot GET /

2) GET Requests 받고 처리하기

(1) application 설정

(2) app.get("루트", 콜백 함수)

3. Responses

1) req, res

2) request를 종료하는 방법

(1) res.end()

(2) res.send()

3) route 추가하기

✨ 내일 할 것

[TIL] 211119

[TIL] 211121

0개의 댓글

[TIL] 211120

TIL

📝 오늘 한 것

📚 배운 것

1. 서버 만들기

1) src 폴더 생성

2) express application

3) app.listen(포트 번호, 콜백 함수)

4) 서버에 가는 방법

(1) localhost:포트 번호

(2) 서버 종료하기

5) 수정 & 최종

2. GET Requests

1) Cannot GET / 의 의미

(1) /

(2) GET

(3) Cannot GET /

2) GET Requests 받고 처리하기

(1) application 설정

(2) app.get("루트", 콜백 함수)

3. Responses

1) req, res

2) request를 종료하는 방법

(1) res.end()

(2) res.send()

3) route 추가하기

✨ 내일 할 것

[TIL] 211119

[TIL] 211121

0개의 댓글

1) `Cannot GET /` 의 의미