on
[Node] #3 INTRODUCTION TO EXPRESS
[Node] #3 INTRODUCTION TO EXPRESS
#3.0 Your First Server
강의목표
서버만들기
Server
항상 켜져있는 컴퓨터와 같은 것.
request를 기다리고있다.
import express from "express"; //node_modules의 express라는 패키지를 express라는 이름으로 import //npm은 이렇게하면 node_modules에서 express를 찾고 있다는 걸 알아낸다. const PORT = 4000; const app = express(); //expess application 생성 const handleListening = () => console.log(`Server listening on port http://localhost:${PORT}`) app.listen(PORT, handleListening); //서버가 사람들이 뭔가 요청할 때 까지 기다리는 함수 어떤포트를 리스닝할지 알려줘야함 //사용하지않는 포트면 상관 없는데 보통 높은 숫자의 포트 일수록 비어있다. //보통 서버를 시작했다면 로컬호스트로 들어갈수있다 ex)localhost:4000
서버로 들어가면
이러한 응답이 나오는데 이게 서버만드는데 성공한거다.
#3.1 ~ 3.2 GET Requests
강의목표
get requests알기 http 알기 서버에게, get requests에 어떻게 응답해야 할지를 알려주기
HTTP
우리가 서버와 소통하는 방법, 서버가 서로 소통하는 방법이다.
유저가 웹사이트에 들어가려고 할 때 브라우저가 http request를 만들어 보낸다.
http request: 웹사이트에 접속하고 서버에 정보를 보내준다.
GET
웹사이트에 접속하려 할 때 웹사이트한테 홈페이지좀 갖다 줘 라고 요청하는것이다.
브라우저는 사용자를 대신해 웹사이트를 request하고, 페이지를 get 하려는것이다
import express from "express"; const PORT = 4000; const app = express(); const handleHome = () => console.log("somebody is trying to go home."); app.get("/", handleHome); //"/"root 페이지로 get 요청을 보내면 함수를 실행한다. //handleHome 자리에는 반드시 함수를 넣어야한다. const handleListening = () => console.log(`Server listening on port http://localhost:${PORT}`); app.listen(PORT, handleListening);
결과 =>
무한로딩을 한다.
#3.3 Responses
강의목표
request후 response하는 과정 responses에는 어떠 종류가 있는지
//server.js const handleHome = (req, res) => {return res.send("I still love you.");} //req, res는 express로 부터 받는거다. app.get("/", handleHome); //home(/)으로 get request가 오면 express는 handleHome에다가 (req, res) request와 response object를 넣어준다 //request object에는 header, cookie, url, method등등이 있다
app.get("URL",GET handlerfunction")은 get 요청을한다 그렇지만 꼭 get요청에 응답하는것은 아니다. 서버가 사용자의 get 요청에 응답하도록 하려면 res.end() 또는 res.send() 등등의 응답을 해줘야한다 ex) handleHome = (req, res) => res.end() , handleHome = (req, res) => {return res.send("I still love you.");}; GET의 첫번째 인수는 req이며 request객체를 받는다. GET의 두번째 인수는 res이며 response객체를 받는다. res.end()는 아무것도 반환하지 않고 응답을 종료하고 res.send()는 사용자가 입력한 문자열을 반환한다.
#3.4 Recap
request를 받고 respond 한다.
status code, html, end()등으로 respond
#3.5 Middlewares part One
강의목표
본격적으로 웹사이트를 만들기 전에 middleware의 개념 이해
// middleware const gossipMiddleware = (req, res, next) => { console.log(`Someone is goint to: ${req.url}`); next(); }; // finalware const handleHome = (req, res) => { return res.send("I love middlewares"); }; app.get("/", gossipMiddleware, handleHome);
middleware 요청과 응답 사이 중간에있는 소프트웨어(middle software)
모든 미들웨어는 핸들러(컨트롤러) 미들웨어이다.
세 개의 인수가 있다 (req, res, next)
next인수가 존재하는경우 next는 다음 컨트롤러를 호출한다
#3.4 Middlewares part Two
강의목표
app.get()말고도 다른것도 있다는걸 배운다 => app.use
app.use
gloable middleware을 만들게 해준다. 어느 URL에도 작동하는 middleware
const logger = (req, res, next) => { console.log(`${req.method} ${req.url}`); next();//next()를 호출하지 않는다면 다음 컨트롤러가 실행이 안돼 끝나버린다. //middleware사용할때 next() 호출하는거 까먹지말기 ! }; const privateMiddleWare = (req, res, next) => { const url = req.url; if (url === "/protected") { return res.send("Not Allowed"); } console.log("Allowed, you may continue."); next(); }; const handleHome = (req, res) => { return res.send("I love middlewares"); }; const handleProtected = (req, res) => { return res.send("Welcome to the private lounge."); }; app.use(logger); app.use(privateMiddleWare); app.get("/", handleHome); app.get("/protected", handleProtected); const handleListening = () => console.log(`Server listening on port http://localhost:${PORT}`); app.listen(PORT, handleListening); // 위결과로, handleprotected는 실행되지 않고, privateMiddleWare에서 끝나게 됨.
위에서 사용자가 /protected 경로로 요청을 보낸다면 req의 url이 값을 비교해 res.send("Not Allowed");를 return해준다 privatedMiddleware는 url을 감시하는 역할인거다.
#3.7 Setup Recap
#2 내용이라 아래 주소에 포스팅
#3.8 Servers Recap
Server
서버는 인터넷에 연결되어 있으며 24시간 꺼지지 않는 컴퓨터이다.
클라이언트와 서버는 개방된 포트를 통해 request 와 response 를 주고받는다.
서버는 request 를 받으면 반드시 response 를 해주어야 한다. 브라우저 무한 로딩이 될 수 있기 때문이다.
HTTP request 는 어떤 route(url) 에 대한 HTTP Method 요청이고 서버는 그 요청에 대한 response 를 해주어야한다. 여기서 중요한 것이 또 ** controller ** 이다.
request 댓글을 쓰거나, 주소로 들어가거나 할때 브라우저가 request를 보내는 거임. 브라우저를 통한 모든 상호작용.
port 컴퓨터와 소통하기 위한 창문같은 것.
#3.9 Controller Recap
Controller
전달받은 request를 처리하고 response를 전달하기 위한 콜백함수이다
컨트롤러는 request 와 response 오브젝트를 전달받는다. request를 받았으면, response (end(),send())를 함으로써 응답을 해야한다. 아무 response가 없다면 브라우저는 무한로딩하며 우리의 대답을 기다릴 것.
#3.10 Middleware Recap
Middleware
미들웨어는 컨트롤러가 request 처리 작업을 완료하고 response 를 전달하기 전에 request 처리를 도와주는 콜백함수이다.
미들웨어는 request 오브젝트와, response 오브젝트 말고도 next 파라미터를 갖는다.
next 파라미터는 다음으로 request 를 처리할 콜백함수를 담고있다. 미들웨어는 요청과 응답 사이의 소프트웨어. 모든 미들웨어는 핸들러, 모든 컨트롤러는 미들웨어다. 미들웨어는 next를 포함한 세 개의 argument가 있다. (req, res, enxt) next가 존재하는 경우 다음 핸들러 함수 next()를 호출. middleware에는 next() 가 필수 !!!!
#3.11 External Midddlewares
morgan
node.js용 request logger middleware.
패키지설치 npm i morgan
morgan을 통해 method, path, status code 등의 정보를 요청을 보낼 때 마다 콘솔을 통해 확인할수 있다.
import express from "express"; import morgan from "morgan"; const PORT = 4000; const app = express(); //dev, short, tiny, combined, common중에 출력유형선택. const logger = morgan("dev"); const home = (req, res) => { console.log("I will respond."); return res.send("I love middlewares"); }; const login = (req, res) => { return res.send("login"); }; app.use(logger); app.get("/", home); app.get("/login", login); const handleListening = () => console.log(`Server listening on port http://localhost:${PORT}`); app.listen(PORT, handleListening);
결과 => method, path, 응답시간
from http://til-blog.tistory.com/7 by ccl(A) rewrite - 2021-12-23 16:26:44