ํ”„๋ŸฐํŠธ์—”๋“œ ์†Œํ”„ํŠธ์›จ์–ด ๊ฐœ๋ฐœ์˜ ๋งฅ๋ฝ์—์„œ ํ”„๋ŸฐํŠธ์—”๋“œ ์›น API๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊ณผ ๋‹ค์–‘ํ•œ ์›น ์„œ๋น„์Šค, ๋ฆฌ์†Œ์Šค ๋˜๋Š” ์™ธ๋ถ€ ์‹œ์Šคํ…œ ๊ฐ„์˜ ์›ํ™œํ•œ ์ƒํ˜ธ ์ž‘์šฉ์„ ์ด‰์ง„ํ•˜๋Š” ์‚ฌ์ „ ์ •์˜๋œ ๊ธฐ๋Šฅ, ๋ฐฉ๋ฒ•, ํ”„๋กœํ† ์ฝœ ๋ฐ ๋„๊ตฌ ๋ชจ์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ฐœ๋ฐœ์ž๋Š” ๊ธฐ๋ณธ ๊ตฌํ˜„์ด๋‚˜ ๋ฌธ์ œ์˜ ์‹œ์Šคํ…œ ๋ณต์žก์„ฑ์— ๋Œ€ํ•œ ์‹ฌ์ธต์ ์ธ ์ดํ•ด ์—†์ด๋„ ์ž˜ ๋ฌธ์„œํ™”๋œ ์ง„์ž…์  ์„ธํŠธ๋ฅผ ๋…ธ์ถœํ•˜์—ฌ ํŠน์ • ๊ธฐ๋Šฅ์ด๋‚˜ ๋ฐ์ดํ„ฐ์— ์•ก์„ธ์Šคํ•˜๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ”„๋ŸฐํŠธ์—”๋“œ ์›น API๋ฅผ ํ™œ์šฉํ•จ์œผ๋กœ์จ ์›น ๊ฐœ๋ฐœ์ž๋Š” DOM ์กฐ์ž‘, ์„œ๋ฒ„ ์ธก API์™€์˜ ํ†ต์‹ , ์œ„์น˜ ์ •๋ณด, ์›น ์ €์žฅ์†Œ, ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ๊ธฐ๋Šฅ ๋ฐ ์‹ค์‹œ๊ฐ„ ์—…๋ฐ์ดํŠธ๋ฅผ ํฌํ•จํ•˜๋˜ ์ด์— ๊ตญํ•œ๋˜์ง€ ์•Š๋Š” ๊ด‘๋ฒ”์œ„ํ•œ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฐฑ์—”๋“œ, ์›น ๋ฐ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ์œ„ํ•ด ์„ค๊ณ„๋œ no-code ํ”Œ๋žซํผ์ธ AppMaster ์‹œ๊ฐ์  ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๋ฐ ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง ๋””์ž์ด๋„ˆ๋ฅผ ํ†ตํ•ด ์›น API์™€ ์ƒํ˜ธ ์ž‘์šฉํ•˜๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ํฌ๊ด„์ ์ธ ๋„๊ตฌ ์„ธํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž๋Š” Vue.js, TypeScript ๋ฐ ๊ธฐํƒ€ ์ตœ์ฒจ๋‹จ ๊ธฐ์ˆ ๊ณผ ๊ฐ™์€ ์ตœ์‹  ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์ถ•๋œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‹ ์†ํ•˜๊ฒŒ ์ƒ์„ฑ, ํ…Œ์ŠคํŠธ ๋ฐ ๋ฐฐํฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. AppMaster ์˜ ํ”„๋ŸฐํŠธ์—”๋“œ ์›น API๋Š” ์—…๊ณ„ ํ‘œ์ค€๊ณผ ์ผ์น˜ํ•˜๋ฏ€๋กœ ์ƒ์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์„ฑ๋Šฅ, ๋ณด์•ˆ ๋ฐ ์ ‘๊ทผ์„ฑ์— ๋Œ€ํ•œ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ์ค€์ˆ˜ํ•˜๋ฉด์„œ ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ณด์žฅํ•ฉ๋‹ˆ๋‹ค.

