1. 닮은듯 다른 UI와 API
UI(User Interface)는 사용자 인터페이스이다. 사용자와 사물(혹은 시스템) 사이에서 의사소통할 수 있도록 만들어진 매개체이다.
이 UI가 존재함으로써 사용자는 컴퓨터(사물)와 상호 작용할 수 있게 되는 것이다.
UI에는 그래픽 인터페이스(GUI), 웹기반 인터페이스(WUI), 명령줄 인터페이스(CLI) 등이 있다.
API(Application Processing Interface)는 Application 간에 서로 상호작용할 수 있도록 돕는 매개체이다.
즉, API는 UI와 같은 역할을 하나 그 대상에 차이만 있을 뿐이다.
위 그림에서처럼 API는 손님이란 프로그램과 요리사란 프로그램 사이에서 전달자 역할을 하는 점원인 것이다.
점원이 말고도 메뉴판으로 비유되기도 하는데, 난 메뉴판이 더 정확한 표현이라고 느낀다.
왜냐하면 메뉴판엔 어떤 요리를 시킬 수 있는지 명시해 놓아 그 특정 메뉴만 시킬 수 있기 때문이다.
따라서 프론트(손님)는 백엔드(요리사)가 만들어 놓은 API(메뉴판) 안에서만 요청할 수 있게 된다.
2. 서버 생성 : http 모듈 vs node express
[ HTTP 모듈로 서버 생성 ver. ]
const http = require('http')
const { products } = require('./products')
const server = http.createServer((req, res) => {
const { url, method } = req
res.setHeader('Content-Type', 'application/json')
if (url === '/login' && method === 'POST') return res.end(JSON.stringify({ message: '로그인 완료!' }))
if (url === '/products' && method === 'POST') return products(res)
res.send(JSON.stringify({ message: 'this response answers to every request' }))
});
server.listen(8000, () => {
console.log('server is running on PORT 8000')})- Node.js에 내장된 http 모듈을
request (import) createServer메서드로 서버 개설 (콜백함수 인자 : req객체, res객체)- 응답
header를application/json로 세팅 res.end()함수로 응답을 마무리. 인자 res가 클라이언트가 받는 응답이 됨.server는 앞서 생성한 서버로,listen함수에서 포트 번호와 콜백 함수를 인자로 받음. 해당 포트 번호로 서버를 열어 서버가 실행될 때 로직을 콜백함수 안에서 처리. (대개 서버가 켜져 있다는 로그메세지를 넣음)
[ node express로 서버 생성 ver. ]
const http = require('http')
const express = require('express')
const { products } = require('./products')
const app = express()
app.use(express.json())
app.post('/login', (req, res) => {res.json('login success')})
app.get('/products', products)
const server = http.createServer(app)
server.listen(8000, () => {
console.log('server is listening on PORT 8000')})- Node.js에 내장된 http 모듈을
request (import) - express 모듈을 require 하여 app 변수에 담는다. (express 컨벤션)
- use 메서드로 자동으로 json으로 변환해주는
express.json메서드를 활용한다. - 요청받은 응답을 처리하는 메서드(
post, get등)을 이용해 라우팅을 한다. => req 인자는 요청받은 endpoint url을, res 인자는 응답하는 콜백함수를 받는다. - 서버를 개설한다.
따라서 node express를 썼을 때의 장점은
1. 복잡하게 써져있던 if문을 메서드를 이용해 간결하게 바꿀 수 있다는 것과
2. 서버를 만들때 콜백 함수 내에서만 라우팅 했던 것을 함수 밖에서 할 수 있어
서버 생성과 라우팅을 분리할 수 있게 된 것이다.
3. response의 메서드
3-1. res.send()
: response를 보내는 역할이다. 우리가 어떤 데이터를 보내는지 파악하여 그에 알맞은 Content-Type (ex. String, Object, Array) 를 지정해준다. 해당 메서드가 실행되는 순서는 사실상 res.send => res.json => res.sned 이다.
3.2. res.end()
: response를 끝내고 싶을 때 사용하며 주로 404를 리턴해줄 경우 쓰게 된다.
3.3. res.json()
: 안에 들은 데이터를 자동으로 json 형식으로 바꿔 보내주는 메서드이다. (즉, content-type 헤더를 application/JSON으로 고정한다.)
실행되는 순서가 res.json => res.send 이므로 res.send 보다 절차가 줄고, 이름으로 데이터 타입을 쉽게 파악할 수 있다는 장점이 있다.
4. status 코드
html status 코드는 3자리 숫자로 이루어져 있으며 첫째 자리 숫자가 4 혹은 5인 경우 정상적인 상황이 아니라 유의해야 한다.
1XX (정보) : 요청을 받았으며 프로세스를 계속 진행
2XX (성공) : 요청을 성공적으로 받았으며 인식했고, 수용
3XX (리디렉션) : 요청 완료를 위해 추가 작업 조치 필요
4XX (클라이언트 오류) : 요청 문법이 잘못되었거나 요청을 처리할 수 없음.
5XX (서버 오류) : 서버가 명백히 유효한 요청에 대한 충족을 실패
최근에는 1xx 상태 코드는 거의 사용되지 않으며, 주로 200(OK), 202(Accepted), 404(Not Found)의 statu code를 볼 수 있다.
