๐Ÿ’ก JSON ์ด๋ž€?

์–‘์ฃผ์˜ยท2021๋…„ 9์›” 19์ผ
0

javascript

๋ชฉ๋ก ๋ณด๊ธฐ
24/42

1๏ธโƒฃ JSON ์ด๋ž€?


  • JavaScript Object Notation์˜ ์•ฝ์ž์ด๋‹ค.

  • ์ข€ ๋” ์‰ฝ๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตํ™˜ํ•˜๊ณ  ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ํ…์ŠคํŠธ ๊ธฐ๋ฐ˜์˜ ๋ฐ์ดํ„ฐ ๊ตํ™˜ ํ‘œ์ค€์ด๋‹ค.

  • ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•  ๋•Œ ์ผ๋ฐ˜์ ์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค. ( ์„œ๋ฒ„์—์„œ ํด๋ผ์ด์–ธํŠธ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜์—ฌ ํ‘œํ˜„ํ•˜๊ฑฐ๋‚˜ ๋ฐ˜๋Œ€์˜ ๊ฒฝ์šฐ)



2๏ธโƒฃ JSON ํŠน์ง•


  • JSON์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด ํ‘œ๊ธฐ๋ฒ•์„ ๋”ฐ๋ฅธ๋‹ค.

  • JSON์€ ๊ฒฝ๋Ÿ‰์˜ DATA-๊ตํ™˜ ํ˜•์‹์ด๋‹ค.

  • ์„œ๋ฒ„์™€ ํด๋ผ์ด์–ธํŠธ ๊ฐ„์˜ ๊ต๋ฅ˜์—์„œ ์ผ๋ฐ˜์ ์œผ๋กœ ๋งŽ์ด ์‚ฌ์šฉ๋œ๋‹ค.

  • JSON์€ ์‚ฌ๋žŒ๊ณผ ๊ธฐ๊ณ„๊ฐ€ ๋ชจ๋‘ ์ฝ๊ธฐ ํŽธํ•˜๋„๋ก ๊ณ ์•ˆ๋˜์—ˆ๋‹ค.
    - JSON ํ‘œํ˜„์‹์€ ์‚ฌ๋žŒ๊ณผ ๊ธฐ๊ณ„ ๋ชจ๋‘ ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šฐ๋ฉฐ ์šฉ๋Ÿ‰์ด ์ž‘์•„์„œ, ์ตœ๊ทผ์—๋Š” JSON์ด XML์„ ๋Œ€์ฒดํ•ด์„œ ๋ฐ์ดํ„ฐ ์ „์†ก ๋“ฑ์— ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค.

  • JSON์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์™€ ์šด์˜์ฒด์ œ์— ๋…๋ฆฝ์ ์ด๋‹ค.
    - ํŠน์ • ์–ธ์–ด์— ์ข…์†๋˜์ง€ ์•Š์œผ๋ฉฐ, ๋Œ€๋ถ€๋ถ„์˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ JSON ํฌ๋งท์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ•ธ๋“ค๋ง ํ•  ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ œ๊ณตํ•œ๋‹ค.



3๏ธโƒฃ JSON ๋ฌธ๋ฒ•


  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด ํ‘œ๊ธฐ๋ฒ•์—์„œ ๋ฆฌํ„ฐ๋Ÿด(literal)๊ณผ ํ”„๋กœํผํ‹ฐ(property)๋ฅผ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•๋งŒ ๊ฐ€์ ธ์™€์„œ ์‚ฌ์šฉํ•œ๋‹ค. ๋”ฐ๋ผ์„œ JSON ๋ฐ์ดํ„ฐ๋Š” ๋ชจ์–‘๊ณผ ๊ทœ์น™์ด ๋งค์šฐ ๋‹จ์ˆœํ•˜๋‹ค.

