๐Ÿ“Œ ํ•  ์ผ(Todo) ๊ด€๋ฆฌ ์•ฑ

์ฃผ์–ด์ง„ API๋ฅผ ํ™œ์šฉํ•ด ‘์™„์„ฑ ์˜ˆ์‹œ‘ ์ฒ˜๋Ÿผ ํ•  ์ผ(Todo) ๊ด€๋ฆฌ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. Vue Composition API + TypeScript๋ฅผ ์‚ฌ์šฉํ•ด ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

์™„์„ฑ ์˜ˆ์‹œ ์™„์„ฑ ์˜ˆ์‹œ

API ์ •๋ณด

๋ชจ๋“  ์š”์ฒญ์€ ๋‹ค์Œ Headers ์ •๋ณด๊ฐ€ ํ•„์ˆ˜๋กœ ํฌํ•จ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค. <APIKEY>์™€ <USERNAME> ์ •๋ณด๋Š” ๋ณ„๋„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

curl <ENDPOINT>
  \ -X <METHOD>
  \ -H 'content-type: application/json'
  \ -H 'apikey: <APIKEY>'
  \ -H 'username: <USERNAME>'
  • ํ˜„์žฌ ์˜ˆ์ œ์—์„œ๋Š” ‘ํ•  ์ผ ๋ชฉ๋ก ์ˆœ์„œ ๋ณ€๊ฒฝ’ API์™€ order ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.

ํ•  ์ผ ๋ชฉ๋ก ์กฐํšŒ

์ „์ฒด ํ•  ์ผ ๋ชฉ๋ก์„ ์กฐํšŒํ•ฉ๋‹ˆ๋‹ค.

curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos
  \ -X 'GET'

์š”์ฒญ ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

  • N/A

์‘๋‹ต ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

type ResponseValue = Todo[] // ํ•  ์ผ ๋ชฉ๋ก

interface Todo {
  id: string // ํ•  ์ผ ID
  order: number // ํ•  ์ผ ์ˆœ์„œ
  title: string // ํ•  ์ผ ์ œ๋ชฉ
  done: boolean // ํ•  ์ผ ์™„๋ฃŒ ์—ฌ๋ถ€
  createdAt: string // ํ•  ์ผ ์ƒ์„ฑ์ผ
  updatedAt: string // ํ•  ์ผ ์ˆ˜์ •์ผ
}

[
  {
    "id": "mnIwaAPIAE1ayQmqekiR",
    "order": 0,
    "title": "JS ๊ณต๋ถ€ํ•˜๊ธฐ",
    "done": false,
    "createdAt": "2021-10-28T05:18:51.868Z",
    "updatedAt": "2021-10-28T05:18:51.868Z"
  },
  {
    "id": "tMzPImGoWtRdJ6yyVv2y",
    "order": 1,
    "title": "๊ณผ์ œ PullRequest(PR) ์ƒ์„ฑ",
    "done": true,
    "createdAt": "2021-10-28T04:16:53.980Z",
    "updatedAt": "2021-10-28T09:40:17.955Z"
  },
  {
    "id": "Rq8BebKihCgteHHhMIRS",
    "order": 2,
    "title": "API ์Šคํ„ฐ๋””",
    "done": false,
    "createdAt": "2021-10-28T04:17:02.510Z",
    "updatedAt": "2021-10-28T04:17:02.510Z"
  }
]

ํ•  ์ผ ํ•ญ๋ชฉ ์ถ”๊ฐ€

ํ•  ์ผ ํ•ญ๋ชฉ์„ ์ƒˆ๋กญ๊ฒŒ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.

curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos
  \ -X 'POST'

์š”์ฒญ ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

interface RequestBody {
  title: string // ํ•  ์ผ ์ œ๋ชฉ
  order?: number // ํ•  ์ผ ์ˆœ์„œ
}

{
  "title": "KDT ๊ณผ์ • ์„ค๊ณ„ ๋ฏธํŒ…"
}

