TIL_210104

📝오늘 한 일 / 배운 것

---

🖋 JSON

재귀 함수를 이용해 JSON.stringify 함수를 구현해봤다.

자바스크립트 언어 환경에서의 객체(Object)를 이 함수를 통해 String 구조의 값으로 반환시켜주는 함수이다. 

이때 객체의 키-값 쌍에서 값에 함수, undefined 다 들어갈 수 있지만, 이 함수를 사용할 땐 이 값들이 무시당한다.

 

🖋 Tree UI 구현

재귀 함수와 DOM을 이용해 다음과 같은 Tree UI를 구현해봤다.

객체 속의 객체 속의 객체... 와 같이 복잡한 데이터들 사이에서 마지막 (제일 깊은 위치) 데이터의 속성만 다르게 주었다.

그리고 트리 구조를 만드는 함수와 다른 속성 일때 멈추게 하는 재귀 함수를 통해 만들 수 있었다.  

🖋 CSS - checked

다음과 같은 방법으로 체크 박스에 체크 되었을 때 보이고, 체크가 되어있지 않을 때 보이지 않는 방법을 배울 수 있었다.

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

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