프론트엔드 코드 구현과 변경 대응

문제

백엔드 없이 프론트엔드를 구현하기 위해 프리즘 목 서버를 사용합니다. 초기 설계에서 누락된 API 설계 변경 내용을 처리하는 문제를 해결해 볼 것이다.

프리즘 목 서버 구성

프리즘은 OpenAPI 정의서를 읽어 규격에 맞는 데이터를 응답으로 반환하는 오픈소스 목 서버입니다.

다음 명령어를 통해 프리즘을 설치할 수 있다.

$ npm install --global @stoplight/prism-cli

이후 yml 파일을 다운로드하고, 명령어를 사용하여 읽히면 해당 목 서버가 실행된다.

# 8080포트로 openap.yml 파일의 목서버를 시작합니다.
$ prism mock -p 8080 .\openapi.yml

다음과 같이 요청을 보낼 경우 바로 응답이 오는 것을 알 수 있습니다.

요청

curl http://localhost:8080/jobs

응답

{
  "items": [
    {
      "id": 123,
      "creator_user_id": 345,
      "start_time": "2020-06-01T00:00:00Z",
      "end_time": "2020-06-02T00:00:00Z",
      "dog": {
        "name": "Fido",
        "age": 3,
        "breed": "Doberman",
        "size": "medium"
      },
      "activity": "walk"
    }
  ]
}

프리즘 목 서버를 바탕으로 프론트엔드 개발

프리즘 서버는 실제 API 서버가 아니라 정해진 내용만을 정적으로 응답하는 서버라는 점을 알아야 합니다. 지금은 데이터의 형태를 처리하고 API 서버로부터 프론트엔드 앱으로 연결되는 파이프라인을 구현하는 데 중점을 둡니다.

OpenAPI 정의서에 예제 추가

example을 통해 다양한 예제를 선택해서 할 수도 있습니다. 프리즘은 의미없는 기본 값 대신에 OpenAPI 정의서의 examples에 작성된 내용을 바탕으로 데이터를 반환합니다.

examples:
  two-items:
    summary: Two Job Applications
    value:
      items:
        - id: 123
          user_id: 123
          status: PENDING
        - id: 123
          user_id: 123
          job_id: 123
          status: COMPLETE
  empty:
    summary: Zero Jab Applications
    value:
      items: []
  many:
    summary: Many Job Applications
    value:
      items:
        - id: 0
          user_id: 123
          job_id: 4012
          status: COMPLETE

만약 특정 예제를 받고 싶다면 Prefer 헤더를 통해 요청할 수 있습니다.

$ curl -H "Prefer: code200,example=two-items" http://localhost:8080/foo

$ curl -H "Prefer: code=404" http://localhost:8080/foo

Last modified: 08 December 2024