데브코스 - 첫번째 프로젝트 - 노션클로닝 - 5일차

📌 프로젝트 설명

바닐라 JS만을 이용해 📄노션을 클로닝📄합니다.
기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다.

👩‍💻 요구 사항과 구현 내용

기본 요구사항

해당 프로젝트는 크게 문서 목록과 편집기 두가지 부분으로 구성되어있다.

• 문서 목록
  • 루트 문서들을 보여준다.
  • 루트 문서에 하위 문서가 있는 경우, 해당 루트 문서 아래에 트리 형태로 보여준다.
  • 하위 문서 추가 기능
    문서 우측 + 버튼을 클릭하면 하위 문서로 새 문서를 생성하고 편집화면에 보여준다.
    
• 편집기
  • 자동 저장 기능
    저장 버튼을 따로 두지 않고 지속적으로 서버에 저장되도록 한다.
• 공통
  • History API를 이용해 SPA 형태로 만든다.
  • 루트 URL 접속 시엔 편집화면을 보여주지 않고 메인 화면을 보여준다.
  • /documents/{documentId} 로 접속시, 해당 문서의 편집화면을 띄워준다.

📍목표

데브코스 첫번째 프로젝트인 📄노션을 클로닝 프로젝트📄 이다.
JS만을 이용하여, Fetch API를 이용해 API 서버의 데이터를 주고 받으면서, History API를 이용해 SPA 형태로 만들면서 노션과 비슷한 편집기를 구현하면서 JS의 기본기를 다진다.

🏃‍5일차🏃‍♂️

📷 UI

💻구현한것💻

• 하위 문서 접기/펼치기 기능 ✅3일차 hover문제해결!
  • 문서 좌측 ▶ 을 클릭하면 하위 문서들을 접었다 펼칠 수 있다.
• 🗑휴지통
  • 휴지통 :hover 구현 && 접었다 펼칠 수 있게 구현
• 3차 CSS수정 (페이지목록&& 편집기 디테일)

🔥느낀점

접었다 폈다 하는 기능도 간단히 구현 될 줄 알았으나, 생각보다 오래 걸렸다. 재귀로 구현했던 <li>태그들을 다루다보니, 원하는 값에 접근하기가 쉽지않았고, className으로 접근했기에 변수이름과 class이름의 작명에 대한 중요성을 깨달았다.
js안에서 html들을 조작하는 것이 결코 쉬운일이 아니라는 것을 느꼈다.

css 작업은 언제나 어렵다...

⛔문제점

4일차 휴지통 복구 문제와 동일