๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
์‹œ๋„/Code-States

[D+17] JSON์— ๋Œ€ํ•ด์„œ (feat. ๐Ÿ˜ฟ)

by ๐Ÿ‡๋ฐ•๋ด‰๋ด‰๐Ÿ‡ 2020. 9. 23.

 

D+17

-  JSON -

(JSON)

 


 

 

JSON (JavaScript Object Notation)

•๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ฑฐ๋‚˜ ์ „์†กํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉ (๊ฒฝ๋Ÿ‰ ๋ฐ์ดํ„ฐ ๊ตํ™˜ ํ˜•์‹)

 

•JavaScript ๊ฐ์ฒด ํ‘œ๊ธฐ๋ฒ•

 

•๋…๋ฆฝ์  ์–ธ์–ด

 

 

JSON์„ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

•JSON ํ‘œํ˜„์‹์ด ์‚ฌ๋žŒ๊ณผ ๊ธฐ๊ณ„๊ฐ€ ๋ชจ๋‘ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๊ณ  ์šฉ๋Ÿ‰์ด ์ ์–ด์„œ xml์„ ๋Œ€์ฒดํ•ด ๋ฐ์ดํ„ฐ ์ „์†ก์— ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค.

 

•JSONํ˜•์‹์˜ ๋ฌธ์„œ๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

•๋…๋ฆฝ์ ์ธ ์–ธ์–ด์ด๊ธฐ ๋•Œ๋ฌธ์— ๋Œ€๋ถ€๋ถ„์ด ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ์œ ์—ฐํ•˜๊ฒŒ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

(JSON ํฌ๋งท์˜ ๋ฐ์ดํ„ฐ๋ฅผ ํ•ธ๋“ค๋งํ•  ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ œ๊ณต)

 

 

JSON ๋ฌธ๋ฒ•

{
  "list": [
    {
      "firstName": "Gaga",
      "lastName": "Park"
    },
    {
      "firstName": "Nana",
      "lastName": "Kim"
    },
    {
      "firstName": "Dada",
      "lastName": "Joo"
    } 
  ]
}

JSON ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•  ๋•Œ์—๋Š” key๊ฐ’๊ณผ value๊ฐ’์€ ์Œ ๋”ฐ์˜ดํ‘œ๋ฅผ ์ด์šฉํ•ด์„œ ์‚ฌ์šฉํ•ด ์ค˜์•ผ ํ•œ๋‹ค.

 

๋˜ํ•œ null, number, array, object, boolean์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.

 

 


 

 

์ „๋‚ ์— ๋ฐฐ์šด DOM์„ ํ™œ์šฉํ•ด์„œ

ํŽ˜์–ด๋ถ„๊ณผ ์ „์— ์ž‘์„ฑํ•œ ๋ชฉ์—… ํŽ˜์ด์ง€์— ์ถ”๊ฐ€์ ์ธ ๊ธฐ๋Šฅ๋“ค์„ ์ž…๋ ฅํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋‹ค.

 

๊ทธ๋Ÿฐ๋ฐ DOM์—์„œ ์š”์†Œ๋“ค์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์กฐํšŒํ•˜๋Š” ๊ฒƒ๋“ค์„ ํ•˜๋‚˜ํ•˜๋‚˜ ๋”ฐ์ ธ ๋ณด์•˜์„ ๋•Œ์—๋Š”

๊ฐ์ž ์–ด๋–ค ์—ญํ• ์„ ํ•˜๋Š”์ง€ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ๊ทธ๋ฆฌ ์–ด๋ ต์ง€ ์•Š์•˜๋Š”๋ฐ

 

๋ง‰์ƒ ์กฐ๊ฑด์„ ๋„ฃ์–ด ํ™œ์šฉํ•˜๋ ค ํ•˜๋‹ˆ ์ž˜ ๋˜์ง€ ์•Š์•„์„œ ๋„ˆ๋ฌด ๋ง‰๋ง‰ํ–ˆ๋‹ค. ๐Ÿ™€

 

๊ทธ๋ฆฌ๊ณ  ๊ณผ์ œ๋ฅผ ์ง„ํ–‰ํ•  ๋•Œ ๋ชฉ์—… ํŽ˜์ด์ง€๋ฅผ ์ž‘์„ฑํ•  ๋•Œ์˜ ์ ๊ทน์ ์ธ ๋‚ด ๋ชจ์Šต์€ ์˜จ๋ฐ๊ฐ„๋ฐ์—†์ด ์‚ฌ๋ผ์กŒ๊ณ 

๊ธฐ๋ณธ ๊ฐœ๋…์„ ์ˆ˜๋„ ์—†์ด ๋“ค์—ฌ๋‹ค๋ณด๊ธฐ๋งŒ ํ•ด์„œ ํŽ˜์–ด๋ถ„์—๊ฒŒ ๋„ˆ๋ฌด ์ฃ„์†กํ–ˆ๋‹ค.

 

์ •๋ง ํ˜„์ง์—์„  ์ด๋Ÿฐ ์ผ์„ ํ•  ํ…๋ฐ ๊ฑด๋“œ๋ฆฌ์ง€๋„ ๋ชปํ•˜๋Š” ๋‚˜ ์ž์‹ ์ด ๋„ˆ๋ฌด๋‚˜ ๋ถ€๋„๋Ÿฌ์› ๋‹ค.

 

๊ทธ๋ž˜์„œ ํŽ˜์–ด๋ถ„๊ป˜ ๋ฏผํ๊ฐ€ ๋˜์ง€ ์•Š๋Š” ์„ ์—์„œ

๊ฐœ๋… ์ดํ•ด๊ฐ€ ๋ถ€์กฑํ•œ ๊ฒƒ ๊ฐ™์•„ ์ข€ ๋” ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ์˜ค๊ฒ ๋‹ค๊ณ  ํ–ˆ๋‹ค.

(๊ทธ๊ฑธ ๋˜ ์›ƒ์œผ์‹œ๋ฉด์„œ ์นœ์ ˆํžˆ ๋ฐ›์•„์ฃผ์‹  ํŽ˜์–ด๋‹˜ ์™„์ „ ๊ฐ“...โœจ)

 

 

์˜ค๋Š˜ ์™„์ „ ๋นก๊ณต ํ•˜๊ณ  ๋‚ด์ผ ํŽ˜์–ด๋ถ„๊ป˜ ์ œ๋ฐœ ๋ฏผํ๊ฐ€ ๋˜์งˆ ์•Š๊ธฐ๋ฅผ...

 

 

 

 

๋ฐ˜์‘ํ˜•

'์‹œ๋„ > Code-States' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[D+19] ๊ณ ์ฐจํ•จ์ˆ˜  (0) 2020.09.25
[D+18] ์—ฌ์ฐจ์ €์ฐจ ์ผ๋‹จ ์„ฑ๊ณต...  (0) 2020.09.24
[D+16] DOM  (0) 2020.09.22
[D+15] HTML / CSS  (0) 2020.09.21
[D+14] ๋‘˜์งธ ์ฃผ ํ›„๊ธฐ  (0) 2020.09.20

๋Œ“๊ธ€