์‘๋‹ต ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

interface ResponseValue {
  id: string
  order: number
  title: string
  done: boolean
  createdAt: string
  updatedAt: string
}

{
  "id": "7P8dOM4voAv8a8cfoeKZ",
  "order": 0,
  "title": "KDT ๊ณผ์ • ์„ค๊ณ„ ๋ฏธํŒ…",
  "done": false,
  "createdAt": "2021-10-29T07:20:02.749Z",
  "updatedAt": "2021-10-29T07:20:02.749Z"
}

ํ•  ์ผ ํ•ญ๋ชฉ ์ˆ˜์ •

ํŠน์ • ํ•  ์ผ ํ•ญ๋ชฉ์„ ์ˆ˜์ •ํ•ฉ๋‹ˆ๋‹ค.

curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/:todoId
  \ -X 'PUT'

์š”์ฒญ ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

interface RequestBody {
  title: string // ํ•  ์ผ ์ œ๋ชฉ
  done: boolean // ํ•  ์ผ ์™„๋ฃŒ ์—ฌ๋ถ€
  order?: number // ํ•  ์ผ ์ˆœ์„œ
}

{
  "title": "Bootstrap ์Šคํƒ€์ผ ์ถ”๊ฐ€",
  "done": false
}

์‘๋‹ต ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

{
  "id": "7P8dOM4voAv8a8cfoeKZ",
  "title": "Bootstrap ์Šคํƒ€์ผ ์ถ”๊ฐ€",
  "done": false,
  "order": 2,
  "createdAt": "2021-10-29T07:20:02.749Z",
  "updatedAt": "2021-10-29T07:20:02.749Z"
}

ํ•  ์ผ ํ•ญ๋ชฉ ์‚ญ์ œ

ํŠน์ • ํ•  ์ผ ํ•ญ๋ชฉ์„ ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค.

curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/:todoId
  \ -X 'DELETE'

์š”์ฒญ ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

  • N/A

์‘๋‹ต ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

type ResponseValue = true // ์ •์ƒ ์‘๋‹ต

ํ•  ์ผ ํ•ญ๋ชฉ ์ผ๊ด„ ์‚ญ์ œ

curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/deletions
  \ -X 'DELETE'

์š”์ฒญ ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

interface RequestBody {
  todoIds: string[] // ์‚ญ์ œํ•  ํ•  ์ผ ID ๋ชฉ๋ก
}

{
  "todoIds": [
    "mnIwaAPIAE1ayQmqekiR",
    "tMzPImGoWtRdJ6yyVv2y",
    "GHrvr3LaPx1g7y2sNuaC",
    "Rq8BebKihCgteHHhMIRS"
  ]
}

์‘๋‹ต ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

type ResponseValue = true // ์ •์ƒ ์‘๋‹ต

ํ•  ์ผ ๋ชฉ๋ก ์ˆœ์„œ ๋ณ€๊ฒฝ

ํ•  ์ผ ๋ชฉ๋ก์˜ ์ˆœ์„œ๋ฅผ ๋ณ€๊ฒฝํ•ฉ๋‹ˆ๋‹ค.

curl https://asia-northeast3-heropy-api.cloudfunctions.net/api/todos/reorder
  \ -X 'PUT'

์š”์ฒญ ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

interface RequestBody {
  todoIds: string[] // ์ƒˆ๋กญ๊ฒŒ ์ •๋ ฌํ•  ํ•  ์ผ ID ๋ชฉ๋ก
}

{
  "todoIds": [
    "mnIwaAPIAE1ayQmqekiR",
    "tMzPImGoWtRdJ6yyVv2y",
    "GHrvr3LaPx1g7y2sNuaC",
    "Rq8BebKihCgteHHhMIRS"
  ]
}

์‘๋‹ต ๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ฐ ์˜ˆ์‹œ:

type ResponseValue = true // ์ •์ƒ ์‘๋‹ต

GitHub

View Github