[], {}, ()
๋๊ดํธ []
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๋ง ๋ฐ์์ค๊ธฐ
});