2022.06.24(Fri)
[TIL] Day42
[SEB FE] Day42
JSON
(Javascript Object Notation
): ๋ฐ์ดํฐ ๊ตํ์ ์ํด ๋ง๋ค์ด์ง ๊ฐ์ฒด ํํ ํฌ๋งท
โฐ JSON์ JavaScript ๊ฐ์ฒด์ ๋ค๋ฅธ ๊ท์น์ ๊ฐ์ง
โย ๊ฐ์ฒด๋ ํ์ ๋ณํ์ ์ด์ฉํด String์ผ๋ก ๋ณํํ ๊ฒฝ์ฐ, ๊ฐ์ฒด ๋ด์ฉ ํฌํจ โ
JS์์ ๊ฐ์ฒด โ ๋ฌธ์์ด๋ก ๋ณํํ๊ธฐ ์ํด ๋ฉ์๋(message.toString()
)๋ ํ๋ณํ(String(message)
)๋ฅผ ์๋ํ๋ฉด, [object object]
๊ฒฐ๊ณผ ๋ฆฌํด
JSON.stringify
: ๊ฐ์ฒด โ JSON์ผ๋ก ๋ณํ (typeof: string
); ์ง๋ ฌํ(serialize)
JSON.parse
: JSON โ ๊ฐ์ฒด๋ก ๋ณํ (typeof: object
); ์ญ์ง๋ ฌํ(deserialize)
JS ๊ฐ์ฒด | JSON | |
---|---|---|
key | โโ ์์ด OK {key: โpropertyโ} | ๋ฐ๋์ โโ '{โkeyโ:โpropertyโ}' |
๋ฌธ์์ด ๊ฐ | โโ ์ฌ์ฉ OK | ๋ฐ๋์ โโ |
key & value ์ฌ์ด ๊ณต๋ฐฑ | ์ฌ์ฉ โญ๏ธ {โkeyโ: โpropertyโ} | ์ฌ์ฉ โ '{โkeyโ:โpropertyโ}' |
key-value ์ ์ฌ์ด ๊ณต๋ฐฑ | ์ฌ์ฉ โญ๏ธ { โkeyโ: โpropertyโ, num:1 } | ์ฌ์ฉ โ '{โkeyโ:โpropertyโ,โnumโ:1}' |
JSON.stringify()
๋ฉ์๋๋ฅผ ํจ์ ํํ๋ก ์ง์ ๊ตฌํํด๋ณด๊ธฐ ๐
function stringifyJSON(obj) {
// return JSON.stringify(obj);
// number, boolean, null type -> string type
if (typeof obj === "number" || typeof obj === "boolean" || obj === null) {
return `${obj}`;
}
// string type -> string ์์ ๋ค์ string type
if (typeof obj === "string") {
return `"${obj}"`;
}
// array type -> array ๋ด์ string type
if (Array.isArray(obj)) {
// let newArr = [];
// for (let item of obj) {
// newArr.push(stringifyJSON(item));
// }
// return `[${newArr}]`;
// reference
let result = "";
for (let el of obj) {
result += stringifyJSON(el) + ",";
}
// ex. '1', '2', '3',
result = result.slice(0, -1); // ๋งจ ๋ ์์์ ๋ถ์ด์๋ ',' ์ ๊ฑฐ
return `[${result}]`;
}
// object type -> obejct ๋ด์ string type
if (typeof obj === "object") {
let result = "";
for (let key in obj) {
// ์กฐ๊ฑด: function, undefined๋ stringify ๋์ง ์์
if (typeof obj[key] === "function" || obj[key] === undefined) {
continue;
}
result += `${stringifyJSON(key)}:${stringifyJSON(obj[key])},`;
}
result = result.slice(0, -1); // ๋งจ ๋ ์์์ ๋ถ์ด์๋ ',' ์ ๊ฑฐ
// JSON ํ์: '{"key":"property"}'
return `{${result}}`;
}
}
์ฌ๊ท๋ฅผ ์ฌ์ฉํด์ Tree UI ๊ตฌํํด๋ณด๊ธฐ ๐
// dummy data
const menu = [
{
type: "group",
name: "์๋ฃ",
children: [
{
type: "group",
name: "์ฝ๋ ๋ธ๋ฃจ",
children: [
{ type: "item", name: "๋์ดํธ๋ก ์ฝ๋ ๋ธ๋ฃจ" },
{ type: "item", name: "๋์ฒด ์ฝ๋ ๋ธ๋ฃจ" },
{ type: "item", name: "์ ์ฃผ ๋น์๋ฆผ ์ฝ๋ ๋ธ๋ฃจ" },
{ type: "item", name: "์ฝ๋ ๋ธ๋ฃจ" },
],
},
...
}
]
const root = document.getElementById("root");
function createTreeView(menu, currentNode) {
for (let arrayItem of menu) {
const liEl = document.createElement("li");
// dummy data ์ค์์ type key์ ํด๋นํ๋ value๊ฐ item๋ผ๋ ๊ฒ์
// ๋์ด์์ ์์์์๊ฐ ์๋ค๋ ๊ฒ์ ์๋ฏธ
if (arrayItem.type === "item") { // ๋์ด์ ์์ ์์๊ฐ ์์ ๋
// if (!el.children) <- ์์ ์์ ์์์ ์๋ฏธ (์ ์ฝ๋์ ๊ฐ์ ๋ด์ฉ)
// ๊ทธ๋ฅ name์ ์ถ๋ ฅ
liEl.textContent = arrayItem.name;
currentNode.appendChild(liEl);
} else { // ์์ ์์๊ฐ ์์ ๋
// input element ์์ ์์ฑ
const inputEl = document.createElement("input");
// ์ inputEl element type ์์ฑ์ 'checkbox'๋ก ์ค์
inputEl.setAttribute("type", "checkbox");
//inputEl.type = "checkbox"; <- (์ ์ฝ๋์ ๊ฐ์ ๋ด์ฉ)
const spanEl = document.createElement("span");
// span element ๋ด์ฉ์ name ์ถ๋ ฅ
spanEl.textContent = arrayItem.name;
const ulEl = document.createElement("ul");
// li element์ ์์์์๋ก input, span, ul element ์ค์
liEl.appendChild(inputEl);
liEl.appendChild(spanEl);
liEl.appendChild(ulEl);
// liEl.append(inputEl, spanEl, ulEl); <- ํ ์ค๋ก ์ 3์ค ์ฝ๋์ ๊ฐ์ ๋ด์ฉ์ผ๋ก ์ฒ๋ฆฌ
// ์ต์์ ๋
ธ๋ root์ li element๋ฅผ ์์์์๋ก ๋ถ์
currentNode.appendChild(liEl);
// ์ฌ๊ท ํจ์ ์คํ
createTreeView(arrayItem.children, ulEl);
}
}
createTreeView(menu, root);
๋ฐฐ์ด์ง ์ค๋๋ง์ ๋ค์ DOM์ ๋ค๋ฃจ๋ ค๋๊น ๋ฉ์๋ ์ด๋ฆ์ด๋ ์ด๋ป๊ฒ ์ผ๋๊ฑด์ง ๊ธฐ์ต์ด ๊ฐ๋ฌผ๊ฐ๋ฌผํด์ ์ข ์ ๋จน์์๋ค,, ํ์ด๋ ๋๋ถ์ ์ฝ๋ ๋ค์ ํ๋ฒ ์จ๋ณด๋ฉด์ ์ด๋์ ๋ ๋ค์ ๊ฐ ์ก์ ์ ์์๋..๐