210104_TIL

Start Think:

🎄오늘 한 일

---

 

✔️ 1.  JSON.stringify 함수를 직접 만들어보기

• JSON에 대한 기본 개념을 익인 후 브라우저에서 제공하고 있는 JSON.stringify 함수를 직접 구현해보았다.
  JSON은 객체의 값으로 객체를 포함하는 대표적인 트리구조를 가지고 있기 때문에, 이번에 배운 재귀의 개념을 적용해 볼 수 있는 좋은 기회였다.
  
  

✔️ 2. 재귀를 활용하여 Tree-UI 구현하기

• Tree-UI 역시 JSON의 동작 방식과 비슷하게 객체안의 객체들을 포함하고 있는 구조를 가진다. Tree-UI 에서는 반복되는 재귀부분을 DOM에서 엘리먼트들을 직접만들어주고 받아온 데이터를 알맞게 연결시켜 화면에 출력하는 작업을 진행하였다. 
  결과적으로 테스트코드도 모두 통과하고, 정답 reference코드와 거의 유사하여 잘 만들었다고 생각이들기도 했지만, 문제의 방향을 정하고 빠르게 해당 코드를 작성하지는 못했다.
  다 짜고보면 이렇게 간단한 것을 처음에 방향을 너무 못잡은 것 같아 아쉬움이 컸다.
  재귀의 개념도 조금 부족했고, DOM을 다루는 부분도 완벽하지 않아 처음에 혼란이 생겼던 것 같다.
  
  마음을 편안히 가지고, 전부 지운다음 다시 천천히 코드를 써보니 한결 익숙해진 느낌이 들었다.
  이 감을 잃지않고 계속해서 앞으로의 sprint들에 적용해나가고 싶다.

재귀함수를 통해 만들어 본 Tree UI

🎄기억할 것

---

✔️1. JSON의 기초개념

•  JSON 은 Javascript Object Notation 의 약자로 데이터 교환을 위해 만들어진 포맷이다. 데이터를 네트워크에서 전송함에 있어서 수신자와 발신자가 모두 읽을 수 있도록 통일된 형식을 만들어낸 것에서 시작한다.
  
  
• 이 통일된 형식은 직렬화된 문자열의 모습으로 표현된다. 
  {"sender":"Outwater","receiver":"Sooveloper","message":"인숭아 나랑 같이 코딩할래?","createdAt":"2021-01-04 10:10:10"}
  
• 직렬화를 하기 위해서는 JSON.stringify( DATA ) 함수를 사용하고, 반대로 직렬화 된 데이터를 다시 원래 객체로 만들어 사용하기 위해서는 JSON.parse( DATA ) 함수를 사용한다.

🎄더 공부할 것

✔️1. 재귀함수의 실제 사용에 있어 확신이 없다는 느낌이 들었으므로, 코플릿에서 재귀함수 부분을 다시 풀어보며 익숙해지도록 해야겠다.
✔️2. DOM을 다루는 부분 역시 메소드나 노드간 연결해주는 코드를 작성할 때 버벅임이 많았다. Twittler와 Tree-UI의 DOM부분을 다시 작성해보며 익숙해져야 겠다.

마무리 Think:
코딩이 요즘 재밌다 : )
내가 처음 개발을 배웠던 옛 팀원들을 오랜만에 만났다. 
그때 내가 하던 진짜 주먹구구식 땜질코딩 시절이 창피했고, 그런 나를 이끌어 준 우리 형님, 동생들에게 고마웠다.
코로나로 각자의 길을 걷고있는 지금이지만, 코드스테이츠 수료 후 주말마다 모여 사이드프로젝트를 진행해보기로 하였다.

설렌다.

돌고돌아 알맞은 길로 가고 있는 듯한 편안함이다.

물론 몸은 힘들다^>^ 마음은 즐겁다 ^.^