Node.js - 요청 라우팅

 

안녕하세요:)

 

이번 포스팅에서 다루어볼 내용은 요청 라우팅입니다.

지난 포스팅에서 우리는 로그인을 하려고 하는 유저가 id와 password를 입력후 submit 할시 이해대한 응답으로 각각의 파라미터값을 페이지에 write해서 출력해주는 예제를 다루어 보았습니다. 

그런데 이러한 요청의 종류가 하나가아닌 다수가 존재할때는 어떻게 될까요 각각의 요청에대한 응답을 다르게 매핑해주어야 할것입니다. 이때 필요한 것이 요청에대한 미들웨어 라우팅입니다.

 

이번 포스팅에서는 위와 같은 요청 라우팅에 대하여 다루어보겠습니다.

 

라우터 미들웨어의 경우 익스프레스 모듈안에 내장되어 있습니다. 그렇기 때문에 npm을 통한 별도의 설치는 하지 않아도 괜찮습니다.

 

주로 get()메소드와 post()메소드를 통해 실행될 함수를 등록할수 있습니다.

 

 

위와 같이 객체로 참조하고 각각의 메소드를 호출할수 있습니다. 이때 함수의 호출양식은 다음과 같습니다.

 

router.route('요청패스').get(실행될함수);

router.route('요청패스').post(실행될함수);

 

이외에도 이전포스팅에서 언급한바있는 여러 매소드가 존재합니다. get,post,put,delete,all 등이 있습니다.

 

라우팅의 여러 기능을 확인해보기 위해서 이전 포스팅에서 다루어본 예제의 html 파일의 form 태그 안에 action 속성을 다음과 같이 추가해서 login2.html이라는 파일을 새로 만들어보았습니다. action 속성 부여로 패스를 설정해준것입니다.

 

 

다음은 app.js의 소스코드를 아래와 같이 라우팅 객체를 이용하여 처리해줍니다. 가장 중요한 키포인트는 더이상 app.use 메소드로 함수를 추가하지 않는다는 점입니다. 이제부터는 router모듈의 route 객체내의 post 메소드를 통해 함수를 매핑하여 사용해보겠습니다.

 

 

 

로그인후 하이퍼링크를 통해 원래의 로그인 페이지로 돌아오는 웹페이지를 구현한 것입니다 결과는 아래와 같습니다.

 

 

 

 

URL 파라미터의 사용 & 오류페이지 보여주기

클라이언트에서 요청시 URL뒤 ? 기호를 붙여 요청 파라미터를 추가한다는것을 위의 예제를 통해 다루어 보았습니다. 그런데 클라이언트에서 서버로 데이터를 전달하는 방식은 URL 파라미터를 사용하는것도 있습니다. 아래의 예제를 통해 살펴보겠습니다.

 

위의 예제에서 post메소드의 내용을 아래와 같이 변경해줍니다.

 

 

메소드를 호출할때 파라미터의 값이 /process/login 에서 /process/login/:name으로 바뀐것을 알수 있습니다. 이것은 /process/login/뒤에 오는 값을 파라미터로 처리하겠다는 의미 입니다 이렇게 지정한 파라미터는 req.params 객체 안에 들어가게 됩니다. 따라서 :name으로 표시된 부분에 값을 넣어 전달하면 req.params.name 속성으로 접근할수 있습니다. 이것을 Token(토큰)이라 합니다.

 

토근의 값은 지정해줄때의 login/:mike와 실제 브라우저에서 실행된 파라미터값 login/mike와 매칭됩니다.

 

위와 같이 지정해준다면 요청할때 사용하는 URL 또한 변경하여야 합니다. 기존의HTML 파일을 복사해 새로운 파일을 만들어주고 action 속성을 아래와 같이 변경해줍니다.(저는 login3.html로 파일명을 지정했습니다.)

 

그럼 이제 브라우져를 열어 login3.html에 접속해보겠습니다. 그러면 아래와 같이 url을 통해서도 파라미터값을 전달받은것을 알수 있습니다.

 

 

 

마지막으로 오류페이지를 다루어 보겠습니다. 보통 지정되지 않은 페이지에 대한 요청은 디폴트페이지로 나타나게 됩니다. 그런데 이러한 오류페이지도 개발자가 지정해줄수있습니다. 저의경우 어렸을때 유행하던 밈인 함정카드 사진을 오류페이지 요청시 띄워보겠습니다.

 

메소드는 간단합니다. 

 

post 메소드 아래쪽에 다음과 같이 작성해줍니다.

 

 

결과는 아래와 같습니다.

 

 

그런데! 위와 같은방법은 안정성이 조금 떨어집니다. 원래 있는 페이지에 send 하는 방법이라서 실제로 존재하고 있는 오류페이지를 띄워준 방법은 아닙니다. 그렇기 때문에 아래에 소개하는 방법을 통해 에러페이지를 띄우는 것을 추천드립니다.

 

이전에 다른사람이 안정적으로 만들어둔 미들웨어를 사용하는 방법도 좋은 코딩이라하였죠! express-error-handler 미들웨어를 사용해 오류 페이지를 보내면 html파일을 하나 더 만들어야 한다는 번거로움은있지만 조금더 안정적으로 오류페이지를 호출할수 있습니다. 방법은 다음과 같습니다.

 

<외부 모듈 설치>

 

<모듈 객체화>

 

<모듈 사용>

 

 

결과는 위와 같지만 효율은 아래의 방법이 더좋습니다.