210323_TIL

김재헌·2021년 3월 23일

Server & Node

GET: 주소록에서 번호 찾기
POST: 주소록에 번호 추가
PUT: 주소록에서 이름, 번호 전체 수정
PATCH: 주소록에서 이름 or 번호 부분 수정

POST vs PUT
멱등성의 유무

POST는 멱등성을 가지지 않는다.
PUT은 멱등성을 가진다.

멱등성?
요청을 여러번 반복해도 결과가 같다.

게시판에 글쓰기를 누르면 POST -> 데이터 추가로 인해 서버의 상태가 바뀐다.
글 편집을 누르면 PUT -> 편집을 아무리 해도 Body의 내용이 같다면 서버의 상태는 바뀌지 않는다.

REST API: https://devuna.tistory.com/77

Chatterbox-server

기본적으로 Broswer는 하나의 Origin(출처)만 사용하는 정책을 채택하고 있다. 그 이유는 다른 출처를 받을 경우 신뢰가 떨어지기 때문이다. 하지만 브라우저가 발달하고 개발자들의 요구가 생기면서 CORS가 생겨났다.

  if (request.method === 'OPTIONS') { // 요청의 메소드가 OPTIONS일 때
    response.writeHead(200, defaultCorsHeaders); // 200 상태 코드
    response.end(); // 응답 종료
  }

OPTIONS 메소드로 먼저 신뢰할 수 있는 출처인지 확인한다.

// 요청의 메소드가 GET이고 호스트가 messages이면
if(request.method === 'GET' && request.url === '/messages') {
    response.writeHead(200, defaultCorsHeaders);
    response.end(JSON.stringify(messages)); // messages를 JSON화 시켜주고 응답을 종료한다
  } else if(request.method === 'POST' && request.url === '/messages') {
    // 요청 메소드가 POST이고 호스트가 messages이면
    request
    .on('data', (chunk) => { // 요청의 chunck(데이터 덩어리)를 받아서
      messages.results.push(JSON.parse(chunk.toString())) // 객체화 시켜준 후 results배열에 push해준다
    })
    .on('end', () => { // 요청의 마무리
      response.writeHead(201, defaultCorsHeaders)
      response.end(JSON.stringify(messages)) // 다시 JSON화 해서 응답 후 종료한다
    })
  }

Flow
요청 -> 객체화 -> 핸들링 -> JSON화 -> 응답
1요청 1응답

const defaultCorsHeaders = {
  "access-control-allow-origin": "*", // 와일드카드: 모든 url CORS허용
  "access-control-allow-methods": "GET, POST, PUT, DELETE, OPTIONS", // 적힌 메소드 허용
  "access-control-allow-headers": "content-type, accept", // content-type 허용
  //content-type: body의 형태를 알려주기 위함
  "access-control-max-age": 10 // Seconds. 다시 preflight 보내는 시간 10초 안에는 OPTIONS로 확인하지 않음
  // OPTIONS 보내는 주기
};

Express refactoring

express 서버 프레임워크를 통해 보다 간결하게 서버를 만들 수 있다.

npm install --save express

express를 설치한 후에 require로 express를 사용할 수 있게 해준다.

const express = require('express') // express를 현재 문서에서 사용할 수 있게 해줌
const app = express() // express 사용
const cors = require('cors') // CORS 허용
const bodyParser = require('body-parser') // 바디 파싱
const jsonParser = bodyParser.json()

const messages = {results: []}

app.use(cors()) // CORS를 전체 문서 미들웨어로 허용

app.get('/messages', (req, res) => { // GET 요청
    res.status(200).send(JSON.stringify(messages)) // JSON화 후 send
  // 다양한 유형의 응답을 전송합니다
  // res.send([body])
  // Sends the HTTP response
  // The body parameter can be a Buffer object, a String, an object, Boolean, or an Array.
  })

  app.post('/messages', jsonParser, (req, res) => { // POST 요청
    // jsonParser 미들웨어를 현재 요청에만 사용
    messages.results.push(req.body) 
    // req.body: body-parser로 바디를 파싱한 내용이 담겨있음
    // JSON형식의 바디를 서버에서 원하는 데이터에 곧바로 접근 할 수 있게 됨
    res.status(201).send(JSON.stringify(messages))
  })


  const server = app.listen(port, () => {
    //console.log(`Listening at http://localhost:${port}`)
  })

그러뭍기

JSON

JSON을 사용하면 프로그래밍 언어와 상관없이 정보를 주고 받을 수 있다.

JSON.stringify(): JSON 객체를 string형태로 변화시켜 서버에 보낼 수 있게 해준다.
JSON.parse(): string JSON형태의 데이터를 객체화시켜 핸들링 할 수 있게끔 해준다.