1. Express js 란?

• 웹 및 모바일 애플리케이션 구축을 위한 광범위한 기능을 제공하는 Node.js 웹 애플리케이션 프레임워크
• 단일 페이지, 다중 페이지 및 하이브리드 웹 애플리케이션을 빌드하는 데 사용
• Node.js의 API를 단순화하고 기능을 추가시켜, 편리하고 유용하게 사용할 수 있게 해주는 프레임워크
• cf. https://survey.stackoverflow.co/2022/#web-frameworks-and-technologies
  • 굉장히 많은 사람들이 사용한다.

2. Express 기본 구조

1
const express = require('express')
2

3
// Constants (1) 포트 및 호스트 지정
4
const PORT = 8080
5
const HOST = '0.0.0.0'
6

7
// App
8
const app = express()
9

10
// Routes
11
app.get('/', (req, res) => {
12
  res.send('Hello World')
13
})
14

15
// Listen
16
app.listen(PORT, () => {
17
  console.log('Running on http://localhost:8080')
18
})

4. res.json() vs res.send()

4.1 res.json()

• github express 코드 : https://github.com/expressjs/express/blob/master/lib/response.js#L239

1
res.json = function json(obj) {
2
  var val = obj
3

4
  // 생략......
5

6
  // settings
7
  var app = this.app
8
  var escape = app.get('json escape')
9
  var replacer = app.get('json replacer')
10
  var spaces = app.get('json spaces')
11
  var body = stringify(val, replacer, spaces, escape)
12

13
  // content-type
14
  if (!this.get('Content-Type')) {
15
    this.set('Content-Type', 'application/json')
16
  }
17

18
  return this.send(body)
19
}

• 먼저 obj는 JSON 문자열로 변환.
• Content-Type 헤더가 세팅되지 않았을 경우 this(res 객체)에 Content-Type으로 application/json을 세팅.
• res.send(body)를 실행.

4.2 res.send()

• github express 코드 : https://github.com/expressjs/express/blob/master/lib/response.js#L111

1
res.send = function send(body) {
2
  var chunk = body
3
  // 생략 ..........
4

5
  switch (typeof chunk) {
6
    // string defaulting to html
7
    case 'string':
8
      if (!this.get('Content-Type')) {
9
        this.type('html')
10
      }
11
      break
12
    case 'boolean':
13
    case 'number':
14
    case 'object':
15
      if (chunk === null) {
16
        chunk = ''
17
      } else if (Buffer.isBuffer(chunk)) {
18
        if (!this.get('Content-Type')) {
19
          this.type('bin')
20
        }
21
      } else {
22
        return this.json(chunk)
23
      }
24
      break
25
  }
26
  // 생략....
27
  return this
28
}

• body의 타입 체크.
• object 일 경우 res.json 호출
  • ==> 하지만 res.json에서는 문자열로 바꾼 후 res.send를 다시 호출 하기 때문에
  • res.send에 다시 와서 처리하게 된다.
• 처리 순서
  • res.send(object)
  • res.json(object)
  • res.send(string)
• res.send로 호출하게 되면, 내부에서 호출이 더 일어난다.

4.3 결론

• res.send와 res.json 사이에는 실제 차이 외부에서 보기에는 차이가 없지만,
• res.send 내부에서 호출 한 번이 더 일어난다.
• 또한 object를 보낼 땐 res.json()을 이용하는 게 더 직관적이기때문에 res.json()을 이용하는 것을 추천한다.

5. res.send() vs res.end()

5.1 res.end()

• 마지막으로 세션을 종료해야 할 떄, 쓰는 함수
• res.end()로 종료해야 하는 때
  • 데이터를 제공하지 않고 응답을 종료하려면 res.end()를 사용
  • 이것은 404 페이지에 유용
  • res.status(404).end()
• res.end()로 종료하지 않아도 되는 때
  • 데이터를 res.json() 이나 res.send()로 보내면 알아서 종료함

5.2 차이점

1
res.end('<p>some html</p>')
2
res.send('<p>some html</p>')

res.end에 response Headers를 보면, (1) Content-Type, (2) ETag가 없다.

💡 ETag란?

• ETag HTTP 응답 헤더는 리소스의 특정 버전에 대한 식별자
• 콘텐츠가 변경되지 않은 경우 웹 서버에서 전체 응답을 보낼 필요가 없으므로
• 캐시를 보다 효율적으로 사용하고 대역폭을 절약할 수 있다.

5.3 결론

• html, 텍스트 등의 콘텐츠를 보낼 경우, res.end를 사용하는 것보다 res.send를 사용하는게 훨씬 효율적이다.
• 왜? res.send에는 Content-Type과 ETag가 있기 때문에

6. 포스트맨 설치

• Postman은 개발한 API를 테스트하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼
• 현재 API에 요청을 전달하는 클라이언트가 없기 때문에, 포스트맨을 사용해서 요청을 임의로 전달해주겠다.
• https://www.postman.com/downloads/

6.1 nodemon 설치

1
npm install -D nodemon

• nodemon 패키지를 개발 환경에서만 사용할 수 있게 설치하겠습니다.
• 그러기 위해서는 —save-dev 혹은 -D 플래그를 이용해주시면 됩니다.

7. middleware에 대해서

1
request ⎯> Middleware 1 ⎯> Middleware 2 ⎯> Middleware 3 ⎯> response
2
                                 ▲
3
                                 │
4
                               next()

• Express는 자체 기능이 최소화된 라우팅 및 미들웨어 웹 프레임워크
• Express 애플리케이션은 본질적으로 일련의 미들웨어 기능 호출이다.
• 미들웨어 기능은 애플리케이션의 요청-응답 주기에서
  • 요청 객체(req), 응답 객체(res), next 미들웨어 함수에 접근할 수 있는 기능이다.
• next 미들웨어 기능은 일반적으로 next라는 변수로 표시된다.

1
const express = require('express')
2
const app = express()
3

4
// use ==> 미들웨어 등록
5
app.use((req, res, next) => {
6
  res.send('Time : ', Date.now())
7
  next() // 다음 미들웨어로 이동
8
})

Express 애플리케이션은 본질적으로 일련의 미들웨어 기능 호출이다.

1
request ⎯> logger ⎯> bodyParser ⎯> cookieParser ⎯> 생략... ⎯> response

• cf. https://www.turing.com/kb/building-middleware-for-node-js

8. MVC 패턴

• Model : 데이터와 비즈니스 로직을 관리
• View : 레이아웃과 화면을 처리
• Controller : 명령을 모델과 뷰 부분으로 라우팅

💡 장바구니 예시

• View : 장바구니에 담기 버튼 클릭
• Controller : Model에게 아이템을 추가하라고 알려줌
• Model : 아이템이 추가해 변경된 모델을 view에게 알려서 화면을 업데이트되게 함

9. 파일 전송(res.sendFile)

• 정적인 파일을 보관할 폴더 생성
• res.sendFile

10. Template Engine 종류

• Template Engine : 동적인 결과(데이터)를 정적 파일(HTML)에 담아준다.
• Express.js는 템플릿 엔진을 통해 서버 측 애플리케이션에서 동적 HTML 페이지를 생성하는 방법을 제공한다.
• 종류 : Pug, EJS, hbs 등등 (대부분 사용법이 비슷하다)