Express 서버 생성(3)

1. localhost

 - / 는 root 혹은 첫 페이지

   - google.com 접속하면 google.com/ 이라는 것

 - GET은 HTTP의 많은 method 중 하나

   - HTTP는 유저와 서버 또는 서버간 소통하는 방법을 말함

   - 유저가 naver.com에 접속을 하면 브라우저가 대신해서 HTTP request를 만들어 줌

   - 즉 HTTP request는 웹사이트에 접속하고 서버에 정보를 보내는 방법

   - 브라우저는 유저를 대신해 웹사이트를 request하고 페이지를 가져다 줌

   - Bring(GET) me that page 같은 느낌

 

2. Request

 - 유저가 뭔가를 요청하거나, 보내거나, 유저에게 어떤 행동을 하는 것

 - 현재의 경우 브라우저가 서버의 home으로 GET request를 보내고 있음

// server.js
// 유저가 node_modules/express 할 필요없이 npm이 추적
import express from "express";

const PORT = 4000;

// express application 생성(express 설계를 위한 룰)
// express function을 사용하면 생성
// app이 listen 할 수 있게 해야함
const app = express();

// application을 설정한 다음 외부에 개방

// 누군가 root로 GET request를 보낸다면, function 실행
// 그냥 c.log는 에러 뜸
const handleHome = () => console.log("Somebody is trying to go home!");
app.get("/", handleHome);

// listen에는 callback이 있음
// 여기에서 외부 접속을 listen
const handleListening = () => console.log(`Server listening on port http://localhost:${PORT} 👍`)
app.listen(PORT, handleListening);

 

 - 서버는 GET request에 반응할 수 있는 상태

 - Cannot GET 에러가 안뜨고 로그가 출력되지만 브라우저는 로딩이 계속 걸림

   - 이유는 브라우저는 서버에 해당 페이지가 필요하다고 요청하고 서버는 handleHome 함수를 호출

   - 하지만 handleHome 함수에는 로그만 출력하고 그 외의 행동이 없으므로 브라우저는 계속 대기

 - express의 route handler에는 event는 없지만 2가지 object가 있음

// request(req), response(res)
// home으로 GET request가 오면, express는 handleHome에다가 request와 response object를 넣음
// handleHome({object}, {object})
const handleHome = (req, res) => console.log("Somebody is trying to go home!");

// 아래처럼 수정하면 여전히 로딩이 걸리지만 req, res의 정보가 콘솔에 출력
const handleHome = (req, res) => {
  console.log(req);
};

const handleHome = (req, res) => {
  console.log(res);
};

 

- 기존의 route handler 수정 및 추가

// 로딩 없이 서버가 request를 끝냄
const handleHome = (req, res) => {
  return res.end();
};

// request에 응답하며 wow를 웹에 출력
const handleHome = (req, res) => {
 return res.send("wow");
};

// route handler 추가
// localhost/login으로 가면 login 출력
const handleLogin = (req, res) => {
  return res.send("login");
};
app.get("/login", handleLogin);