2월 15일 공부일기 # Tree Ui

얻어걸린것은 한계가 명확하다..! 그것을 다시 재복기하고자, 문제 풀이과정 파악, 순서부터 이곳에 남기고자 한다. !
문제는 다음과 같다.

나는 이것을 tree 구조 마냥 엮이게 해줘야 하는데.. 그것은 다음과같다.

이런식으로 트리구조로 엮어야한다. 이것을 저번 수업시간에 '돔' , '트리구조' 라는 개념이 상기된다.
일단 먼저 html 구조가 어떤식인지, 처음 수에 주어진 매개변수가 무엇인지 알아보기위해
콘솔창에 입력하여 구조를 파악하였고 이내 그것은 다음과 같은 배열 이름이라는 것을 알게 되었다.
(길이가 총 4인 것과..)

어떤 구조인지 파악한뒤 그리고 천천히 '수도코드'를 작성해보자..

일단 반복적으로 구조생성과 값을 넣어줘야 하기에 반복문을 먼저 작성한뒤 그리고, 해당요소에맞게
1. 구조에 맞는 엘리먼트(태그)를 추가하고 변수에 할당하기.

그리하여일단 먼저 변수에 할당하는 방식으로 태그를 추가하였다.

하지만 , 가만보니 , 위의값처럼 menu[i].type 가 group인것과 item인것으로 크게 나눌수 있다는것을 확인하였다.

2. 그렇다면 group일경우와 item일경우를 크게 나누어 보자

   그리고 각각 경우에맞게 위에 추가한 엘리먼트를 li 엘리먼트에 , input/ span / ul 엘리먼트를 append 해주도록하자.

3. 그리고 '그룹'일 경우 체크박스의 속성도 같이 지정해주자.

   li가 할당된 변수.append(Inputag 변수, Span변수, Ul변수);
   Span이 할당된 변수.textContent = menu[i].name;

대략 이런식으로 작성되었을것이다.

    if(menu[i].type === "group") {
      Litag.append(Inputag, Spantag, Ultag);
      Spantag.textContent = menu[i].name;

currentNode.append(Litag)

를 입력해주는데, 이것은 맨 아래에서

createTreeView(menu, root);

function createTreeView(menu, currentNode)

곧 함수의 매개변수 currentNode는 root를 받아오는 역할을 하는 매개변수인것이다.
이것도 같이 아래에 입력해주자.

그리고 바로 재귀

createTreeview(menu[i].children , root)

이렇게 적는 이유는 일단 html상 result의 구조를 펼쳐보면 구조가 또다시 반복이 된다는점,
그리고 'group'을 제외한 나머지에선 list가 또 존재한다는점,
함수를 실행하여 입력해주면

다음과 같아진다.

마지막에 menu[i].type가 group이 아닐경우를 else로 처리해 주고,
텍스트와 li를 만들어주면 끝..

  else {
      Litag.textContent = menu[i].name
      currentNode.append(Litag)
    }

완성이다..!

예전엔 정말 손도 잘 못댔던 과제였는데... 오늘은 단계별로 하나하나 접근해 성취해나가니 기분이 매우 좋다..