[Youtube 클론코딩] Express 라우팅

서버와 리퀘스트

서버는 24시간동안 연속해서 켜져있으며 웹페이지의 정보를 담고있는 일종의 컴퓨터이다.

 

웹페이지에 접근하기 위해서는 브라우저 주소창에 해당 웹페이지의 도메인 주소나 IP주소를 입력하는데,

브라우저는 이를 서버에 HTTP Request(서버에 데이터를 요청하는 행위)로 만들어 전송한다.

# HTTP : 서버 간 통신방법

 

서버는 자신에게 들어오는 Request를 항상 Listen 하고 있다가

응답하여 웹페이지 정보를 브라우저에 전송(Response)하고

브라우저는 이 Response를 바탕으로 웹페이지를 구성하게 된다.

Express 어플리케이션 생성

Express는 HTTP 통신 요청에 대한 핸들러와 미들웨어를 만들 수 있는 프레임워크다.

우선 Express 어플리케이션을 만들기 위해선 Request를 주고받을 PORT 번호가 필요하다.

(서버가 내 컴퓨터 전체를 Listen하고 있을 수는 없기 때문)

보통 port 번호는 4000번을 사용하며, 비어있지 않으면 더 높은 번호를 사용한다.

Request, Response

브라우저는 두 가지 방법으로 Request를 한다.

1. get 방식 : 도메인 주소 뒷 부분에 쿼리스트링을 이용하여 객체를 직접 전달하는 방법

2. post 방식 : 전달할 객체의 정보를 외부에 노출시키지 않고 서버로 전송하는 방법. ( 사전 설정 필요 )

 

get 방식으로 들어오는 request는 다음처럼 다룬다.

const handler(req, res, next) => {
}

app.get(path, handler)

서버에 get방식으로 HTTP Request가 들어오게 되면,

서버는 첫번째 매개변수로 Request 객체를, 두번째 매개변수로 Response 객체를 반환한다.

Response 객체의 send 명령어를 반환하면 브라우저는 이를 통해 서버로부터 응답받은 것을 확인하고 로딩을 멈춘다.

응답은 필수적으로 해주어야 하며 응답하지 않으면 브라우저는 계속해서 응답을 기다리게 된다.

 

응답하는 방식에는 여러 가지가 있다.

1. end() : 아무런 데이터 없이 응답만 반환한다.(빈 화면)

2. send() : 텍스트나 JSON, HTML context 등을 반환한다.

Express 4.x - API 참조 (expressjs.com)

Express 4.x - API 참조

Middleware

Middleware는 Request와 Response 사이에 동작하는 함수이다.

기본적인 포맷은 Handler와 동일하다.

Handler는 사실 세번째 매개변수로 next를 받는데, next()를 하게 되면, 그 다음에 명시된 Handler를 실행시킨다.

위의 코드를 보면 app.get()에 여러개의 handler가 있는데,

middleware 함수는 next()를 실행하므로 middleware 함수가 실행된 뒤, 그 다음에 적힌 함수가 실행된다.

만약 middleware에서 next()가 아니라 res.send를 return하게 된다면, 그 다음 핸들러는 실행되지 않는다.

 

한 개의 middleware를 전역적으로 실행하고 싶다면, app.use() 메소드를 사용하면 된다.

여기서 주의할 점은 use는 반드시 get() 이전에 사용해야 한다는 점이다.

 

정리하자면, next()를 실행한다면 미들웨어고 response를 반환한다면 handler이다.

미들웨어, 핸들러 모두 컨트롤러로써 다음의 형태를 취한다.

Morgan

Request Logger용으로 사용하는 미들웨어이다.

직접 만들어 사용하는 것보다 사용이 편해서 자주 사용한다.

npm i morgan

다음처럼 사용한다.

morgan() 은 미들웨어 함수를 반환하므로, app.use를 통해 사용해주면 된다.