/Motion_Project

TypeScript 강의 중 Motion Project 직접 해보기 (Dream Coding of Ellie)

Primary LanguageTypeScript

Motion_Project

TypeScript 강의 중 Motion Project 직접 해보기 (Dream Coding of Ellie)


🗜프로젝트 기획 테크닉


⚙️어떤 기능들이 있을까?

✔︎ 어떤 기능들이 있는지 명확하게 정의해야 한다.

🛣로드맵으로 구분하자

✔︎ 구현하고자 하는 기능들을 처음부터 구현하는 것이 아니라, 잘 나누어진 로드맵으로 완성해나간다.

✔︎ 각 단계가 끝날 때마다, 그 자체만으로도 시장에 배포하고 사용자가 쓸 수 있을 수준으로 만들어야 한다.

⭐️ must have - 꼭 있어야 하는 기능 중, 어떤 것을 먼저 배포해 나갈 것인지 마일스톤들로 나눠볼 수 있다.

⭐️ good to have - 필수는 아니지만 있으면 좋은 것들

⭐️ nice to have

Motion Project


노션 클론 코딩 [모션 프로젝트]


⚙️ 기능

  • Video, Image, Note, List 업로드 기능
  • Drag&Drop 레이아웃 수정

🔗 기술 스택

  • HTML
  • CSS
  • TypeScript

🔗 Requirements


  • Must Have - 필수 기능
    • As a user, I want to add an image (이미지 업로드)
    • As a user, I want to add youtube video (비디오 업로드)
    • As a user, I want to add a note (노트 업로드)
    • As a user, I want to todo list (리스트 업로드)
    • As a user, I want to delete sections (섹션 삭제)
  • Good to have
    • As a user, I want to reorder sections by dragging (드래그로 섹션 이동)
  • Nice to have
    • As a user, I want to update sections (섹션 업데이트)

🎨 Prototype


🖥 Final App View