[Mission4/남주영] - Project_Notion_VanillaJS

[NamJwong]

📌 과제 설명

VanillaJS로 간단한 노션 클로닝을 합니다

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

기본 요구사항

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

• 글 단위를 Document라고 합니다. Document는 Document 여러개를 포함할 수 있습니다.
• 화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다.
• Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링합니다.
• 해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다.
• Document Tree에서 각 Document 우측에는 + 버튼이 있습니다. 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다.
• 편집기에는 기본적으로 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다.
• History API를 이용해 SPA 형태로 만듭니다.
• 루트 URL 접속 시엔 별다른 편집기 선택이 안 된 상태입니다.
• /documents/{documentId} 로 접속시, 해당 Document 의 content를 불러와 편집기에 로딩합니다.

✅ 피드백 반영사항

✅ PR 포인트 & 궁금한 점

• 이후에 해보고 싶은 것
  • 요구 사항 외의 스타일링
  • 컴포넌트 템플릿화
  • 컴포넌트 인스턴스 네이밍이 모호한 문제 해결
    • 컴포넌트 인스턴스라는 것을 한눈에 알았으면 하고, 컴포넌트 외에 로직에서 네이밍에 모호함이 생김. 예를 들어 TodoList라는 이름의 컴포넌트가 있다면 인스턴스를 기존처럼 카멜케이스로 하면 data를 fetch하거나 할 때 todoList라는 이름을 사용하지 못하는 문제가 있음.
    • 컴포넌트 생성자를 [컴포넌트명]생성자와 같은 이름으로 import 해온 뒤, 인스턴스를 컴포넌트명으로 만들어볼 수 있을 듯함.
  • 각종 예외 처리
  • 보너스 요구 사항
  • MEMO 및 TODO 주석 처리
• 느낀 점
  • 처음부터 완벽하게 하려는 것보다 일단 해보는 것이 역시 중요하다 느낌.
    • 예전에 바닐라JS가 익숙하지 않은 상태에서 컴포넌트 템플릿화를 하려고 무작정 유명한 자료를 따라서 해봤는데 구조가 잘 익혀지지 않고 왜 그런 구조로 짜여있는지 이해가 안 가서 그냥 외워야 했음. 그런데 이렇게 템플릿화를 안 한 채로 일단 구현을 많이 해보니 한 컴포넌트에 어떤 것들이 필요하고 어떤 역할을 하는지 알게 되어 예전에 봤던 템플릿화를 한 코드의 구조가 이해됨. 더 나아가 그 코드를 바탕으로 직접 템플릿화를 해볼 자신도 생김.
• 시도해본 것
  • react처럼 prop만으로도 rerender가 되도록 해보고 싶었는데 실패했다. 왜냐하면 어쨌든 해당 컴포넌트 내부의 값을 직접 변경 시켜줄 함수(setState)가 있어야 하기 때문이다.
    • 이렇게 되면 prop은 그저 initialState의 역할 밖에 못한다. 그래서 강사님이 네이밍을 그렇게 하셨나 싶다.
    • 그래도 어쨌든 react도 vanillaJS로 만든거일테니까 추후에 방법을 알아내서 성공해보고 싶다.