header-img
Info :
728x90

[], {}, ()

๋Œ€๊ด„ํ˜ธ []
1. list ๋‚˜์—ด ํ˜น์€ list ์ธ๋ฑ์Šค ์ง€์ • 
ex) list[0], list[1]

์ค‘๊ด„ํ˜ธ {}
1. dictionary ๋งŒ๋“ค๋•Œ {'key':'value'}
2. style tag ์ง€์ • ์‹œ
3. ํŠน์ • function์— ๋Œ€ํ•ด ์ •์˜ ํ•  ๋•Œ function test(){} ํ˜•์‹์ด ๋˜๊ฒ ์ฃ ..
4. for / if ๋“ฑ์˜ ๋ฌธ๋ฒ• ์ƒ ํ•„์š”ํ•  ๋•Œ

์†Œ๊ด„ํ˜ธ () 
1. for๋‚˜ if ๊ฐ™์€ ๋ฌธ๋ฒ•์— ์กฐ๊ฑด ์‹ ๋„ฃ์„ ๋•Œ


JSON (Javascript Object Notation)
๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•˜๊ฑฐ๋‚˜ ์ „์†กํ•  ๋•Œ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” "๊ฒฝ๋Ÿ‰" Data ๊ตํ™˜ ํ˜•์‹
์‰ฝ๊ฒŒ ๋งํ•ด์„œ javascript์—์„œ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ํ‘œํ˜„์‹์„ ์˜๋ฏธ
-- ์‚ฌ๋žŒ ๊ธฐ๊ณ„ ๋ชจ๋‘ ์ดํ•ดํ•˜๊ธฐ ์‰ฌ์šฐ๋ฉฐ ์šฉ๋Ÿ‰์ด ์ž‘์•„์„œ ๋ฐ์ดํ„ฐ ์ „์†ก์— ๋งŽ์ด ์“ฐ์ด๊ณ  ์žˆ์Œ
json์€ ๋ฐ์ดํ„ฐ ํฌ๋งท์ผ ๋ฟ
-- ์–ด๋– ํ•œ ํ†ต์‹  ๋ฐฉ๋ฒ•๋„, ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฌธ๋ฒ•๋„ ์•„๋‹Œ ๋‹จ์ˆœํžˆ ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ํ‘œํ˜„ ๋ฐฉ๋ฒ•

Extensible Markup Language(XML)
- ๋ฐ์ดํ„ฐ ๊ฐ’ ์–‘์ชฝ์— ํƒœ๊ทธ๊ฐ€ ์žˆ์–ด์š”..

<student>
<name> kimcoding </name>
<age> 10 </age>
</student>

json ๋ฌธ๋ฒ•
-- ์œ„์— ์ฒ˜๋Ÿผ ํƒœ๊ทธ๋กœ ํ‘œํ˜„ํ•˜๊ธฐ ๋ณด๋‹ค๋Š” ์ค‘๊ด„ํ˜ธ({}) ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ํ•˜๊ณ , ๊ฐ’์„ ','๋กœ ๋‚˜์—ดํ•œ๋‹ค
{
"student": [
{
"name": "kimcoding",
"age": "10"
},
{
"name": "parkstates",
"age": "15"
}
]
}


fetch ์—์„œ 
json.parse(๋ฐ์ดํ„ฐ)
๋ฐ์ดํ„ฐ.parse() ์ฐจ์ด

- fetch ๋Š” js์—์„œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณตํ•˜๋Š” ์ผ์ข…์˜ ๋ฌธ๋ฒ• ๊ฐ™์€ ๊ฑฐ์ž„
- fetch ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋‘ ๋‹จ๊ณ„๋ฅผ ๊ฑฐ์น˜๊ฒŒ ๋˜๋Š”๋ฐ 1. ํ•ด๋‹น url๋กœ ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  2. ๊ทธ ๋’ค์— ์˜ค๋Š” ์‘๋‹ต์— ๋Œ€ํ•ด json() ์„ ํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.
- ๋ฐ์ดํ„ฐ ์ „์ฒด๋ฅผ ๋ฐ›๋Š”๋ฐ์— ์‹œ๊ฐ„ ์†Œ์š” ๊ทธ ๋™์•ˆ promise ํ˜•ํƒœ๋กœ ๋ฐ์ดํ„ฐ ์ „๋ถ€ ๋‹ค ๋ฐ›๋Š” ๊ฑฐ ๊ธฐ๋‹ค๋ฆฌ๋ฉด์„œ ํŒŒ์‹ฑํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š”
 fetch ์—์„œ ์ง€์›ํ•˜๋Š” ๋ฌธ๋ฒ• ์œผ๋กœ ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.
 -- ์—ฌ๊ธฐ์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋Š” ์ŠคํŠธ๋ฆผ ํ˜•ํƒœ..์—ฌ์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ์™„์ „ํžˆ ๋‹ค ๋ฐ›์•„์ง„ ์ƒํƒœ๊ฐ€ ์•„๋‹˜. json()์€ ์ด ์ŠคํŠธ๋ฆผ์„ ๊ฐ€์ ธ์™€ ์ŠคํŠธ๋ฆผ์ด ์™„๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ์ฝ์„ ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ์ผ์ข…์˜ ๋ฐฉ๋ฒ•
 


json.parse() ํ˜•์‹์ด๋ž‘ ์œ ์‚ฌํ•ด๋ณด์ด์ง€๋งŒ fetch ์—์„œ๋Š” .parse() ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฑธ๋กœ ์ƒ๊ฐํ•˜๋ฉด ๋  ๊ฑฐ ๊ฐ™๊ณ 
json.parse() ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฑด ๋‚˜์ค‘์—~~ axios ๋ผ๋Š” ๋‹ค๋ฅธ api ๋ฐ›๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด.. ๊ทธ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ๋  ๊ฒƒ ๊ฐ™๋‹ค.

    fetch("./data.json")//jsonํŒŒ์ผ ์ฝ์–ด์˜ค๊ธฐ
    .then((response) => response.json())//์ฝ์–ด์˜จ ๋ฐ์ดํ„ฐ๋ฅผ json์œผ๋กœ ๋ณ€ํ™˜
    .then((json) => {
        data = json.items;//json์— ์žˆ๋Š” items๋งŒ ๋ฐ›์•„์˜ค๊ธฐ
    });

728x90
๋”๋ณด๊ธฐ
Document/๋จ•์„ ์ƒ์˜ ์ฝ”๋”ฉ๊ต์‹ค