[TIL] Day42 #JSON.stringify

Beanxxยท2022๋…„ 6์›” 24์ผ
1

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
42/120
post-thumbnail

2022.06.24(Fri)

[TIL] Day42
[SEB FE] Day42

โ˜‘๏ธย JSON.stringify

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}'


โœ๏ธย fe-sprint-stringify-json

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}}`;
  }
}
แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-25 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 12 12 10

โœ๏ธย fe-sprint-tree-ui

์žฌ๊ท€๋ฅผ ์‚ฌ์šฉํ•ด์„œ 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);
แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2022-06-25 แ„‹แ…ฉแ„Œแ…ฅแ†ซ 12 25 29

๋ฐฐ์šด์ง€ ์˜ค๋žœ๋งŒ์— ๋‹ค์‹œ DOM์„ ๋‹ค๋ฃจ๋ ค๋‹ˆ๊นŒ ๋ฉ”์†Œ๋“œ ์ด๋ฆ„์ด๋ž‘ ์–ด๋–ป๊ฒŒ ์ผ๋˜๊ฑด์ง€ ๊ธฐ์–ต์ด ๊ฐ€๋ฌผ๊ฐ€๋ฌผํ•ด์„œ ์ข€ ์• ๋จน์—ˆ์—ˆ๋‹ค,, ํŽ˜์–ด๋‹˜ ๋•๋ถ„์— ์ฝ”๋“œ ๋‹ค์‹œ ํ•œ๋ฒˆ ์จ๋ณด๋ฉด์„œ ์–ด๋Š์ •๋„ ๋‹ค์‹œ ๊ฐ ์žก์„ ์ˆ˜ ์žˆ์—ˆ๋˜..๐Ÿ™Œ

profile
FE developer

0๊ฐœ์˜ ๋Œ“๊ธ€