ํ”„๋ŸฐํŠธ์—”๋“œ ์›น API๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์‘๋‹ต์„ฑ, ๋™์  ๋ฐ ๋Œ€ํ™”ํ˜• ๊ธฐ๋Šฅ์„ ํ–ฅ์ƒ์‹œ์ผœ ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ์—์„œ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. 2021๋…„ Stack Overflow์˜ ์กฐ์‚ฌ์— ๋”ฐ๋ฅด๋ฉด ์›น ๊ฐœ๋ฐœ์ž์˜ 75% ์ด์ƒ์ด ํด๋ผ์ด์–ธํŠธ ์ธก ์›น ๊ฐœ๋ฐœ์— ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ธ JavaScript๋ฅผ ํ™œ์šฉํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ์ด๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ํ”„๋ŸฐํŠธ์—”๋“œ ์›น API ์‚ฌ์šฉ์— ๋Œ€ํ•œ ์ˆ˜์š”๊ฐ€ ๋†’๋‹ค๋Š” ๊ฒƒ์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์ถ”์ƒํ™” ๊ณ„์ธต์„ ์ œ๊ณตํ•จ์œผ๋กœ์จ ์ด๋Ÿฌํ•œ API๋Š” ๊ฐœ๋ฐœ ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ๊ฐ„์†Œํ™”ํ•˜์—ฌ ๋ณด๋‹ค ํšจ์œจ์ ์ด๊ณ  ๋น„์šฉ ํšจ์œจ์ ์ธ ํ”„๋กœ์„ธ์Šค๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ ์›น API์˜ ์˜ˆ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • Fetch API: HTTP ์š”์ฒญ ๋ฐ ์‘๋‹ต์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ•๋ ฅํ•˜๊ณ  ์œ ์—ฐํ•œ ์ตœ์‹  API๋กœ, ์„œ๋ฒ„์—์„œ ๋ฆฌ์†Œ์Šค๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฐ„์†Œํ™”ํ•˜๊ณ  ์ด์ „ ๋ฒ„์ „์ธ XMLHttpRequest API์— ๋น„ํ•ด ํ–ฅ์ƒ๋œ ์˜ค๋ฅ˜ ์ฒ˜๋ฆฌ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
  • DOM(๋ฌธ์„œ ๊ฐœ์ฒด ๋ชจ๋ธ) API: ์›น ๊ฐœ๋ฐœ์˜ ํ•„์ˆ˜ ๊ตฌ์„ฑ ์š”์†Œ๋กœ, ๊ฐœ๋ฐœ์ž๊ฐ€ HTML ๋˜๋Š” XML ๋ฌธ์„œ ๋‚ด์˜ ๊ณ„์ธต ๊ตฌ์กฐ ๋ฐ ์š”์†Œ๋ฅผ ํƒ์ƒ‰, ์กฐ์ž‘ ๋ฐ ์ƒํ˜ธ ์ž‘์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ค๋‹ˆ๋‹ค.
  • Geolocation API: ์‚ฌ์šฉ์ž์˜ ์ง€๋ฆฌ์  ์œ„์น˜ ๋ฐ์ดํ„ฐ(๊ถŒํ•œ ํฌํ•จ)์— ๋Œ€ํ•œ ์•ก์„ธ์Šค๋ฅผ ์ œ๊ณตํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๊ฐ€ GPS, Wi-Fi ๋ฐ ๊ธฐํƒ€ ๋ฐ์ดํ„ฐ ์†Œ์Šค๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์œ„์น˜ ์ธ์‹ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
  • ์›น ์Šคํ† ๋ฆฌ์ง€ API: ํด๋ผ์ด์–ธํŠธ์ธก์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ณ  ๊ฒ€์ƒ‰ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ„๋‹จํ•˜๋ฉด์„œ๋„ ๊ฐ•๋ ฅํ•œ ๋ฉ”์ปค๋‹ˆ์ฆ˜์œผ๋กœ, ๊ฐœ๋ฐœ์ž๋Š” ์ด๋ฅผ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ € ์„ธ์…˜ ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์œ ์ง€ํ•˜๊ณ  ๋ณด๋‹ค ๋ฐ˜์‘์„ฑ์ด ๋›ฐ์–ด๋‚˜๊ณ  ๊ฐœ์ธํ™”๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค์–ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์›น ์•Œ๋ฆผ API: ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์‚ฌ์šฉ์ž ๋™์˜์— ๋”ฐ๋ผ ์ค‘์š”ํ•œ ์—…๋ฐ์ดํŠธ๋‚˜ ์ด๋ฒคํŠธ์— ๋Œ€ํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์•Œ๋ฆฌ๋Š” ํ‘ธ์‹œ ์•Œ๋ฆผ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ ํ”„๋ŸฐํŠธ์—”๋“œ ์›น API๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋‚ด ์™ธ๋ถ€ ๋ฐ ๋‚ด๋ถ€ ๋ชจ๋‘์—์„œ ๋‹ค์–‘ํ•œ ์‹œ์Šคํ…œ์ด๋‚˜ ๊ตฌ์„ฑ ์š”์†Œ ๊ฐ„์˜ ํ†ต์‹ ์„ ์ด‰์ง„ํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, ๊ฐœ๋ฐœ์ž๋Š” WebSockets API๋ฅผ ํ™œ์šฉํ•˜์—ฌ ํด๋ผ์ด์–ธํŠธ์™€ ์„œ๋ฒ„ ๊ฐ„์˜ ์‹ค์‹œ๊ฐ„ ์–‘๋ฐฉํ–ฅ ํ†ต์‹  ์ฑ„๋„์„ ๊ตฌ์ถ•ํ•˜์—ฌ ์‘๋‹ต์„ฑ์ด ๋›ฐ์–ด๋‚˜๊ณ  ๋งค๋ ฅ์ ์ธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ CORS(Cross-Origin Resource Sharing)์™€ ๊ฐ™์€ ์ƒํ˜ธ ์šด์šฉ์„ฑ ๋ฌธ์ œ๋Š” CORS API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํšจ๊ณผ์ ์œผ๋กœ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. CORS API๋Š” ๋„๋ฉ”์ธ ์ „์ฒด์—์„œ ๋ฆฌ์†Œ์Šค๋ฅผ ์š”์ฒญํ•˜๋Š” ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๊ณ  ๋ณดํ˜ธํ•ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ PWA(ํ”„๋กœ๊ทธ๋ ˆ์‹œ๋ธŒ ์›น ์•ฑ)์˜ ์ถœํ˜„์œผ๋กœ ์ฐจ์„ธ๋Œ€ ํ”„๋ŸฐํŠธ์—”๋“œ ์›น API๊ฐ€ ๋“ฑ์žฅํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋„ค์ดํ‹ฐ๋ธŒ์™€ ์œ ์‚ฌํ•œ ํ™˜๊ฒฝ์œผ๋กœ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์„œ๋น„์Šค ์›Œ์ปค, ํ‘ธ์‹œ API ๋ฐ ๋ฐฑ๊ทธ๋ผ์šด๋“œ ๋™๊ธฐํ™” API๋Š” ๊ธฐ์กด ์›น๊ณผ ๊ธฐ๋ณธ ๋ชจ๋ฐ”์ผ ์•ฑ ๊ฐ„์˜ ๊ฒฉ์ฐจ๋ฅผ ํ•ด์†Œํ•˜๋Š” ์˜คํ”„๋ผ์ธ ๊ฐ€๋Šฅ, ๊ณ ์„ฑ๋Šฅ ๋ฐ ์„ค์น˜ ๊ฐ€๋Šฅํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์ˆ ์˜ ์˜ˆ์ž…๋‹ˆ๋‹ค.

