들어가며

재귀 함수 두 번째 시간. 같은 과목을 이틀이나 쓰는데는 이유가 있다. 그만큼 중요하고 잘 쓰면 좋다는 의미로 받아들였다. 익숙해지려면 한참 멀어서 문제도 더 많이 풀어보고 구조에 대한 고민도 많이 해봐야겠다. Advanced 항목으로 준 내용이 인상적이다. TIL에 녹이기는 아깝고 추가글로 정리하고 싶다.

Sprint

StringifyJSON

• JSON 구조가 재귀 함수를 사용할 수 있는 Tree 구조임을 이해할 수 있다. (stringifyJSON)
• JSON.stringify 와 JSON.parse 가 seriealize, deserialize라는 것을 이해할 수 있다.
• JSON.stringify 와 JSON.parse 를 사용하여 자바스크립트 값과 JSON을 넘나들 수 있다.
• JSON에 재귀 호출을 사용할 때, 어디에 사용해야 할지 이해할 수 있다.

스프린트로 진행한 Stringify. 단어가 조금 이상하다. 찾아보니 컴퓨터 과학 용어로 지정되어있다. JSON 형식은 아직은 자주 쓰진 않겠고 서버 프로그래밍에서 많이 사용할 것 같다.

Stringify
(VERB)(transitive,computing) To convert to a textual representation.

원시 자료형을 먼저 처리하고 참조 자료형을 만날 경우 재귀 함수로 처리하면서 진행한 스프린트였다. 내용이 인상에 남아서 몇번씩 반복해서 풀어봐도 도움이 될 것이다.

Tree UI

백문이 불여일견. 체크를 누르면 토글되는 구성이다. Type:"group" 키를 만나면 배열을 만난다. 그리고 다시 재귀 함수를 호출해서 하단의 요소들을 표기한다. 로직은 흠.. 함수를 재사용 할 경우가 불규칙하게 있을 때 재귀를 사용한다는 의미다. 좋은 과제였다. 맨땅에 만들어봐도 괜찮을 주제다.

감탄한 부분은 CSS다. 체크박스를 누를 때 마다 토글되는게 신기했는데 CSS 몇 줄 만으로 해결했다. 이 몇 줄이 없었으면 태그마다 class를 다 넣어주면서 불필요한 코드를 늘렸을 것이다.

• input[type="checkbox"]:checked 가상 셀렉터 :checked 를 사용해서 체크될 경우 display를 변경한다. none으로 숨겨져 있던 것을 block으로 변경한다.
• ~ul 셀렉터는 input 태그의 후손의 (띄어쓰기는 후손 > 는 자식이다) ul 형제 셀렉터를 지정한다.

input[type="checkbox"] ~ul {
  display: none;
}

input[type="checkbox"]:checked ~ul {
  display: block;
}

재귀 함수 Advanced

• 재귀 함수와 메모리 사용량 간의 관계 (javascript recursion memory leak)
• 꼬리 재귀 (tail recursion in js)
• 하노이의 탑 재귀 (js tower of hanoi in recursion)
• 조합 재귀 함수 (js combination in recursion)