Node.js - 미들웨어

 

 

안녕하세요 :)

 

이번 포스팅에서 다루어볼 내용은 Express 모듈의 미들웨어의 활용에 대한 이야기 입니다.

우리는 지금까지 use()메소드로 설정하는 미들웨어 함수 안에 코드를 직접넣어 클라이언트로 응답을 전송해 보았습니다. 하지만 웹서버를 다루기 위해 필요한 모든기능을 스스로 개발해서 미들웨어로 만들어야 한다면 웹서버를 구성하는 일은 꽤나 복잡한 과정일것입니다. 익스프레스에서는 다른 개발자들이 만들어 공유한 다양한 기능을 사용할수 있습니다.

 

이번 포스팅에서는 스스로 만든것이 다른 개발자가 만든 미들웨어를 활용하는것에 대하여 다루어 보겠습니다. 간단한 예제로 로그인 기능이 있는 웹페이지를 구현해보겠습니다.

 

먼저 특정 폴더의 파일을 특정 패스로 접근할수 있는 static 미들웨어를 만들어 줄것입니다. 예를 들어 public이라는 폴더의 모든 파일을 웹서버의 루트 패스로 접속할수 있도록 만든다면 아래와 같습니다.

 

 

이때 serve-static 미들웨어는 외장 모듈로 만들어져 있기 때문에 npm 매니져를 통해 설치를 먼저 진행해 주어야 합니다.

 

npm install serve-static --save

 

이후 잊지말고 path 모듈도 require후 객체화를 진행해야 스태틱디렉터리로 패스를 설정해줄때 오류가 나지 않습니다.

 

 

프로젝트 디렉터리 내의 구조는 위와 같으며 결과물은 아래와 같습니다.

 

 

이번에는 앞서 언급한 로그인 기능을 갖는 웹페이지 구현을 위해 body-parser 미들웨어를 활용해보겠습니다.

 

기본적인 로그인 폼을 html로 작성하면 다음과 같습니다.

 

 

껍질뿐인 웹페이지가 그럼 생성되었습니다. 이제 submit을 통해 서버로 전송시에 동작하는 요소들을 구현해보겠습니다.

 

npm install body-parser --save 명령을 통해 모듈을 설치해줍니다.

 

이후 아래와 같이 코딩하여 필요한 모듈을 require후 객체화 시켜주고, login.html 문서를 파싱후 필요한 파라미터를 변수에 초기화 하여 출력합니다.

 

 

8번 라인에서 application/x-www-form-urlencoded 파싱

9번 라인에서 application/json 파싱

 

이후 15번 라인과 16번 라인을 통해 필요한 파라미터값을 각각의 변수에 초기화

 

 

결과는 아래와 같습니다.

 

<서버로 전송 전>

 

 

<서버로 전송 후>