Node.js - 10 Express.js

여태까지는 Node.js를 통해 웹 서버가 어떻게 동작하는지, 내부 모듈을 활용해 어떻게 의미 있는 콘텐츠를 구축하는지 배웠다. 

 

이제는 동적 콘텐츠와 웹 프레임워크를 가지고 좀 더 발전된 웹 애플리케이션 개발이 될 수 있도록 한다.

 

그래서 여기서 해본 것은 Express.js를 사용한 웹 개발이다.

 

먼저, Express.js가 뭔지 살펴보자면

 

Express.js는 개발 속도를 올려주고 애플리케이션 개발을 위한 안정적인 구조를 제공한다.

Express.js는 대부분 애플리케이션에서 즉시 필요한 오류 처리나 정적 에셋 핸들링등의 기능을 처리한다.

=> 요청 처리를 도와주고, 동적 및 정적 컨텐츠를 제공하며, 데이터베이스를 연결하고 사용자 행동을 추적하는 모듈과 메소드를 제공한다.

 

Express.js와 같은 웹 프레임워크는 보통 미들웨어로 운영된다.

프레임워크의 위치가 웹 상의  HTTP와 Node.js 플랫폼 사이이기 때문.

 

미들웨어란? 애플리케이션 로직과의 데이터 교환 전에 대기하고, 분석하고, 필터링하고, HTTP 통신을 다루는 코드를 일컫는 일반 용어이다.

 

 

Express.js는 외부 패키지이기 때문에 Node.js 설치 시 같이 설치되지 않는다. 그래서 따로 설치해야한다.

npm install express --save

명령어를 실행한다.

 

 

 

express 변수에 Express.js를 요청하여 상수로 저장한다.

express 웹 서버 애플리케이션은 app으로 참조되는 상수로 저장된다.

 

첫번째 캡스톤 프로젝트에서 처럼, Express.js는 별도의 다른 모듈을 쓰지 않고 GET라우트 정의 방법과 콜백 함수를 제공한다.

 

여기서 주목해야할 모듈은 send 모듈이다.

 

http의 write와 비슷한 역할을 하고, 플레인 텍스트 형태로 응답을 브라우저에 전달한다.

 

(write를 사용했다면 반드시 end로 마무리 해야한다.)

 

그래서 위의 코드를 실행하면 

"Hello Universe!"가 브라우저에 뜨게 된다.

 

 

 

Express.js로 라우트 만들기

 

Express.js에서는 app 객체로 라우트의 정의가 시작되며 (예: app.post()),

소문자로 된 HTTP 메소드와 라우트 및 콜백 함수 같은 매개변수에 의해 지원된다.

 

'/contact' url에 따른 post 메소드를 이용한 요청 처리는

 

이렇게 Express.js 에서 제공하는 post 메소드를 사용한다. 

 

 

 

또 Express.js는 경로의 매개변수를 사용할 수 있게 한다.

라우트 매개변수는 앞에 콜론(:)이 붙으며 경로 어디에라도 올 수 있다.

 

 

여기서 경로가 "items/lettuce"로 유입된다면, 위의 함수가 트리거 될 것이다. 

 

라우트 매개변수는 애플리케이션 내 지정 데이터 객체를 확정할 때 간편하다.

사용자 계정과 코스 목록을 데이터베이스에 저장하려고 할 때

/users/:id와  /course/:type으로 사용자 정보와 코스의 종류를 액세스 할 것이다. 

이 구조는 REST 아키텍처 개발을 위해 필요하다.

 

 

 

요청 데이터의 분석

 

사용자로부터 데이터를 추출하는 방법은 2가지이다.

• POST 요청에서 요청 본문을 통해
• URL에서의 쿼리 스트링을 통해

http의 유입 데이터는 버퍼 스트림 형태여서 사람이 읽을 수 있는 형태가 아니다.

그래서 이를 변환하기 위해 별도의 패키지를 설치했다. 

 

npm install body-parser --save 명령을 입력한다.

 

body-parser는 유입되는 요청 본문을 분석하는 모듈이다.

이 모듈은 Express.js의 프리 패키지 형태로 설치되며 이를 사용하기 위해서는 애플리케이션에서 사용을 요청하면 된다.

 

 

이렇게 app.use 를 통해 URL 인코딩을 지정하고, (26행 ~ 30행)

JSON 양식으로 된 유입 요청의 파싱을 지정한다. (32행)

 

이후 포스팅된 데이터를 위한 라우트를 생성한다. 그리고 body와 query를 출력한다.

 

 

이제 curl 명령이로

curl --data "firstname=Jon&lastname=Wexler" http://localhost:3000 을 입력해보면

{firstname: 'Jon', lastname: 'Wexler'}가 콘솔창에 출력될 것이다.

 

지금 한 것은 post 요청을 보낸건데, url 매개변수를 이용하여 쿼리 스트링으로 파라미터를 보내보았다.

http://localhost:3000?cart=3&pagesVisited=4&utmcode=837623 으로 테스트를 해보면

첫번째 했던 것과 마찬가지로

{cart: '3', pagesVisited: '4', utmcode: '837623'}이 잘 출력될 것이다.

 

아래는 결과 화면이다.

 

 

 

 

 

MVC의 사용

 

데베프 소시개에 이어 여기에서도 나오는 MVC 구조... 웹개발에서 중요하긴 한가보다.

MVC 구조는 잘 알고있다 시피 Model, View, Controller라는 애플리케이션의 3가지 메인 기능에 포커스를 맞춰 개발하는 구조를 말한다.

 

그래서 그 아키텍쳐에 맞춰 원래 있던 프로젝트를 고치기 위해 아래와 같은 과정을 거쳤다.

1. 프로젝트 폴더에 controllers 폴더를 만든다.
2. controllers 폴더 안에 homeController.js 파일을 생성한다.
3. main.js 파일의 최상단에 const homeController = require("./controllers/homeController") 코드를 추가해 홈 컨트롤러를 불러온다.
4. 라우트 콜백 함수를 홈 컨트롤러로 옮겨 해당 모듈의 export 객체에 추가한다.

 

homeController.js 파일은 이렇게 정의를 하고,

 

 

main.js에서 이렇게 불러와서 사용해주면 된다.