swagger-type-generator์˜ ์ƒํ’ˆ ๋กœ๊ณ  ์ด๋ฏธ์ง€

swagger-type-generator

5.0(

ํ‰์  7๊ฐœ

)
ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ๊ฐœ๋ฐœ์ž ๋„๊ตฌ135 ์‚ฌ์šฉ์ž
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 4(์Šคํฌ๋ฆฐ์ƒท)
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 1(์Šคํฌ๋ฆฐ์ƒท)
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 2(์Šคํฌ๋ฆฐ์ƒท)
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 3(์Šคํฌ๋ฆฐ์ƒท)
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 4(์Šคํฌ๋ฆฐ์ƒท)
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 1(์Šคํฌ๋ฆฐ์ƒท)
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 1(์Šคํฌ๋ฆฐ์ƒท)
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 2(์Šคํฌ๋ฆฐ์ƒท)
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 3(์Šคํฌ๋ฆฐ์ƒท)
swagger-type-generator์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 4(์Šคํฌ๋ฆฐ์ƒท)

๊ฐœ์š”

swagger chrome extension generate typescript, axios, fetch code

1. Swagger UI์˜ ๊ฐœ์„ : ์ด ์ต์Šคํ…์…˜์€ Swagger UI๋ฅผ ์ข€ ๋” ์ง๊ด€์ ์ด๊ฒŒ ๋ณด์—ฌ ์ค๋‹ˆ๋‹ค. API ๋ฌธ์„œ๋ฅผ ๋” ๊ฐ€๋…์„ฑ ์žˆ๊ณ  ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ๋ฐฉ์‹์œผ๋กœ ํ‘œ์‹œํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๊ฐ€ API๋ฅผ ๋” ์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. 2. API ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ: ์ต์Šคํ…์…˜์€ API๋ฅผ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋Š” ํŠน์ • API๋‚˜ Endpoint๋ฅผ ๋น ๋ฅด๊ฒŒ ์ฐพ์•„๋ณผ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๋ฅผ ํ†ตํ•ด ์›ํ•˜๋Š” API์— ๋น ๋ฅด๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 3. Type Generator: JSON ํ™•์žฅ ํ˜•์‹์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์—ฌ API ์‘๋‹ต ๋ฐ์ดํ„ฐ์˜ ํƒ€์ž…์„ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•ด์ค๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋Š” ์‘๋‹ต ๋ฐ์ดํ„ฐ๋ฅผ ์‰ฝ๊ฒŒ ๋ถ„์„ํ•˜๊ณ  ํƒ€์ž… ์ •์˜๋ฅผ ์ž‘์„ฑํ•  ํ•„์š” ์—†์ด, ์ž๋™์œผ๋กœ ์ƒ์„ฑ๋œ ํƒ€์ž…์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 4. Axios๋ฅผ ์ด์šฉํ•œ API Code Generator: Axios๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ API ํ˜ธ์ถœ์„ ์œ„ํ•œ ์ฝ”๋“œ๋ฅผ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•ด์ค๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋Š” API ์š”์ฒญ์„ ๋ณด๋‹ค ๊ฐ„ํŽธํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ผ๊ด€๋œ ์ฝ”๋“œ ์Šคํƒ€์ผ๊ณผ ๊ตฌ์กฐ๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 5. fetch๋ฅผ ์ด์šฉํ•œ API Code Generator: fetch API๋ฅผ ํ™œ์šฉํ•˜์—ฌ API ํ˜ธ์ถœ์„ ์œ„ํ•œ ์ฝ”๋“œ๋ฅผ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•ด์ค๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋Š” fetch๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ API ์š”์ฒญ์„ ๋ณด๋‹ค ๊ฐ„๊ฒฐํ•˜๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, axios์™€ ํ•จ๊ป˜ ์„ ํƒ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 6. React Query ์ฝ”๋“œ ์ƒ์„ฑ : axios, fetch ๊ธฐ๋ฐ˜์œผ๋กœ React Query ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•ด ์ค๋‹ˆ๋‹ค. 7. ์ˆœ์ฐจ API ํ…Œ์ŠคํŠธ ๊ธฐ๋Šฅ ์ œ๊ณต : ์‹œ๋‚˜๋ฆฌ์˜ค ๋ณ„๋กœ ์ˆœ์ฐจ API ํ…Œ์ŠคํŠธ ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์„ธ๋ถ€์ •๋ณด

  • ๋ฒ„์ „
    1.2.2
  • ์—…๋ฐ์ดํŠธ๋จ
    2024๋…„ 1์›” 8์ผ
  • ์ œ๊ณต
    wshmin1234
  • ํฌ๊ธฐ
    482KiB
  • ์–ธ์–ด
    ์–ธ์–ด 2๊ฐœ
  • ๊ฐœ๋ฐœ์ž
    ์ด๋ฉ”์ผ
    wshmin1234@gmail.com
  • ๋น„ํŒ๋งค์ž
    ํŒ๋งค์ž๋กœ ์‹๋ณ„๋˜์ง€ ์•Š์€ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค. ์œ ๋Ÿฝ ์—ฐํ•ฉ์— ๊ฑฐ์ฃผํ•˜๋Š” ์†Œ๋น„์ž์˜ ๊ฒฝ์šฐ, ์ด ๊ฐœ๋ฐœ์ž์™€ ์ฒด๊ฒฐํ•œ ๊ณ„์•ฝ์— ๋Œ€ํ•ด์„œ๋Š” ์†Œ๋น„์ž ๊ถŒ๋ฆฌ๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Œ์„ ์œ ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ์ธ์ •๋ณด ๋ณดํ˜ธ

ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์„ ๊ด€๋ฆฌํ•˜๊ณ  ์กฐ์ง์—์„œ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ด ์‚ฌ์šฉ๋˜๋Š” ๋ฐฉ์‹์„ ์•Œ์•„๋ณด์„ธ์š”.
๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ฒ ๋‹ค๊ณ  ๋ช…์‹œํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์šฉ์ž ๋ฐ์ดํ„ฐ์— ๊ด€ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ ์–ธํ–ˆ์Šต๋‹ˆ๋‹ค

  • ์Šน์ธ๋œ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์ œ์™ธํ•˜๊ณ  ์„œ๋“œ ํŒŒํ‹ฐ์— ํŒ๋งคํ•˜์ง€ ์•Š์Œ
  • ํ•ญ๋ชฉ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ๊ณผ ๊ด€๋ จ ์—†๋Š” ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ „์†กํ•˜์ง€ ์•Š์Œ
  • ์‹ ์šฉ๋„ ํŒ๋‹จ ๋˜๋Š” ๋Œ€์ถœ ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ „์†กํ•˜์ง€ ์•Š์Œ

์ง€์›

์งˆ๋ฌธ, ์ œ์•ˆ ๋˜๋Š” ๋ฌธ์ œ์™€ ๊ด€๋ จํ•˜์—ฌ ๋„์›€์ด ํ•„์š”ํ•˜์‹œ๋ฉด ๊ฐœ๋ฐœ์ž์˜ ์ง€์› ์‚ฌ์ดํŠธ๋ฅผ ๋ฐฉ๋ฌธํ•˜์„ธ์š”.

Google ์•ฑ