CORS

• Cross-Origin Resource Sharing
• 웹 페이지에서 다른 도메인의 리소스에 접근하는 것을 허용하기 위한 보안 메커니즘
• 브라우저에서 실행되는 JavaScript 코드가 동일 출처 정책(Same-Origin Policy)에 따라 다른 출처의 리소스에 접근하는 것을 제한하는 보안 방식을 우회하기 위한 매커니즘
  
  
• CORS 작동 방식 예시
  • 사용자가 A 도메인의 웹 페이지를 열고, 웹 페이지에서 B 도메인의 API를 호출하는 JavaScript 코드가 포함된다.
  • 브라우저는 JavaScript 코드를 실행하기 전에 서버에 OPTIONS 메소드로 사전 요청(Preflight request)을 보낸다.
  • B 도메인의 서버는 이 사전 요청에 대한 응답으로, 자신이 어떤 도메인에서 접근을 허용하는지 등의 정보를 담은 헤더를 리턴한다.
  • 브라우저는 이 헤더를 확인하고, A 도메인이 B 도메인의 리소스에 접근할 수 있는지 결정한다.
  • 만약 접근이 허용된다면, 브라우저는 API를 호출하여 결과를 받아온다.

Mini WAS 개발 hands-on

• require 모듈로더(module loader)를 통해 http 서버를 생성하기 위해 express 패키지 모듈을 불러옴
• Express 서버를 생성하기 위해서 express 함수를 호출하여 app 변수에 할당
• 서버의 port(포트)번호를 지정
• HTTP 요청 중, 메소드가 get, 엔드포인트(Endpoint)가 /인 요청을 또 다른 함수로 처리하는 비지니스 로직
• 요청에 대한 정보는 req 객체에, 서버에서 보내야 하는 답변에 대한 정보는 res 객체
• res.send() 를 통해 원하는 데이터를 클라이언트에 보낼 수 있음

• app 객체의 listen 메소드를 사용
• 기본 형태는 app.listen(port, callback) 와 같음

Mini Node Server 만들기

• ① app.use(cors()) 를 작성하면, CORS 관련 복잡한 설정을 따로 하지 않고, cors 함수를 통해 처리할 수 있음
  ② 요청은 모두 POST 메소드를 사용하기 때문에 app.post()형태의 메소드를 사용
  ③ 소문자 출력을 위해 toLowerCase() 함수 사용
• 서버 실행 node server/server-express.js or npm start
• 클라이언트 브라우저 실행 npx serve ./client -l 3000

server-express.js 파일을 수정할 때마다 작동하는지 확인하기 위해 서버와 클라이언트를 전부 리붓을 했어야 했음 나는 서버 리붓을 계속 안하고 클라이언트만 리붓을 해서 트러블 슈팅이 안되었음

Sprint - Cozstory WAS 개발

• API
  
  
  
  

** read.js **

'use strict'

const { readAll, readOne } = require('../../model')

module.exports = async function (app, opts) {
  app.get('/', async function (request, reply) {
    const result = await readAll()

    reply
      .code(200)
      .header('Content-type', 'application/json')
      .send(result)
  })

  app.get('/:id', async function (request, reply) {
    const result = await readOne( request.params.id )

    if(result) {
      reply
      .code(200)
      .header('Content-type', 'application/json')
      .send(result)
    }
    else {
      reply
      .code(400)
      .header('Content-type', 'text/plain')
      .send('Not Found')
    }
  })
}

** create.js **

'use strict'

const { createOne, isValid } = require('../../model')

module.exports = async function (app, opts) {
  app.post('/', async function (request, reply) {
    if(!isValid(request.body)) {
     reply
      .code(400)
      .header('Content-type', 'text/plain')
      .send('Bad Request')
      return;
    }
    const result = await createOne( request.body )
    
    reply
      .code(200)
      .header('Content-type', 'application/json')
      .send(result)
  })
}

** update.js **

'use strict'

const { updateOne, isValid } = require('../../model')

module.exports = async function (app, opts) {
  app.put('/:id', async function (request, reply) {
    if(!isValid(request.body)) {
      // TODO: 여기에 필요한 응답을 구현합니다.

      reply
      .code(400)
      .header('Content-type', 'text/plain')
      .send('Bad Request')
      return;
    }

    const result = await updateOne(request.params.id, request.body)

    if(result) {
      reply
      .code(200)
      .header('Content-type', 'application/json')
      .send(result)
    }
    else {
      reply
      .code(404)
      .header('Content-type', 'text/plain')
      .send('Not Found')
    }
  })
}

** delete.js **

'use strict'

const { deleteOne } = require('../../model')

module.exports = async function (app, opts) {
  app.delete('/:id', async function (request, reply) {
    
    const result = await deleteOne(request.params.id)

    if(result) {
      reply
        .code(200)
        .header('Content-type', 'application/json')
        .send(result)
    } else {
      reply
        .code(204)
        .header('Content-type', 'text/plain')
        .send('Not Found')
    }
  })
}

• npm install 서버에 필요한 모듈 설치
• npm test 테스트
• npm start 서버 시작

오늘 과제는 API를 확인하고 입력하는 부분을 두시간정도 고민했다 그 이후에는 트러블 슈팅을 했는데 if문을 두번 사용해서 오류가 있었다
조원중 한명이 API 확인 하고 이후에 어떻게 옮기는지 한번 보여줬고 그것을 보고 어떻게 해야하는지 이해 후 코드를 작성했다
내일 과제까지 해놓은거라 내일은 한번 더 리마인드 하고 JS공부 해야겠다