๐Ÿ’ฌ ETC..

Postman API Response ๊ฐ’์œผ๋กœ ์ด๋ฏธ์ง€ ์ถœ๋ ฅํ•˜๊ธฐ

iseunghan 2023. 2. 13. 23:23
๋ฐ˜์‘ํ˜•

Postman Visualize

๋ชฉํ‘œ๋Š” Postman API ์š”์ฒญ์„ ํ†ตํ•ด ์–ป์€ ์ด๋ฏธ์ง€์˜ ๋ฐ”์ดํŠธ ๊ฐ’์„ ๊ฐ€์ง€๊ณ  ์ •์ƒ์ ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์™”๋Š”์ง€ ์‹ค์ œ ์ด๋ฏธ์ง€๋ฅผ ๋„์›Œ๋ณด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. Postman Visualize๋ฅผ ์ด์šฉํ•ด์„œ ์ด๋ฏธ์ง€๋ฅผ ๋„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Postman Visualize๋ž€?

Postman Visualize API์™€ HTML, CSS, JS ๋“ฑ์„ ์ด์šฉํ•ด API response ๊ฐ’์„ ์‹œ๊ฐํ™”๋ฅผ ํ•  ์ˆ˜ ์žˆ๋Š” API์ž…๋‹ˆ๋‹ค.

์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐธ์กฐ ํ•ด์ฃผ์„ธ์š”. https://www.postman.com/api-visualizer/

API ์‘๋‹ต ์˜ˆ์‹œ

{
    "data": "/9j/4AAQSkZJRgABAgAAAQABAAD..."
    ...
}

Visualize ์ž‘์„ฑ

 Tests ํƒญ์œผ๋กœ ์ด๋™ํ•ด์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ์ž‘์„ฑํ•ด์ค๋‹ˆ๋‹ค.

var template = `<img src='{{img}}' />`;

pm.visualizer.set(template, {
    img: `data:image/jpeg;base64, ${pm.response.json().data}`
});

๊ฒฐ๊ณผ

 ์ •์ƒ์ ์œผ๋กœ ๋‚˜์˜ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค!

๋งˆ๋ฌด๋ฆฌ

๊ฐ„๋‹จํ•˜๊ฒŒ ์ด๋ฏธ์ง€๋ฅผ ๋„์›Œ๋ณด๋Š” ๊ฒƒ๋งŒ ํ•ด๋ดค์ง€๋งŒ, chart.js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•ด์„œ API response์— ํŠน์„ฑ์— ๋งž๊ฒŒ ์—ฌ๋Ÿฌ ๋ฐฉ๋ฒ•์œผ๋กœ ์‹œ๊ฐํ™”๋ฅผ ํ•ด๋ณผ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜•