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

💻 Intro

노션 클론 코딩 프로젝트 3일차! 큰 진전은 없었다. 문서 트리 구현 중 버그를 발생해서 많은 시간을 잡아먹었기 때문이다 ㅠㅠ
생각보다 간단한 것 같으면서도 세세한 자료 구조를 순회하는 것이 쉽지 않았다.
state 관리에 대해서도 아직 state 구조에 대한 확립이 되어 있지 않아 일일히 확인하다보니 시간이 배로 걸렸다.

---

🧐 이번 주 새롭게 배운 것

export vs export default

export는 함수명 및 객체명을 그대로 사용해야 하도록 내보내는 것이고 default export는 import시 이름을 자유롭게 설정 가능하다. (기존에 as로 이름을 바꾸는 것이 아닌 바로 다른 이름으로 import가 가능)

따라서 한 모듈 안에서 여러 가지를 export를 하는 경우에는 export, 한 모듈 안에 export하는 대상이 유일하다면 export default를 사용하면 된다.

재귀 함수 내 forEach 순회 이슈

어제 노션 사이드 네비바에 서버로부터 받아온 전체 문서 트리를 구현하기 위해 재귀 함수 makeDocTree 함수를 구현했다.
하지만 루트 문서나 최하위 문서가 아닌 중간 레벨의 문서를 추가했을 경우 해당 문서가 렌더링되지 않는 문제가 발생했다.

위 사진에서 102963의 데이터가 렌더링 되지 않는 상황이었다.
문제는 같은 뎁스에서 여러 개의 루트 문서가 있을 수 있는 케이스였는데 이 때 첫 번째(0번째) 문서만 재귀로 파고 든 것이 원인이었다.

따라서 루트 문서에서 forEach를 통해 순회하여 빠짐없이 문서 트리를 구현했다.
기존에는 domTree를 문자열을 추가해나가는 식으로 구현했었는데 루트 문서 배열 순회를 위해 SideNav.js의 docList 배열에 push 해나갔다.
이후 join을 통해 문자열로 변환하여 innerHTML로 문서 트리를 추가했다.

let docList = [];

makeDocTree(this.state.docsTree, 1, docList);

const joinDoc = docList.join('');
$navDocuments.innerHTML = joinDoc;

---

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

상태 관리

본격적으로 서버에서 받아온 데이터를 에디터의 header와 textarea에 데이터 바인딩을 하는 작업을 수행했다.
사이드 네비바에서 클릭 이벤트를 통해 선택한 문서의 데이터(selectedDoc)를 전역 상태에 업데이트하였다. 전역 상태로부터 editPage로 selectedDoc 안의 title과 content를 전달받아 제목과 내용을 표시하였다.

엄청 간단한 데이터 바인딩 작업이었지만 2시간을 꼬박 사용했다. state 값에 대한 이해가 많이 부족했기 때문에 console.log로 일일히 확인하다보니 많이 버벅였다.
저녁에 현주 멘토님과 커피챗에서 state 관리를 위해 컴포넌트 조직도를 통해 state 값에 대한 정보를 정리한 모식도를 그리는 방식을 추천받았다.
앞으로 진행할 state 관리는 모식도를 문서화해서 해볼 예정이다.

---

👀 느낀점

KPT 애자일 회고 방식을 도입해보려고 한다.

👍 Keep

• 프로젝트를 진행하면서 팀원들과 스크럼 때 잘 안되는 부분을 바로 공유하면서 함께 고민해보니 해결의 실마리가 찾아졌다!
  앞으로도 혼자 끙끙 앓기보다 주변 동기들에게 도움의 손길을 요청해야겠다.

😱 Problem

• 아직 state 관리에 대한 코드 구현이 익숙치가 않다.
  앞으로 react를 사용하기 위해서는 state에 대한 이해는 필수이기에 컴포넌트 조직도를 통해 state 관리를 해봐야 겠다.

• 재귀 로직 함수를 따로 분기하다보니 반환값에 대한 집착이 생겨서 undefined가 반환되는 이슈를 겪었다.
  굳이 반환을 하기보다 외부에 결과값을 두고 이를 업데이트하는 식으로 구현하니 바로 해결이 됐다!

😜 Try

• 컴포넌트 모식도 그리면서 프로젝트 진행하기
• 상태 자료 구조에 대한 문서화
• history API url 구현
• 에디터 값 수정 및 state와의 업데이트

---

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

관련 레퍼런스