๊ฒฐ๋ก ์ ์œผ๋กœ, ํ”„๋ŸฐํŠธ์—”๋“œ ์›น API๋Š” ์›น ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ํฌ๊ฒŒ ๊ฐ•ํ™”ํ–ˆ์œผ๋ฉฐ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ƒ๋Œ€์ ์œผ๋กœ ์‰ฝ๊ฒŒ ๋ชฐ์ž…๊ฐ ์žˆ๊ณ  ์œ ์—ฐํ•˜๋ฉฐ ๋งค๋ ฅ์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ–ˆ์Šต๋‹ˆ๋‹ค. AppMaster ์˜ no-code ํ”Œ๋žซํผ์€ ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ, ํ”„๋ ˆ์ž„์›Œํฌ ๋ฐ ์ƒ์„ฑ๋œ ์†Œ์Šค ์ฝ”๋“œ ์„ธํŠธ์™€ ํ•จ๊ป˜ ์ด๋Ÿฌํ•œ API๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๊ธฐ์—…๊ณผ ๊ธฐ์—…์ด ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋ฉฐ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‹ ์†ํ•˜๊ฒŒ ๊ฐœ๋ฐœ ๋ฐ ๋ฐฐํฌํ•˜์—ฌ ๊ฒฝ์Ÿ ์šฐ์œ„๋ฅผ ํ™•๋ณดํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ์ง„ํ™”ํ•˜๋Š” ๋””์ง€ํ„ธ ํ™˜๊ฒฝ์—์„œ.