#3.0 Your First Server
src 폴더에 코드, 로직을 가진 파일(ex.index.js, server.js)을 모두 넣어줌
서버 생성 코드
import express from "express";
const app = express();
app.listen → 서버에게 요청을 보낸다고 이해하면 됨.
const handleListening = () => console.log("Server listening on port 4000 🚀")
app.listen(4000, handleListening)
4000 → port 번호, handleListening → callback function, 서버가 listen하면 처음 시작되는 함수
서버를 연 것을 확인할 수 있다.
조금 더 예쁘게 수정
import express from "express";
const app = express();
const PORT = 4000;
const handleListening = () => console.log(`Server listening on port http://localhost:${PORT} 🚀`)
app.listen(PORT, handleListening)
#3.1, 3.2, 3.3, 3.4 GET Requests
GET → HTTP method
const app = express();
app.get("/",() => console.log("Somebody is trying to go home.")); //inline function
위와 같이 app.get을 추가해주면,
무한 로딩이 걸리긴 하지만, (브라우저가 계속 우리를 기다리는 것임!)
콘솔에는 표시된다.
app.get("/",(req, res) => {
console.log(req)
});
이렇게 바꿔줬더니,
requset를 출력해준다.
app.get("/",(req, res) => {
return res.end();
});
res.end()로 바꿔주니
로딩이 끝났다…!
res.end() → 서버에서 브라우저에게 아무것도 보내지 않는다. 실제로 아무 response가 없는 것. kill the requset!
app.get("/",(req, res) => {
return res.send('Hello world!');
});
res.send()로 바꿔주니
안녕 세계! 를 출력해준다 ㅎㅎ
app.get("/login",(req, res) => {
return res.send('login here!');
})
#3.5, 3.6 Middlewares
Middlewares → middle software
브라우저가 request하면, 서버가 response를 준다. 그 사이에 middleware가 존재!
모든 handler는 middleware (handleListening 등등)
handler → controller라고 부름.
req, res, next가 인자로 들어감!
next → 다음 함수를 호출해줌.
const gossipMiddleware = (req, res, next) => {
console.log("I'm in the middle!");
next();
};
const handleHome = (req, res, next) => {
return res.send('<h1>Hello world!<h1>');
};
app.get("/", gossipMiddleware , handleHome);
/에서 gossipMiddleWare로 request 요청 → console.log 이후 next() 함수 실행 → handleHome 실행됨.
즉, gossipMiddleWare는 Middleware이고, handleHome은 fianlware가 된다.
만약 middleware에서 response를 보내면, next 함수는 실행되지 않는다.
즉, middleware는 request에 응답하지 않는 것이다!
app.use() → global middleware! 즉, 어떠한 url에서도 실행되는 middleware 함수이다.
const gossipMiddleware = (req, res, next) => {
console.log(`Someone is going to: ${req.url}`);
next();
};
const handleHome = (req, res) => {
return res.send('<h1>Hello world!<h1>');
};
app.use(gossipMiddleware);
app.get("/", handleHome);
app.get("/login",(req, res) => {
return res.send('login here!');
})
app.use 때문에 url을 변경할 때마다 gossipMiddleware가 실행되는 것을 확인할 수 있다.
여기서도 알 수 있듯이 app.use, app.get의 순서가 중요하다!
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();
};
const handleHome = (req, res) => {
return res.send('<h1>Hello world!<h1>');
};
const handleProtected = (req, res) => {
return res.send('<h3>Welcome to the private lounge.</h3>');
};
app.use(logger);
app.use(privateMiddleware);
app.get("/", handleHome);
app.get("/protected", handleProtected)
privateMiddleware를 새롭게 추가시켜줬다. app.use의 순서대로 logger → privateMiddleware → handleHome이 실행된다.
privateMiddleware는 /protected로 요청을 보내는 경우 Not Allowed를 response하고 다음 함수를 실행시키지 않는다. 즉, 프로세스를 중간에 중단시켜버리는 것이다.
#3.11 External Middlewares
morgan → 많이 사용되는 middleware, 설치법 : npm i morgan
import logger from "morgan";
...
const loggerMiddelware = logger("dev");
...
app.use(loggerMiddelware);
app.get("/", home);
app.get("/login",login);
method, path(url), status code, response time을 표시해줌!
dev, combined, common, short, tiny 등의 옵션을 줄 수 있음. 각각이 표시해주는 것이 다르다!
** 본 글은 노마드 코더의 ‘유튜브 클론코딩’ 강의를 참조하여 작성하였습니다. **