25.06.23 - se5ri/React GitHub Wiki

ch 09

  • 9์žฅ HTTP ํ†ต์‹ ๊ณผ Ajax

    2.3 Open Market API ํ…Œ์ŠคํŠธ

    2.3.1 ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ์ถ”๊ฐ€

    • Environments > + ๋ฒ„ํŠผ(Create new environment)
    • "New Environment" -> Open Market์œผ๋กœ ์ˆ˜์ •

    url ์ถ”๊ฐ€

    • Variable: url
    • Type: default
    • initial value: https://fesp-api.koyeb.app/market
    • Save

    client-id ์ถ”๊ฐ€

    • Variable: client-id
    • Type: default
    • initial value: openmarket
    • Save

    2.3.2 Collection ์ถ”๊ฐ€

    • Collections > + ๋ฒ„ํŠผ(Create new collection) > Blank collection
      • "New Collection" -> Open Market API๋กœ ์ˆ˜์ •

    2.3.3 API Server ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ์ง€์ •

    • ์šฐ์ธก ์ƒ๋‹จ์˜ "No Environment" ๋˜๋Š” "Todo List" ํด๋ฆญ ํ›„ Open Market ์„ ํƒ

    2.3.4 Open Market API Collection์— API ์š”์ฒญ ์ถ”๊ฐ€(์ƒํ’ˆ ๋ชฉ๋ก ์กฐํšŒ)

    • Collections > Open Market API ์ปฌ๋ ‰์…˜ ์œ„์— ๋งˆ์šฐ์Šค ์˜ฌ๋ฆฐ ํ›„ ยทยทยท ํด๋ฆญํ•ด์„œ Add request ์„ ํƒ

      • "New Request" -> ์ƒํ’ˆ ๋ชฉ๋ก ์กฐํšŒ๋กœ ์ˆ˜์ •
      • "EEnter URL or describe the request to Postbot" ํ•ญ๋ชฉ์— {{url}}/products ์ž…๋ ฅ ํ›„ Send
      • ์‘๋‹ต ๊ฒฐ๊ณผ ํ™•์ธ
      {
        "ok": 0,
        "message": "client-id ํ—ค๋”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค."
      }
      
    • client-id ํ—ค๋” ์ถ”๊ฐ€

      • Headers ํƒญ ์„ ํƒ
        • Key: client-id
        • Value: {{client-id}}

    2.3.5 ์ƒํ’ˆ ์ƒ์„ธ ์กฐํšŒ

    • Collections > Open Market API ์ปฌ๋ ‰์…˜ ์œ„์— ๋งˆ์šฐ์Šค ์˜ฌ๋ฆฐ ํ›„ ยทยทยท ํด๋ฆญํ•ด์„œ Add request ์„ ํƒ

      • Open Market API/์ƒํ’ˆ ์ƒ์„ธ ์กฐํšŒ
      • {{url}}/products/4
      • ์‘๋‹ต ๊ฒฐ๊ณผ ํ™•์ธ
      {
        "ok": 0,
        "message": "client-id ํ—ค๋”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค."
      }
      
    • ์ปฌ๋ ‰์…˜๋‚ด์˜ ๋ชจ๋“  ์š”์ฒญ์— client-id ํ—ค๋” ์ถ”๊ฐ€

      • Collections > Open Market API ์„ ํƒ
      • Scripts > Pre-request ์„ ํƒ ํ›„ ์ถ”๊ฐ€
      pm.request.headers.add({
        key: "client-id",
        value: "{{client-id}}"
      });
      
      • Save
    • ์—ฌ๊ธฐ์„œ ์ƒํ’ˆ๋ชฉ๋ก์กฐํšŒ๋ž‘ ์ƒํ’ˆ์ƒ์„ธ์กฐํšŒ์—์„œ ์›๋ž˜ ํ•ด๋”๋ฅผ ์ง€์šฐ๊ณ  ์ž˜๋˜๋Š”์ง€ ํ™•์ธ

    2.3.6 ํšŒ์› ์ •๋ณด ์กฐํšŒ

    • Open Market API/ํšŒ์› ์ •๋ณด ์กฐํšŒ
    • GET{{url}}/users/4

    2.3.7 ํšŒ์› ์ •๋ณด ์ˆ˜์ •

    • Open Market API/ํšŒ์› ์ •๋ณด ์ˆ˜์ •
    • PATCH{{url}}/users/4
    • Body > raw > "Text" -> "JSON"์œผ๋กœ ๋ณ€๊ฒฝ. ๋ฐ์ดํ„ฐ ์ž…๋ ฅ ํ›„ Send
    {
      "name": "์ œ์ด๋ฏธ"
    }
    
    • ์‘๋‹ต ๊ฒฐ๊ณผ ํ™•์ธ
    {
        "ok": 0,
        "message": "authorization ํ—ค๋”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.",
        "errorName": "EmptyAuthorization"
    }
    

    2.3.8 ๋กœ๊ทธ์ธ

    • Open Market API/๋กœ๊ทธ์ธ
    • POST{{url}}/users/login
    • Body > raw > "Text" -> "JSON"์œผ๋กœ ๋ณ€๊ฒฝ. ๋ฐ์ดํ„ฐ ์ž…๋ ฅ ํ›„ Send
    {
      "email": "[email protected]",
      "password": "11111111"
    }
    

    ๋กœ๊ทธ์ธ ์‘๋‹ต ๊ฒฐ๊ณผ๋กœ ๋ฐ›์€ ํ† ํฐ์„ ํ™˜๊ฒฝ ๋ณ€์ˆ˜์— ์„ธํŒ…

    • Collections > Open Market API > ๋กœ๊ทธ์ธ > Scripts > Post-response

      if (pm.response.code === 200) {
        const jsonData = pm.response.json();
        const accessToken = jsonData.item.token.accessToken;
        const refreshToken = jsonData.item.token.refreshToken;
        pm.environment.set("accessToken", accessToken);
        pm.environment.set("refreshToken", refreshToken);
      }
      
    • Environments > Open Market ํ™˜๊ฒฝ ๋ณ€์ˆ˜์— accessToken๊ณผ refreshToken ์ถ”๊ฐ€ ๋˜์—ˆ๋Š”์ง€ ํ™•์ธ

    ํšŒ์› ์ •๋ณด ์ˆ˜์ • ์š”์ฒญ ํ—ค๋”์— ํ† ํฐ ์ธ์ฆ ์ •๋ณด ์ถ”๊ฐ€

    • Collections > Open Market API > ํšŒ์› ์ •๋ณด ์ˆ˜์ • > Authorization
      • Auth Type: Bearer Token
      • Token: {{accessToken}}
      • Send
      • ์ •์ƒ ์‘๋‹ต ๊ฒฐ๊ณผ ํ™•์ธ

    ์ปฌ๋ ‰์…˜๋‚ด์˜ ๋ชจ๋“  ์š”์ฒญ์— ํ† ํฐ ์ธ์ฆ ์ •๋ณด ์ถ”๊ฐ€

    • Collections > Open Market API > Authorization

      • Auth Type: Bearer Token
      • Token: {{accessToken}}
      • Ctrl + S ๋ˆŒ๋Ÿฌ์„œ ์ €์žฅ
    • ์•ž์— ํ๋ฆ„ ์„ค๋ช…

    • ๋กœ๊ทธ์ธ-์ธ์ฆ ๊ด€๋ฆฌ๊ธฐ๋Šฅ(์„ค๋ช…) (10์ดˆ๋™์•ˆ ๋กœ๊ทธ์ธ ์œ ์ง€)

    • ์ฐธ๊ณ ์‚ฌ์ดํŠธ

      https://fesp-api.koyeb.app/market/apidocs/

๐Ÿ“œ 01 Fetch API