express 사용해 보자!

express는 node.js를 이용해서 서버를 개발할 수 있는 프레임워크이다.
직접 폴더 구조를 구현할수도 있지만 cli명령어들을 제공해준다.

 

global 설치
npm install express-generator -g

제대로 설치되었는지 확인해보기
express -h

만일 파일 실행시 오류가 난다면 express 모듈을 다시 설치해주자
npm install express

 

express 프로젝트 생성

express --view=ejs myapp
명령어를 통해서 프로젝트를 생성한다.

view 엔진을 'ejs'를 사용하겠다는 의미이고, 맨 마지막은 프로젝트 이름이다.

 

npm install ejs
ejs템플릿 사용을 위해 ejs모듈 설치

(ejs, pug는 express에서 웹페이지를 동적으로 처리하는 템플릿 엔진 모듈로 특정 형식의 문자열을 HTML 문자열로 변환해 준다.)

 

 

[생성된 프로젝트 구조 알아보기]

• app.js: 생성 후 기본이 되는 파일로써 express 몸체에 해당하는 부분이다. 주로 서버설정관련 코드들은 이곳에 작성하게 된다.
• bin: express를 통해 작성한 서버를 이곳에서 실제로 서버 프로그램을 실행하게 된다.
• public: 서버에서 정적으로 제공하는 파일들이 위치하는 폴더
• routes: 개발자들이 주로 작업하는 API관련 파일들이 위치하는 곳이다.
• views: 동적으로 구현되어야할 화면을 작성하는 부분이다. (정적인 html과는 차이가 있음)

Express 구조

 

 

[http 통신 구조]

클라이언트에서 요청한 데이터를 서버는 url과 method를 통해 해당 요청을 구분하고 해당 요청에 맞는 로직을 작성하게 된다.

• url: 요청경로
• method: 요청방법(get, post, put, delete)
• header: 통신에 대한 정보(보안관련 데이터, 해당 요청 데이터 타입 등)
• body: 통신에 같이 첨부되어야 할 데이터

 

 

[router]
라우팅은 애플리케이션 엔드 포인트(URI)의 정의이다.
URI가 클라이언트 요청에 응답하는 방식을 말한다.

라우트 메소드는 http메소드 중 하나로부터 파생되며 express 클래스 인스턴스에 연결된다.

 

var express = require('express');
var app = express();

// respond with "hello world" when a GET request is made to the homepage
app.get('/', function(req, res) {
  res.send('hello world');
});

• app.get: get통신을 구현하기 위해서 express에서 제공하는 함수이다.
• '/',: get함수의 첫번째 매개변수로는 해당 요청의 url을 입력받는다.
• function(req,res): 해당 url로 요청이 들어올 경우 실행되는 함수이다.
  이 함수에는 req, res를 매개변수로 받고 있다.

 

 

[router - req, res]
req(요청객체) , res(응답객체)는 실제 로직 구현시 중요한 객체이다.

 

request:

해당 요청에 대한 정보를 가지고 있는 객체이다.
클라이언트에 대한 정보 및 요청할 때 보낸 header나 body의 데이터를 포함하고 있다.
개발자는 해당 객체를 통해서 요청을 보낸 사용자에 대해 파악하고, 들어오는 데이터를 가지고 필요한 로직을 구현한다.

• req.params: 라우트 파라미터를 담고 있는 객체
• req.query: get요청시 쿼리스트링으로 담은 데이터
• req.body: post요청시 body에 담아서 넘어오는 데이터
• req.headers: http 헤더 정보

 

response:

서버에 들어온 요청에 맞는 응답 데이터는 res객체를 통해 클라이언트로 응답보낼 수 있다.

• res.download() 파일이 다운로드되도록 프롬프트
• res.end() 응답 프로세스를 종료
• res.json() JSON 응답을 전송
• res.jsonp() JSONP 지원을 통해 JSON 응답을 전송
• res.redirect() 요청의 경로를 재지정
• res.render() 클라이언트 요청으로 화면을 전송할 때 사용함
• res.send() 다양한 유형의 응답을 전송함
• res.sendFile() 파일을 옥텟 스트림의 형태로 전송함
• res.status(code): http 응답 코드를 설정한다. 응답 상태 코드를 설정한 후 해당 코드를 json을 통해 응답 로직을 수행함.

// json: 서버에서  json객체로만 응답을 하고싶을 때
// render: html응답을 하고 싶을 때
// res.send: 응답하는 형식 지정(컨텐츠 타입......)

 

 

[router 분리]
프로젝트 구현시 코드량이 많아질 때 더 나은 유지보수를 위해 코드를 분리하는데, 이때 사용되는 것이 express router이다.

var createError = require('http-errors');
var router = require('router');

router.get('/', function(req, res){
	res.send('this is test')
}

module.export = router

express.Router()를 통해서 router객체를 생성한다.
api구현처럼 router객체에 http메소드명으로 api를 구현할 수 있다.

 

 

[view 설정]

SSR(Server Side Rendering): 서버에서 화면이 만들어짐
ssr로 만들어진 화면들은 정적인 html파일이 아니기 때문에 따로 모아놓을 곳을 필요로 한다.
express에서 구현하기 위해서는 view관련 설정이 필요하다.

app.set('views', path.join(__dirname, 'views'));

view의 파일 위치

 

app.set('view engine', 'ejs')

view engine의 사용 툴

• 대표적으로 pug, ejs 엔진을 사용함

• view에서 동적, 정적 화면 구성
  express에서 정적 파일을 모아놓은 곳은 public 폴더이다.
  public 폴더의 파일들은 이미 만들어진 화면을 보여주는 방식이다.
  view engine을 통해 구성된 화면은 사용자 요청에 맞게 서버에서 화면을 구성해서 보내줘야하기 때문에 동적으로 화면을 구성하게 된다.
• ejs?: <% %>, <%= %>을 통해서 view 엔진을 구성한다.
  요청에 대한 응답으로 view파일과 데이터를 넘겨주면 express는 해당 데이터를 ejs안에서 사용한다.

<% 자바스크립트 문법 %> //js문법 사용 시
<%= 데이터 %>// 데이터를 넘겨줄 시
<% include ../layout/footer.ejs %> //다른 ejs파일을 가져올 때

<% include 파일경로 %> : header나 footer같이 페이지에서 공통으로 사용되는 경우 편리함

 

 

[router-render]
router구현 시 res객체를 이용해 클라이언트에 응답을 보낼 수 있다.
view파일을 통해 구현된 화면은 res.render 함수를 이용한다.

router에서 url을 get방식으로 구현하고 view파일과 데이터를 res.render를 이용해 클라이언트로 통신한다.