210104_TIL (재귀로 TreeUI, StringfyJSON함수 구현하기)

🍎 오늘 한 것

---

✔️ JSON 공부
JSON(JavaScript Object Notation)은 '데이터 교환'을 위해 만들어진 표현식이다. 문법은 Javascript 객체, 실체는 문자열이라고 생각하면 쉽다. 전에 Local Storage에 대해 공부하면서 알게 되었는데, 중요한 개념인 것 같아 함께 블로깅 해뒀던 덕에 좀 더 쉽게 배울 수 있었다. JSON.stringify()는 받은 데이터를 JSON 형태로 직렬화(serialization)해주겠다는 의미이다. 즉 Javascript 객체, 배열을 JSON 문자열로 변환하는 것이다. 반대로 JSON.parse()은 JSON 문자열로 변환된 데이터를 분석하여 원래의 JavaScript 값이나 객체를 생성하는 역직렬화를 한다.

✔️ StringifyJSON 함수로 구현하기
Javascript 객체를 JSON 형식으로 변경할 수 있도록 하는 메서드인 JSON.stringify()를 직접 함수로 구현해봤다. 입력값으로 들어갈 수 있는 값들은 number, string...등 다양한 데이터 타입을 갖기 때문에 각각 맞는 형식을 지정해 출력하도록 해주었다. 객체타입을 입력 받았을 때는 재귀를 사용했는데, 그 이유는 객체의 값으로 들어가는 값들이 또 다시 다양한 데이터 타입을 가질 수 있기 때문이었다. 이런식으로 Javascript의 객체를 JSON 형식으로 변환하는 함수를 완성할 수 있었다. 또 JSON 구조가 어떤식으로 재귀 함수를 사용하는지, 왜 Tree 구조라고 하는 건지도 이해할 수 있었다.

✔️ Tree UI 구현하기
아래와 같이 Tree구조를 표현한 UI를 재귀 함수를 통해 구현해보았다. ul, li, input(checkbox), span 태그를 이용했는데, 재귀함수를 사용할 때 ul과 li의 관계가 중요한 역할을 했다. 하위 목록이 없을 때까지 현재 ul에 다음 li를 붙이는 방식을 생각하고 최종적으로 완성할 수 있었다.

 

🍎 기억할 것

---

✔️ 객체지향 프로그래밍 (OOP), 함수형 프로그래밍 (functional)
객체지향 프로그래밍 : 객체 안에 상태(데이터)를 저장하는데 초점 (🔗캡슐화, 은닉화, Scoping)
함수형 프로그래밍 : 상태를 저장하지 않고 내보내 없애는데 초점 (🔗모듈화, 순수함수)

함수형 프로그래밍은 뭔가를 저장하기보다는 연산하고 결과를 내보내는 것(= 없애는 것)에 초점을 두기 때문에, 보다 간결하게 코드를 작성할 수 있게 되는 것이다.

✔️ input[type='checkbox'] 체크여부 확인
checkbox 속성 중 checked는 checkbox의 check 여부를 true, false 형태로 저장하는 속성이다!

✔️ Javascript, JSON 규칙의 차이점
Javascript : key(따옴표 없어도됨), values(" ", ' ' 사용 가능), 키와 값 사이, 키-값 쌍 사이 공백 허용 O
JSON : key(반드시 " " 붙이기), values(반드시 " " 붙이기), 키와 값 사이, 키-값 쌍 사이에는 공백 허용 X

✔️ 순수 함수(Pure Function)
동일한 입력값을 넣었을 때, 항상 동일한 리턴값을 반환하며 외부에 영향을 받지 않는 함수 (안정성, 생산성 높여줌)

 

🍎 더 공부할 것

---

✔️ 객체지향 프로그래밍 vs 함수형 프로그래밍 블로깅
✔️ fetch API