TIL - Day 16~20

프로그래머스 데브코스

프로그래머스 데브코스 프론트엔드 3기

✓ TIL DAY - 16~20

---

🗓4주차를 마무리하며...

오프라인 교육과 노션 클로닝 프로젝트, 커피 챗 그리고 결혼식까지 여러 가지 일들이 많아 이번 주에는 TIL을 1주 단위로 작성하려고 한다.

 

자동 저장 에디터 구현 (Feat. 1차 멘붕)

월요일 강의로는 자동 저장 에디터를 구현해보는 내용을 학습하였다. API로 서버와 통신하고 딜레이를 줄이기 위해 이를 낙관적 업데이트 처리하는 방식, 그리고 디바운스를 통한 서버 저장을 줄이는 스킬까지 다양한 내용을 배웠고 contenteditable이라는 내용도 처음 접하게 되었다. 약간 스퍼트를 올려 하루에 이 내용을 다 이해하고 구현하려고 하니 멘붕이 왔다.

 

컴포넌트 구조 복잡한 것만은 아니구나?

컴포넌트를 활용하며 사실 더 어려운 방식 아닌가?라는 생각도 하였지만 이번 노션 클로닝을 진행하며 마음이 바뀌었다. 각 기능과 요소들을 잘게 나눠서 해당 내용이 어디에 속하는지 생각해보고 이를 각 컴포넌트에만 정리한다면 더욱 간단한 사고가 가능할 것이라고 느끼게 되었다. 물론 아직도 많이 부족하지만 이번 노션 클로닝을 진행하고 리팩터링을 통해 개념을 확고히 해야겠다고 생각했다.

 

딥 다이브 커피 챗 (question.enqueue(), question.dequeue()) 

멘토님의 열정 덕분에 이번 주 커피 챗은 생략이 가능했지만 질문이 많았던 나로서는 도움이 많이 되는 시간이었다. 궁금했던 상태 관리의 방향성이나 어떠한 기준으로 상위 컴포넌트들이 상태를 가지게 할 것인지 그리고 설계 방법에 대한 이야기도 나누었다. 이번 주도 질문받으신 내용보다 훨씬 깊고 넓은 내용을 알려주셨고 과제에도 도움이 정말 많이 되었다.

 

새롭게 배운 것

• debounce의 기능과 개념
• contenteditable
• top-down 설계과 bottom-up 설계
• 상위 컴포넌트와 하위 컴포넌트의 state 관계
• 트리 구조 구현을 위한 재귀 함수 사용법

깨달은 점

• API 구조에 따라 구현 난이도가 달라진다.
• 상위 DOM 접근법과 하위 DOM 접근법
• contenteditable과 state 변경을 함께 사용시 커서가 문제다.