[Toy Project - Omuk] 2. 라우트 설정 및 라이브러리 설치

라우트

라우트는 경로라는 뜻처럼, 브라우저가 우리의 웹 사이트를 사용할 때 원하는 정보를 주고받을 수 있도록 제약한 하나의 프로토콜이다.

 

메인 페이지를 접속하기 원한다면 localhost:3000/, 상점 페이지로 접속하려면 localhost:3000/shop 등을 입력하여 웹 사이트를 사용하는 것이다. 이때, 그 특정 사이트를 통해 정보를 주고받을 수 있도록 설정하는 것이 라우트이다.

 

이전 게시물에서 Cannot GET / 이라고 응답을 받은 것도 같은 이유이다. 메인 라우트에 접속하였는데, 브라우저의 요청에 서버가 답하지 않았기 때문이다.

 

요즘 우영우를 보지 않은 나에게 우영우 봤냐고 했을 때와 같은 상황이라고 생각하면 된다. 나는 응답할 내용이 머리에 없기 때문에 Cannot GET / 라고 하는 것이다. 그러면 이제 정보를 주고 받고 사람들을 만나기 위해서 라우트를 설정해보도록 하자.

 

라우트는 기본적으로 아래의 구조로 작성한다.

app.METHOD(PATH, HANDLER)

METHOD는 http의 요청 메서드로, 해당 메서드로 요청이 들어올 때 라우팅하는 것이다.

 

이때, 모두 라우팅하는 것이 아니라 PATH라는 경로와 일치했을 때 비로소 통신하도록 한다. 그런데, 무엇을 통신하는 것일까? 그것은 HANDLER 부분을 임의로 작성하여 내가 원하는 대로 만들면 된다.

 

라우트 설정

 

라우트를 설정할 때, 수가 많지 않다면 메인 파일에 다 때려박아도 되지만, 그러면 가독성이 떨어지고 수정하기에 원활한 구조가 아니기 때문에 새롭게 라우트 폴더를 생성해주도록 했다.

이제 여기에 라우트를 받을 예정이다.

 

먼저 기본적인 루트 라우터를 설정하도록 했다. 요청에 대한 응답으로 send를 통해 "Hello, World!" 라는 평문을 전송하였다.

 

또한, 기본적으로 브라우저가 잘못된 요청을 보냈을 때의 404 에러와 어떠한 이유로 서버에서 오류가 발생했을 때의 500 에러를 위해, 오류 핸들러 미들웨어를 만들었다. 미들웨어도 웬만해서 분리하거나 메인 파일에 두고 싶어서 메인 파일에 작성했다.

 

기본적으로 코드는 위에서부터 아래로 이동하면서 실행되는데, 미들웨어는 일종의 고속도로 휴게터라고 생각하면 된다. 

Express라는 고속도로를 주행하면서 알감자도 먹고, 화장실도 들리고, 졸음을 퇴치하도록 하는 것이다. 이때, 배고픔을 달래는 것, 용변을 보는 것, 피곤을 해소하는 기능을 하는 것이 휴게터인 것처럼, 미들웨어도 웹 어플리케이션이 세션을 사용하고, 데이터베이스와 연결하고, 사용자를 인증하는 등의 편의 기능을 하도록 하는 것이다.

 

이때, 에러 핸들러 미들웨어를 가장 하단에 설정하여, 모든 라우트와 미들웨어를 지나갔음에도 요청에 대한 응답을 하지 못했기 때문에 에러로 인식하는 것이다.

 

디렉터리 구조 변경

 

공식 문서를 보니까 디렉터리 구조를 

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

이렇게 구성했다고 하여 디렉터리 구조를 변경하도록 했다. 템플릿 엔진은 핸들바를 쓸 예정이라 pug는 무시하도록 했다.