재귀함수를 이용해서 Tree Ui 만들기

일단 손 코딩으로 Ui 구조를 그려봤다.

스프린트 보안상 자세하게는 못쓰지만

태그 li 안에
태그 input 안에
태그 span
태그 Ul 있는 구성

dom 문법으로 function createTreeView(menu, currentNode){
}
함수 안에 작성을 해주었다.

for of 문법으로 접근을 해서
!! el.children 일 경우와 그렇지 않는 경우를 나눴고
자식이 존재하면 태그들이 구성이 되게 만들고

자식이 존재하지 않으면
li태그만 나타나게 구현하였다.

코드를 작성하면서 알아낸 사실은
li.append(input, span, ul); 이 순서가 구현순서랑 다를경우 오류가 나왔다.
append()안에 태그 순서를 잘 써줘야할것 같다.

후기

세션2 넘어와서 재귀함수를 배웠는데 구조적인 특징이나 어떤식으로 동작하는지 좀더 공부를 해보고
코플릿 및 스프린트를 다시 한번 풀어봐야겠다.