3. Your First Server

1. 서버 만들기

import express from "express";

const app = express();

2. Server?

• 항상 켜져 있는 인터넷과 연결 되어있는 컴퓨터
• Request1를 listening
• Ex) 카톡 메시지, 영상 클릭, URL 방문 등
• 외부 접속 listen
  • CallBack: 서버가 시작할 때 작동하는 함수
  • Port: 컴퓨터의 문이나 창문 같은 것
  • 유저가 서버에 접근하는 법: localhost(port-4000)

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

app.listen(4000, handleListening);

3.1 GET Requests

1. Cannot get /

• GET: HTTP2 method
• /: root
  

2. What is Request and Respond

• Request: 유저의 행동에 브라우저가 URL에 무엇인가를 요청하거나 전송하는 등의 행동
• Respond: 서버가 브라우저의 요청에 응답하는 것

3. How to respond GET

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

app.get("/", handleHome);

• 이렇게만 작성하면, GET 메소드에 listening 하긴 하나 respond 해주지 않아 무한 로딩

3.3 Responses

1. Request Object and Respond Object

• Req, Res: request and respond
• 무조건 두 개 다 사용하여야 함
• Given by Express (Express 문법)
• Vanilla JS의 handler event와 유사

const handleHome = (req, res) => {
 return res.send("I still love you");
};
const handleLogin = (req, res) => {
  return res.send("Login here.");
};
app.get("/", handleHome);
app.get("/login", handleLogin);

정리

1. 유저가 URL에 접속하려 시도
2. 브라우저는 URL을 바탕으로 Http Request를 생성하여 서버에 전달
3. 서버에서는 app.get 메소드를 통하여 전달 받은 GET 메소드에 응답

+) 루트에서는 handleHome 메소드를 통하여 응답하고, login에서는 handleLogin을 통하여 응답

3.4 Middlewares

1. Middleware

• request와 respond 중간에 있는 소프트웨어
• All handler is Middleware. And all Middleware is Handler.
• Handler is Controller (MVC)
• Controller has one more arg. (next: call next function)
• Middleswares don’t respond request. Just consistence. Send to next function

const gossipMiddleware = (req, res, next) => {
console.log("I am in the middle");
next();
};

const handleHome = (req, res) => {
return res.send("<h1>I still love you</h1>");
};

app.get("/", gossipMiddleware, handleHome);

2. App.use()

• Allows you make global Middleware (can work in any URL).
• All routes use this global Middleware.
• Express는 위에서 아래로 실행하므로 putting in the top.

const gossipMiddleware = (req, res, next) => {
 console.log(`Someone is going to ${req.url}`);
  next();
};
const handleHome = (req, res) => {
return res.send("<h1>I love Middleware</h1>");
};
app.use(gossipMiddleware);
app.get("/", handleHome);

각주

Request: 내가 google.com에 간다면, Google.com에 request를 전송한 것
서버는 URL에 담긴 정보를 전송

HTTP: 서버와 소통하는 방법
서버에 데이터를 전송하는 방법

유저가 URL에 접속하려 하면, 브라우저가 HTTP Requset를 생성하여 전송

GET: like get this page

Express DOCS