Your First Server
-
먼저, 설정중에 몇가지를 바꾸고 시작한다.
index.js 파일명을 server.js로 바꾸고 src폴더를 생성후에 그곳에 넣어준다. (scripts에 index.js로 되어있는 부분을 src/server.js로 변경해주는것 잊지말기) -
server.js파일에 코드 작성
-
import express from "express"=> node_modules 폴더 내의 "express" 패키지를 express라는 이름으로 불러오기 -
app.listen(PORT, handleListening)=> handleListening은 콜백함수인데, 여기서의 역할은 앱이 실행될때 시작하는 함수이다. 4000은 포트 번호로 꼭, 이 번호일 필요는 없으며 보통 높은 숫자의 번호들은 비어있다.
-
-
보통은, 서버를 시작했다면 localhost를 통해서 접속할 수 있다.
- http://localhost:4000 으로 접속하니 페이지접속오류 대신, 뭔가가 나타났다. 서버가 잘 작동하고 있다는 얘기다.
GET Requests
-
위의 이미지를 다시 보자. 서버에 접속하면 위와같은 텍스트가 뜬다.
저기서 / 는 루트(root)페이지를 뜻한다. 우리가 구글에 접속할때 뒤에 /는 생략된다. 즉, http://google.com 는 http://google.com/ 과 같다.
-
루트페이지가 아닌 /hi 페이지로 접속한 화면이다.
-
GET는 '가져오다' 라는 뜻으로 사용된다. 위의 텍스트는 "서버로부터 /hi페이지를 가져올 수 없다" 라는 뜻이 된다.
-
-
app이 만들어지고, listing을 추가하기 전 중간위치에서 코딩해야 한다.
-
루트 페이지에 접속할때 할 작업을 코딩한다.
-
이러면 루트 페이지에 접속할때, 콜백함수(handleHome)가 실행되며 콘솔에 위와 같은 텍스트가 나온다.
-
하지만 브라우저로 접속을 하면 무한로딩만 뜬다.
이전에는 "cannot GET / "가 나타났지만, 이제는 서버에서 루트페이지로의 request는 처리할 수 있기때문에 사라졌다. 무한로딩이 나오는 이유는 response를 해주지 않았기 때문이다. 루트페이지가 아닌 다른 페이지로 접속하면 여전히 "cannot GET /페이지" 텍스트가 나타난다.
Responses
-
마치 VanillaJS가 button.eventListener("click", callback)에서 콜백함수의 인자로 event를 자동으로 넘겨주는 것처럼, express는 app.get(route, callback)에 콜백함수의 인자로 request와 response를 넘겨준다.
-
app.get(route, callback)의 콜백함수에 리턴값으로 무엇을 반환하는가에 따라 브라우저의 화면이 달라진다.
-
res.send("메시지")를 리턴하는 경우
-
res.end()를 리턴하는 경우
-
res.end()는 리퀘스트를 종료하는 방법들 중 하나로, 서버는 브라우저에게 아무것도 보내지 않는다. 브라우저를 보면 로딩중 상태가 아니다.
-
res.end()로 request를 끝내버리는 것이 서버를 평생 기다리게 하는것 보다는 낫다.
-
-
route 하나를 더 추가해서 /login를 만들어보자.
Middlewares
-
Middleware : 브라우저가 request한 다음, 사용자가 response 하기전 중간 단계를 뜻한다.
-
app.get("/", handleHome)에서 handleHome을 controller라고 부른다. -
앞에서 express가 controller함수의 인자로 request와 response를 보낸다 하였는데, 사실은 하나가 더 있다. 바로 next이다. next()를 실행하면 뒤의 함수를 실행한다. 이 경우 이 함수는 미들웨어라고 한다.
-
return을 없애고 next()를 실행하였더니
-
무한로딩도 아닌 "Cannot GET / " 텍스트가 나왔다. 이유는 handleHome 안에 next()를 명령했는데 handleHome다음의 함수가 없기때문에 접속자체가 안되는 것이다.
-
gassipMiddleware 라는 함수를 만들고, app.get()에 handleHome 함수 앞에 적었다.
-
터미널에는 I'm inn the Middle 이라는 텍스트가 나타나고, 브라우저는 빈페이지만 나타난다.
-
gassipMiddleware 함수 안의 next()명령문을 만나면 handleHome controller가 실행된다. 이때 gassipMiddleware는 미들웨어가 되고, handleHome은 finalware가 된다.
-
-
app.get()과 비슷한 역할을 하는 app.use()를 알아보자.
app.use()는 모든 route에 대해 작동한다.
예를 들어-
app.get("/", middlewareA, finalwareB)
app.get("/login", middlewareA, finalwareC)
은 아래와 같이 사용할 수 있다. -
app.use(middlewareA)
app.get("/", finalwareB)
app.get("/login", finalwareC)
-
-
주의할 점은 use()와 get()의 순서다.
get("/", controllerA)이use(controllerB)보다 앞에 있을땐, "/" url로 접근시controllerB가 작동하지 않는다.
하지만, 그 외의 다른 url로 접근하면controllerB가 작동한다.
External Middlewares
-
Morgan은 node.js 용 request logger middleware이다.
-
Morgan 설치
npm i morgan
-
Morgan 사용
-
import morgan from "morgan"; -
const logger = morgan("dev");
morgan()메소드는 미들웨어를 리턴한다. 옵션이 5개가 있다.
-
미들웨어처럼 사용하면 된다.
app.use(logger); -
morgan 코드 안에 next()가 있어 미들웨어로 수행된다.
-
"dev"옵션을 이용하면 콘솔에 아래와 같이 나타난다.
-
