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

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

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

์›น์‚ฌ์ดํŠธ ๊ฐœ๋ฐœ์˜ ๋งฅ๋ฝ์—์„œ JSON์€ RESTful API๋กœ ์•Œ๋ ค์ง„ ์ตœ์‹  ์›น ์•„ํ‚คํ…์ฒ˜์—์„œ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. RESTful(Representational State Transfer) API๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ๋‹จ์ˆœํ•˜๊ณ  ์ƒํƒœ ๋น„์ €์žฅ์ด๋ฉฐ ์บ์‹œ ๊ฐ€๋Šฅํ•œ ์š”์ฒญ ๋ฐ ์‘๋‹ต์„ ์‚ฌ์šฉํ•˜์—ฌ HTTP๋ฅผ ํ†ตํ•ด ์„œ๋กœ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. JSON์€ ๋‹จ์ˆœ์„ฑ๊ณผ ํšจ์œจ์„ฑ์œผ๋กœ ์ธํ•ด RESTful API์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๊ณ  ๋ฐ›๋Š” ๋ฐ ์™„๋ฒฝํ•˜๊ฒŒ ์ ํ•ฉํ•ฉ๋‹ˆ๋‹ค.

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

AppMaster JSON ๋ฐ์ดํ„ฐ์˜ ๊ตฌ์กฐ๋ฅผ ์ •์˜ํ•˜๊ณ  ๊ฒ€์ฆํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ•๋ ฅํ•œ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ธ JSON ์Šคํ‚ค๋งˆ ํ‘œ์ค€๋„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. JSON ์Šคํ‚ค๋งˆ๋ฅผ ํ†ตํ•ด ๊ฐœ๋ฐœ์ž๋Š” ํ•„์ˆ˜ ์†์„ฑ, ํ—ˆ์šฉ๋˜๋Š” ๊ฐ’, ๋ฐ์ดํ„ฐ ์œ ํ˜• ๋“ฑ ๋ฐ์ดํ„ฐ์— ๋Œ€ํ•œ ์ œ์•ฝ ์กฐ๊ฑด์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. AppMaster JSON ์Šคํ‚ค๋งˆ๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค ์ „๋ฐ˜์— ๊ฑธ์ณ ๋ฐ์ดํ„ฐ ์ผ๊ด€์„ฑ๊ณผ ๋ฌด๊ฒฐ์„ฑ์„ ๋ณด์žฅํ•˜๊ณ  ์„œ๋ฒ„ endpoints ์— ๋Œ€ํ•œ Swagger(OpenAPI) ๋ฌธ์„œ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

์›น ๊ฐœ๋ฐœ์—์„œ JSON์˜ ์ค‘์š”์„ฑ์ด ์ปค์ง€๊ณ  ์—…๊ณ„์—์„œ ํญ๋„“๊ฒŒ ์ฑ„ํƒ๋จ์— ๋”ฐ๋ผ JSON์„ ์ดํ•ดํ•˜๊ณ  ๊ทธ ๋ณต์žก์„ฑ์„ ์ตํžˆ๋Š” ๊ฒƒ์ด ์›น ๊ฐœ๋ฐœ์ž์™€ IT ์ „๋ฌธ๊ฐ€ ๋ชจ๋‘์—๊ฒŒ ํ•„์ˆ˜์ ์ธ ๊ธฐ์ˆ ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. AppMaster ํ”Œ๋žซํผ์€ JSON์— ๋Œ€ํ•œ ์›ํ™œํ•œ ์ง€์›์„ ์ œ๊ณตํ•จ์œผ๋กœ์จ ์‚ฌ์šฉ์ž๊ฐ€ ์ด ๊ฐ•๋ ฅํ•œ ๋ฐ์ดํ„ฐ ๊ตํ™˜ ํ˜•์‹์˜ ์ž ์žฌ๋ ฅ์„ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•˜๊ณ  ํšจ์œจ์ ์ด๊ณ  ์œ ์—ฐํ•˜๋ฉฐ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ JSON์˜ ์˜ˆ๋กœ RESTful API๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„์—์„œ ์ œํ’ˆ ๋ชฉ๋ก์„ ๊ฒ€์ƒ‰ํ•˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋‹ค์Œ ์‹œ๋‚˜๋ฆฌ์˜ค๋ฅผ ๊ณ ๋ คํ•ด ๋ณด์„ธ์š”. ๋จผ์ €, ์„œ๋ฒ„ ๋ฐฑ์—”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ œํ’ˆ์˜ JSON ํ‘œํ˜„์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

 {
  "์ œํ’ˆ": [
    {
      "ID": 1,
      "์ด๋ฆ„": "๋…ธํŠธ๋ถ",
      "๊ฐ€๊ฒฉ": 999.99
    },
    {
      "ID": 2,
      "์ด๋ฆ„": "์Šค๋งˆํŠธํฐ",
      "๊ฐ€๊ฒฉ": 499.99
    },
    {
      "ID": 3,
      "์ด๋ฆ„": "ํƒœ๋ธ”๋ฆฟ",
      "๊ฐ€๊ฒฉ": 299.99
    }
  ]
}

๋‹ค์Œ์œผ๋กœ ์›น ํ”„๋ŸฐํŠธ ์—”๋“œ๋Š” HTTP GET ์š”์ฒญ์„ ์„œ๋ฒ„์— ๋ณด๋ƒ…๋‹ˆ๋‹ค. ์„œ๋ฒ„๋Š” ์ œํ’ˆ ๋ชฉ๋ก์ด ํฌํ•จ๋œ JSON ๋ฐ์ดํ„ฐ๋กœ ์‘๋‹ตํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ํ”„๋ŸฐํŠธ ์—”๋“œ๋Š” JavaScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ JSON ๋ฐ์ดํ„ฐ๋ฅผ ๊ตฌ๋ฌธ ๋ถ„์„ํ•ฉ๋‹ˆ๋‹ค.

 const ์ œํ’ˆ = JSON.parse(response.data);

๋งˆ์ง€๋ง‰์œผ๋กœ ํ”„๋ŸฐํŠธ ์—”๋“œ๋Š” JSON ๋ฐ์ดํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•„์š”ํ•œ ๋งˆํฌ์—…์„ ์ƒ์„ฑํ•˜์—ฌ ํ…Œ์ด๋ธ”์ด๋‚˜ ๋ชฉ๋ก ๋ณด๊ธฐ์™€ ๊ฐ™์€ ์ ์ ˆํ•œ UI ์š”์†Œ์— ์ œํ’ˆ์„ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.

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