Ajax๋?
Ajax๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํด ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ฒ์๊ฒ ๋น๋๊ธฐ ๋ฐฉ์์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ , ์๋ฒ๊ฐ ์๋ตํ ๋ฐ์ดํฐ๋ฅผ ์์ ํ์ฌ ์นํ์ด์ง๋ฅผ ๋์ ์ผ๋ก ๊ฐฑ์ ํ๋ ํ๋ก๊ทธ๋๋ฐ ๋ฐฉ์์ด๋ค.
Ajax๋ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ๋ฉฐ, http ๋น๋๊ธฐ ํต์ ์ ์ํ ๋ฉ์๋์ ํ๋กํผํฐ๋ฅผ ์ ๊ณตํ๋ค.
์ ํต์ ์ธ ์นํ์ด์ง์ ์๋ช ์ฃผ๊ธฐ
์์ ์ ์นํ์ด์ง๋ ์์ ํ html ํ๊ทธ๋ก ๊ฐ์ธ์ง html ํ์ผ์ ์๋ฒ๋ก๋ถํฐ ์ ์ก๋ฐ์ ์นํ์ด์ง ์ ์ฒด๋ฅผ ์ฒ์๋ถํฐ ๋ค์ ๋๋๋ง ํ๋ ๋ฐฉ์์ผ๋ก ๋์ํ๋ค. ๋ฐ๋ผ์ ํด๋ผ์ด์ธํธ๊ฐ ํ๋ฉด์ ํ์ ์์ฒญํ๋ฉด, ์๋ฒ๋ก๋ถํฐ ์๋ก์ด html์ ์ ์ก๋ฐ์ ์นํ์ด์ง ์ ์ฒด๋ฅผ ๋ค์ ์๋ก๊ณ ์นจ ํด์ผํ๋ค.
์์ ๊ฐ์ด ๋์ํ๋ฉด ์ด๋ค ๋จ์ ์ด ์์๊น?
1. ๋ณ๊ฒฝ๋ ํ์๊ฐ ์๋ ๋ถ๋ถ๊น์ง ๋งค๋ฒ ์๋ฒ๋ก๋ถํฐ ์ฌ์ ์ก ๋ฐ๊ธฐ๋๋ฌธ์ ๋ถํ์ํ ๋ฐ์ดํฐ ํต์ ์ด ๋ฐ์ํ๋ค.
2. ํ๋ฉด์ ํ์ด ์ผ์ด๋๋ฉด, ํ๋ฉด์ด ์๊ฐ์ ์ผ๋ก ๊น๋ฐ์ด๋ ํ์์ด ๋ฐ์. ์ด๊ฒ๋ ๋ถํ์ํ ํ์์ด๋ค.
3. ํด๋ผ์ด์ธํธ์ ์๋ฒ์์ ํต์ ์ด ๋๊ธฐ๋ฐฉ์์ผ๋ก ๋์ํ๊ธฐ ๋๋ฌธ์, ์๋ฒ๋ก๋ถํฐ ์๋ต์ด ์์๋๊น์ง ๋ค์ ์ฒ๋ฆฌ๋ ๋ธ๋กํน๋๋ค.
์ด๋ฅผ ๊ฐ์ ํ๊ธฐ ์ํด ๋ฑ์ฅํ Ajax ๋๋ถ์, ์๋ฒ๋ก๋ถํฐ ์นํ์ด์ง์ ๋ณ๊ฒฝ์ ํ์ํ ๋ฐ์ดํฐ๋ง ๋น๋๊ธฐ๋ฐฉ์์ผ๋ก ์ ์ก๋ฐ์, ๋ณ๊ฒฝํ๊ณ ์ถ์ ๋ถ๋ถ๋ง ํ์ ์ ์ผ๋ก ๋ ๋๋ง์ด ๊ฐ๋ฅํด์ก๋ค.
Ajax ๋๋ถ์ ๋ธ๋ผ์ฐ์ ์์๋ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ์ ์ฌํ ๋น ๋ฅธ ํผํฌ๋จผ์ค์ ๋ถ๋๋ฌ์ด ํ๋ฉด์ ํ์ด ๊ฐ๋ฅํด์ง ๊ฒ์ด๋ค.
Ajax ํต์ ์๋ช ์ฃผ๊ธฐ
Ajax๋ ๋น๋๊ธฐ ํต์ ๋ฐฉ์์ด๋ค. ๋ฐ๋ผ์ ์๋ก์ด ์์ฒญ์ Ajax๋ก ์์ฒญํ๋ฉด, ์๋ฒ๋ก๋ถํฐ ํ์ํ ๋ฐ์ดํฐ๋ง ์ ์ก๋ฐ๊ธฐ ๋๋ฌธ์ ๋ถํ์ํ ๋ฐ์ดํฐํต์ ์ด ๋ฐ์ํ์ง ์๋๋ค.
JSON์ด๋, ํด๋ผ์ด์ธํธ์ ์๋ฒ๊ฐ์ http ํต์ ์ ๋๋ ๋ฐ์ดํฐ ํฌ๋งท์ด๋ค. JSON์ ํด๋ผ์ด์ธํธ๊ฐ ์์ฒญํ๋ ๊ฐ์ฒด๋ฅผ serializeํด์ {key: value} ํ์ ์ string์ผ๋ก ๋ง๋ค๊ณ , ์๋ฒ์ ํต์ ํ๋๋ฐ ์ด์ฉํ๋ค์ deserialize๋ฅผ ๊ฑฐ์ณ ๋ค์ ๊ฐ์ฒด๋ก ๋ณํํด ํด๋ผ์ด์ธํธ์ ์ํ๋ ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ์ฌ ๋ธ๋ผ์ฐ์ ์ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ด๋ค.
JSON.stringify()
JSON์๋ ๋๊ฐ์ง ๋ฉ์๋๊ฐ ์กด์ฌํ๋ค. ๋จผ์ , stringify()๋ ๊ฐ์ฒด๋ฅผ JSON ํฌ๋งท์ ๋ฌธ์์ด๋ก ๋ณํํ๋ค. ํด๋ผ์ด์ธํธ๊ฐ ์๋ฒ๋ก ๊ฐ์ฒด๋ฅผ ์ ์กํ๋ ค๋ฉด ๊ฐ์ฒด๋ฅผ ๋ฌธ์์ดํ ํด์ผํ๋๋ฐ, ์ด๋ฅผ serializing ์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
// 1. Object to JSON
// stringify(obj)
const obj = {
name: 'Kim',
age: 20,
alive: true,
hobby: ['traveling', 'tennis']
};
// obj ๊ฐ์ฒด๋ฅผ JSON ํฌ๋งท์ผ๋ก ๋ณํ
const json = JSON.stringify(obj);
console.log(json, typeof json); // {"name":"Kim","age":20,"alive":true,"hobby":["traveling","tennis"]} string
// ์ํ๋ value๋ง ๋ฐ์์ค๊ธฐ
console.log(JSON.stringify(obj, ['age'])); // {"age":20}
// ๋ค์ฌ์ฐ๊ธฐ ์ ์ฉ
const json2 = JSON.stringify(obj, null, 2);
console.log(json2);
/*
{
"name": "Kim",
"age": 20,
"alive": true,
"hobby": [
"traveling",
"tennis"
]
}
*/
๊ฐ์ฒด๋ฅผ JSON ํํ์ ๋ฌธ์์ด๋ก ๋ณํํ ๋ชจ์ต์ด๋ค. ๋งค๊ฐ๋ณ์ ๋์ ์ซ์๋ ๋ฌธ์์ด์ ๋ฃ์ผ๋ฉด ํด๋น ์นธ๋งํผ ๋ค์ฌ์ฐ๊ธฐ๊ฐ ๋๋ค. ์๋ api ๋ฌธ์์ฐธ๊ณ .
์ด๋ฒ์๋ ๋ฐฐ์ด์ JSON์ผ๋ก ๋ณํํด๋ณด์.
const todos = [
{ id: 1, content: 'HTML', completed: false},
{ id: 2, content: 'CSS', completed: false},
{ id: 3, content: 'JavaScript', completed: true}
];
const arrayToJson = JSON.stringify(todos, null, 2);
console.log(arrayToJson);
/*
[
{
"id": 1,
"content": "HTML",
"completed": false
},
{
"id": 2,
"content": "CSS",
"completed": false
},
{
"id": 3,
"content": "JavaScript",
"completed": true
}
]
*/
JSON.parse()
parse๋ JSON ํฌ๋งท์ ๋ฌธ์์ด์ ๊ฐ์ฒด๋ก ๋ณํํ๋ ๋ฉ์๋์ด๋ค. ์๋ฒ๋ก๋ถํฐ ํด๋ผ์ด์ธํธ์ ์ ๋ฌ๋ json์ ๋ฌธ์์ด์ด๊ณ , ๊ฐ์ฒด๋ก์ ์ฌ์ฉํ๋ ค๋ฉด ๊ฐ์ฒดํ ๊ณผ์ ์ด ํ์ํ๋ค. ์ด๋ฌํ ๊ณผ์ ์ deserializing ์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
// 2. JSON to Object
// parse(json)
const parsed = JSON.parse(json2);
const JsonToArray = JSON.parse(arrayToJson);
console.log(parsed, typeof parsed); // { name: 'Kim', age: 20, alive: true, hobby: [ 'traveling', 'tennis' ] } object
console.log(JsonToArray, typeof JsonToArray);
/*
[
{ id: 1, content: 'HTML', completed: false },
{ id: 2, content: 'CSS', completed: false },
{ id: 3, content: 'JavaScript', completed: true }
] object
*/
์์์ ๋ง๋ JSON ๋ฌธ์์ด๋ค์ ๋ค์ ๊ฐ์ฒด๋ก ๋ณํํ ๋ชจ์ต์ด๊ณ , ๋ฐ์ดํฐ ํ์ ์ด ๊ฐ์ฒด๋ก ๋ณ๊ฒฝ๋๊ฑธ ํ์ธํ ์ ์๋ค.
์ฐธ๊ณ | ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ #43
'๐ป๊ฐ๋ฐ๊ณต๋ถ > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
JavaScript ์คํ๋ ๋ ๋ฌธ๋ฒ ์์๋ณด๊ธฐ (0) | 2024.01.29 |
---|---|
JS | ๋์คํธ๋ญ์ฒ๋ง ํ ๋น (Destructuring) (0) | 2021.05.12 |