HTTP
์น์ฌ์ดํธ์์ ์ฌ์ฉ๋๋ ๋งํฌ, ๋ฌธ์, ์ด๋ฏธ์ง
client -์๋ฒ
์๋ฒ์์ ๋ฐ์ดํฐ๋ฅผ request (์์ฒญ), response (์๋ต)ํ๋ ํต์ ๊ท์ฝ
AJAX (Asynchronous JS and XML)
์นํ์ด์ง์์ ๋ฐ์ดํฐ๋ฅผ ๋์ ์ผ๋ก ์๋ฒ์๊ฒ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ ๊ธฐ์
XHR (XML HTTP Request)
: ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ object
- XML
markup ์ธ์ด์ค ํ๋๋ก html๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ฐ์ดํฐ๋ฅผ ํํํ ์ ์๋ ๋ฐฉ๋ฒ
-> ๋ถํ์ํ ํ๊ทธ๋ค ๋ง์ด ๋ค์ด๊ฐ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง
- fetch() API
JSON (JS object Notation)
Object{ key:value}
: ๋ธ๋ผ์ฐ์ , ๋ชจ๋ฐ์ผ์์ ์๋ฒ์ ํต์ ํ ๋ , (ํต์ ์๋์ด๋)object๋ฅผ ํ์ผ์์คํ ์ ์ ์ฅํ ๋
- ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ ์์ฃผ ๊ฐ๋จํ data format
- ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์ ํ๋ซํผ์ ์๊ด์์ด ์ฌ์ฉ๊ฐ๋ฅ
์ํธ ๋ณํ ํ๋ฉฐ ๋ฐ์ดํฐ ์ ๋ฌ
Object ->json
JSON.stringify
jump๋ผ๋ ํจ์๋ ๋ณํ ์๋จ
const rabbit = {
name: 'tori'
date: new Date()
jump: () =>{
console.log(`${name} can jump`);
}
json =JSON.stringify(rabbit);
//{'name: 'tori'}
//key ๊ฐ name์ด๋ฉด 'tami'๋ผ๋ value๋ก ์ค์ ํ๊ณ ์๋๋ฉด ์๋ value
json= JSON.stringfy(rabbit, (key,value)=>{
console.log(`key: ${key}, value:${value}`);
return key==='name'? 'tami':value;
});
JSON -> Object
JSON>parse
json = JSON.stringfy(rabbit);
const obj = JSON.parse(json);
rabbit.junp() //๊ฐ๋ฅ
obj.jump() // ์์
rabbit.birthDate.getDate() // ๊ฐ๋ฅ
obj.birthDate // ๋ถ๊ฐ๋ฅ -> json object๋ก ๋ฐ๋๊ฒ์ string ํํ์ด๊ธฐ ๋๋ฌธ
const obj = JSON.parse(json, (key,value)=>{
return key==='birthDate'? new Date(value): value;
});
Json diff : http://www.jsondiff.com/โ J
์๋ฒ์๊ฒ ์์ฒญํ์๋ 1์จฐ,2์งธ ๋ฐ์์จ ๋ฐ์ดํฐ ๋น๊ต ๊ฐ๋ฅ
json Beautifier: https://jsonbeautifier.org/
๋ณต๋ถํ json format ๋ค์ ๋ณต๊ตฌ
json Parser : https://jsonparser.org/โ
json ํ์ผ object ํํ๋ก ํ์ธ
Json validator : https://tools.learningcontainer.com/j...
์ ํจํ json ๋ฐ์ดํฐ์ธ์ง ํ์ธ
์ฐธ๊ณ ํ ์์ : www.youtube.com/watch?v=FN_D4Ihs3LE
'๐ JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[์๋ฐ์คํฌ๋ฆฝํธ] fetch() API ํจ์๋ก ํธ์ถํ๊ธฐ (4) | 2021.02.26 |
---|---|
์๋ฐ์คํฌ๋ฆฝํธ์ Promise()๋ก callback์ง์ฅ ๋ฒ์ด๋๊ธฐ (0) | 2021.02.25 |
Node.JS express๋ก ์๋ฒ ๊ตฌ์ฑํ๊ธฐ (5) | 2021.02.23 |
์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ์ฒด (0) | 2021.02.22 |
์ด๋ฒคํธ ๋ฒ๋ธ๋ง, ์ด๋ฒคํธ ์บก์ณ๋ง - DOM์ ์ด๋ฒคํธ ํธ๋ค๋ง (0) | 2021.02.22 |
๋๊ธ