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

📌 프로젝트 설명

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

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

기본 요구사항

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

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

📍목표

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

🏃‍♂️2일차🏃‍♂️

📷 UI

💻구현한것💻

• 기능

  • 목록과 편집기 사이 padding 추가, css연습

• 문서 목록

  • 문서 목록 클릭시 하위 폴더 노출
    

• 편집기

  • CSS연습

🔥느낀점

• css를 연구해보느라 시간을 거의 다써서 시간관리의 중요성을 다시한번 깨달았고 우선순위를 정했다.
  나의 우선순위:
  1.기능부터 일단 구현
  2.스타일 css입히기
  3.문서화

⛔문제점

1일차와 동일하다.😥

• 문서삭제버튼을 누르면, 태그안의 태그를 넣다보니 하위문서 삭제시 접근이 잘 되지 않았다.(하위 폴더 삭제시 상위폴더도 삭제)

🔧임시방편

• 삭제버튼 - 을 만들어 놓기만 하였고, 계속해서 방법을 생각해 보았다.