19일차 TIL 210326

1. JSON : 데이터 교환을 위해 만들어진 포멧

  • 객체라는 것이 전송 가능하려면 문자열과 같이 범용적으로 읽을 수 있는 형태여야 한다.
  • JSON 은 서로 다른 프로그램 사이에서 데이터를 교환하기 위한 포맷이다.
  • 객체는 타입 변환을 위해 String으로 변환할 경우 객체 내용을 포함하지 않는다. 떄문에 JSON을 활용해서 데이터를 고쳐야 데이터 전송이 가능하다.
const message = {
  sender: "김코딩",
  receiver: "박해커",
  message: "해커야 오늘 저녁 같이 먹을래?",
  createdAt: "2021-01-12 10:10:10"
}
  • JSON.stringfy()= 직렬화 (serialize) 한다.
let transferableMessage = JSON.stringify(message)
console.log(transferableMessage)
// `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`
  • JSON.parse() = 역직렬화(deserialize) 한다.
let packet = `{"sender":"김코딩","receiver":"박해커","message":"해커야 오늘 저녁 같이 먹을래?","createdAt":"2021-01-12 10:10:10"}`

let obj = JSON.parse(packet)
console.log(obj)
/*
{
  sender: "김코딩",
  receiver: "박해커",
  message: "해커야 오늘 저녁 같이 먹을래?",
  createdAt: "2021-01-12 10:10:10"
}
*/
  • JSON 규칙
    • 키 : 반드시 쌍따움표를 붙이기
    • 문자열 값 = 반드시 쌍따옴표 감싸야 함
    • 키와 값 사이, 그리고 키-값 쌍 사이에는 공백이 없어야 한다.

2. tree-ui로 커피가게 메뉴판 만들기.

스크린샷 2021-03-27 오후 7 49 15

  • 어느 엘리먼트의 자식으로 append 해야 할지 생각해야 한다.
  • 반복문으로 배열의 깊이만큼 반복해주고, 그 반복문 안에다가 createElement > textContent > append 하기
  • 배열에 children 이 있으면 재귀함수 호출, 없으면 li로 감싸주기.
function createTreeView(menu, currentNode){
  let menu = [...arr] // 객체로 이루어진 배열
  for(let i =0; i< menu.length; i++){
    let li = document.createElement('li')
    if(menu[i].children){
    const input = document.createElement('input')
    input.type = 'checkbox';
    let span = document.createElement('span')
    span.textContent = menu[i].name

    let ul = document.createElement('ul')
    li.append(input, span, ul)
    currentNode.append(li)

    creaateTreeView(menu[i].children, ul)
     }
  else {
    li.textContent = menu[i].name
    currentNode.append(li)
       }
    }
  }

3. 스프린트 하면서 배운점

  • 왜 구현이 될까 & 왜 구현이 안될까의 연속이었다.
  • 나는 100프로 이해되지 않으면 코드를 쓰지 않았다. 근데 스프린트를 진행할때는 그래도 일단 뭐라도 구현이 되어야 하니까 코드를써나가야 하는게 중요한 것 같다. 그러고나서 생각한대로 출력이 되면 그 감을 유지하는거고 그렇지 않으면 고치면 된다.
  • html,css,js 다 확인해야되서 정신없고 모니터는 모자르지만 그래도 꼼꼼히 보고 차근차근 진행해보자.

Updated: