🔍 프로그래머스 FE 데브코스 5기 TIL 231018

💻 Intro

노션 클로닝 프로젝트 2일차에 돌입했다. 최근 얼마 동안 과제와 강의량이 많아 TIL를 작성할 여력이 없어 작성하지 못했다.
저번주 토요일 배민의 마광휘 님의 강연에서 기록의 습관화와 중요성을 다시 한 번 깨닫고 무의미한 나열식 TIL보다 사소한 것이라도 내가 새로 알게 된 것들을 남기는 식으로 진행할 생각이다.

---

🧐 오늘 새롭게 배운 것

재귀 함수의 함정

노션 클로닝 프로젝트 진행 중 사이드 네비바에 표시할 문서 목록을 데이터로부터 뽑아내야 했다. 이를 재귀함수를 통해 하위 문서가 없을때까지 뽑아내려고 따로 구현했으나 console.log로는 제대로 출력되지만 마지막 반환값이 undefined가 자꾸 나왔다.

export function makeDocTree(root, depth, domTree) {
  // domTree에 root 문서 요소 추가...
  domTree += ...

  // 해당 root 문서가 하위 문서가 없으면
  if (root.documents.length === 0) {
    return domTree; 
  }
  // 재귀
  makeDocTree(root.documents[0], depth + 1, domTree);
}

이유는 간단했다. 이 블로그를 참고해보니 재귀 함수는 3가지 원칙이 있었다.

1. Base Case를 명확히 작성
2. Base Case가 부합하지 않을 경우, 재귀 Case를 명확히 작성
3. 원하는 결과물까지 최대한 접근하고 필요한 경우 return. 일반적으로 2개의 return이 존재

나는 원칙의 3번째 항목을 지키지 않아서 재귀 함수의 반환값이 undefined 나오게 된 것이었다. 아래와 같이 코드를 수정하니 정상적으로 원하는 Dom Tree HTML 요소를 구할 수 있었다.

...
// 재귀
  return makeDocTree(root.documents[0], depth + 1, domTree);
...

단순히 재귀 함수만 반복할 경우 원하는 return 값이 누락되어 문제가 발생했던 것이었다. 이렇게 구현한 사이드 네비바에 표시한 문서 목록 예시 사진이다.

blur 이벤트

노션 글 에디터에서 제목 <input> 태그는 다음과 같은 조건을 만족해야 했다.

1. 빈 제목일 경우 placeholder 값이 제목 없음이어야 한다.
2. 제목을 입력하고 있을 경우 (focus되었을 경우) placeholder 값이 제거되어야 한다.
3. 이후 다시 제목이 빈 값이 되면 다시 placeholder 값이 원상복귀되어야 한다.

focus 이벤트에 대해서는 알고 있었으나 focus가 해제되었을 경우는 어떤 이벤트 명을 가지는지 몰랐다. 검색해보니 해당 이벤트는 blur였다.

아래는 위의 조건을 만족하도록 이벤트리스너를 설정한 코드이다.

 const $editHeaderInput = document.querySelector('input#title');

  $editHeaderInput.addEventListener('focus', (e) => {
    const $input = e.target;
    $input.placeholder = '';
  });

  $editHeaderInput.addEventListener('blur', (e) => {
    const $input = e.target;
    if ($input.text !== '') $input.placeholder = '제목 없음';
  });

---

🙄 알고 있었지만 더 공부해야 할 것

async-await

아직까지 정확하게 비동기 Promise에 대한 정리가 되어 있지 않아서 서버에서 데이터를 호출해서 생성 및 삭제를 여차저차 진행했지만 어떤 과정에 의해서 되는지 애매모호한 상황이다.
MDN 공식 문서와 모던 코어 자바스크립트에 기술된 내용을 다시 정독하고 Promise와 async-await에 대한 개념을 확립해야 할 것 같다.

---

👀 느낀점

노션 클론 코딩 개인 프로젝트를 진행하면서 맨땅에서부터 코딩을 혼자 고민하면서 하게 되니 진짜 실력이 조금씩 느는 것 같아 기분이 좋다!! (백문이 불여일타가 맞는듯)
기능을 구현하기 전에 어떤 자료 구조를 사용할지, 상태 관리 및 함수와 컴포넌트는 어떻게 설정할 것인지 미리 구상하는데 시간이 많이 소요되었다.
하지만 이를 통해 실제 노션과 거의 동일하게 기능이 동작하는 것을 확인하니 뭔가 뿌듯했다.
내일은 글 에디터와 사이드 네비바 문서를 연동하는 것과 History API로 SPA 구현을 해볼 것이다. 아자아자!! 😜

---

😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.

관련 레퍼런스