TIL: 2022-10-21

⚙️ 오늘 배운 주제

재귀, JSON

 

🐹 오늘의 기분

부트캠프하면서 느끼는 거지만 시간이 정말 빠르게 지나간다. 벌써 내일이 주말이라니! 오늘도 어제에 이어서 재귀를 공부했다. 어제 배운 개념에 JSON을 더해서 JSON.stringify()도 직접 구현해보았다. 오후에는 DOM을 이용해 Tree UI를 이용한 페이지을 직접 구현해보는 과제도 했다. DOM을 써본지가 굉장히 오래돼서 처음에 과제를 딱 열었을 때 되게 막막했다. 어떻게 어떻게 하면 되겠다~하고 아이디어는 잘 떠올랐는데 막상 코드로 옮기려니 손이 움직이지를 않았다. 페어분이 계셨기에 해결할 수 있었다고 생각한다. 이 과제는 꼭 혼자 다시 해봐야겠다.

 

🗣 스스로에게 설명

JSON은 JavaScript Object Notation으로, 데이터 교환을 위해 만들어진 객체 형태의 포맷이다.

 

데이터를 전송하려면

1. 수신자와 발신자가 같은 프로그램을 사용하거나,
2. 문자열처럼 범용적으로 읽을 수 있는 자료형이어야 한다.

자바스크립트에서 어떤 값을 문자열로 변환하기 위해서는 값.toString()이나 String(값)을 쓴다.

하지만 객체에서 위 방법을 쓰면 [object Object]가 출력된다.

 

즉, 일반적인 방법으로는 객체를 문자열로 변환할 수 없다.

정보가 담긴 객체를 전송하려면 문자열로 변환해주어야 하는데, 이 때 JSON을 이용한다.

 

JSON.stringify()는 객체를 JSON 형태로 바꿔준다. (서버로 보낼 때)
이 과정을 직렬화(serialize)라고 한다.

JSON.parse()는 JSON을 객체로 변환해준다. (서버에서 정보를 받아와서 가공할 때)
이 과정은 역직렬화(deserialize)라고 한다.

 

`{"name":"김철수","age":"24","gender":"male"}`

JSON과 객체는 비슷한 듯 다르다.
JSON에서는 key와 value를 모두 큰따옴표로 감싸주어야 한다.
key와 value는 무조건 붙여써야 한다. 콜론 옆에 공백이 있으면 안 된다.
각 속성을 구분할 때에는 반점으로만 구분해야 한다. 뒤에 공백을 붙이면 안 된다.

 

트리 구조는 하나의 부모에 여러 자식이 존재하는 자료구조이다.
자식에게 또 자식이 있고 또 자식이 있고 ... 이런 식으로 뻗어나간다.
웹에서 트리 구조를 구현할 때 결국에는 같은 연산을 반복하기 때문에 재귀를 활용할 수 있다.

 

❓ 막혔던 부분

DOM을 쓰는 과제가 있었는데 DOM CRUD를 까먹어버려서 복기하느라 좀 고생했다.

 

🔎 공부가 더 필요한 부분

Tree UI 구현 과제 혼자서 다시 풀어보기