2-1. name-value ํ˜•์‹์˜ ์Œ(pair)

  • ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์–ธ์–ด๋“ค์—์„œ object, hashtable, struct๋กœ ์‹คํ˜„๋˜์—ˆ๋‹ค.
  • {String key : String Value }
{
  "firstName": "Cherry",
  "lastName": "Yang",
  "email": "cherryYang@cherry.com"
}

2-2. ๊ฐ’๋“ค์˜ ์ˆœ์„œํ™”๋œ ๋ฆฌ์ŠคํŠธ ํ˜•์‹

  • ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์–ธ์–ด๋“ค์—์„œ ๋ฐฐ์—ด(Array), ๋ฆฌ์ŠคํŠธ(List)๋กœ ์‹คํ˜„๋˜์—ˆ๋‹ค.
  • [value1, value2, ....]
{
  "firstName": "Cherry",
  "lastName": "Yang",
  "email": "cherryYang@cherry.com",
  "hobby": ["swimming","walking"]
}


4๏ธโƒฃ JSON ํ˜•์‹ ํ…์ŠคํŠธ๋ฅผ JavaScript Object๋กœ ๋ณ€ํ™˜ํ•˜๊ธฐ


var jsonText = '{ "name": "Someone else", "lastName": "Kim" }';  // JSON ํ˜•์‹์˜ ๋ฌธ์ž์—ด
var realObject = JSON.parse(jsonText);
var jsonText2 = JSON.stringify(realObject);

console.log(realObject);
console.log(jsonText2);

  • JSON.parse(JSON์œผ๋กœ ๋ณ€ํ™˜ํ•  ๋ฌธ์ž์—ด) : JSON ํ˜•์‹์˜ ํ…์ŠคํŠธ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค.
  • JSON.stringify(JSON ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•  ๊ฐ’) : ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋ฅผ JSON ํ…์ŠคํŠธ๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค.

๐Ÿ’ก ํŒŒ์‹ฑ(Parsing) : ๋ฌธ์ž์—ด์—์„œ ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ฒƒ. ๋„คํŠธ์›Œํฌ๋ฅผ ํ†ตํ•ด ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๊ฒŒ ๊ฐ์ฒด๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •์€ ๋ฌธ์ž์—ดํ™”(Stringification)์ด๋ผ๊ณ  ํ•œ๋‹ค.



5๏ธโƒฃ ๊ณ ๋ คํ•ด์•ผํ•  ์ 


AJAX ๋Š” ๋‹จ์ˆœํžˆ ๋ฐ์ดํ„ฐ๋งŒ์ด ์•„๋‹ˆ๋ผ JavaScript ๊ทธ ์ž์ฒด๋„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ๋ง์€ JSON๋ฐ์ดํ„ฐ๋ผ๊ณ  ํ•ด์„œ ๋ฐ›์•˜๋Š”๋ฐ ๋‹จ์ˆœ ๋ฐ์ดํ„ฐ๊ฐ€ ์•„๋‹ˆ๋ผ JavaScript๊ฐ€ ๋  ์ˆ˜๋„ ์žˆ๊ณ , ๊ทธ๊ฒŒ ์‹คํ–‰ ๋  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. (๋ฐ์ดํ„ฐ์ธ ์ค„ ์•Œ๊ณ  ๋ฐ›์•˜๋Š”๋ฐ ์•…์„ฑ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋  ์ˆ˜ ์žˆ๋‹ค.)

์œ„์™€ ๊ฐ™์€ ์ด์œ ๋กœ ๋ฐ›์€ ๋‚ด์šฉ์—์„œ ์ˆœ์ˆ˜ํ•˜๊ฒŒ ๋ฐ์ดํ„ฐ๋งŒ ์ถ”์ถœํ•˜๊ธฐ ์œ„ํ•œ JSON ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋”ฐ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•œ๋‹ค.





์ฐธ์กฐ >
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON
http://tcpschool.com/json/json_basic_syntax
https://nesoy.github.io/articles/2017-02/JSON
https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

profile
๋šœ๋ฒ…๋šœ๋ฒ…

0๊ฐœ์˜ ๋Œ“๊ธ€