Howon ui nOTION

프로그래머스 프론트엔드 데브코스의 VanillaJS 과정에서 두 번의 과제가 지나고 처음으로 개인 프로젝트를 수행했다. 목표는 Notion을 가능한 클로닝해서 VanillaJS로 구현하는 것이고 구현 사항은 필수와 선택으로 나뉘어 주어졌다. 필수는 기본적인 레이아웃과 SPA 형태로 routing을 구현하는 것이 주된 사항이었고, 선택은 contentEditable을 이용한 rich한 에디터와 다른 문서로의 동적 링크 등의 사항이 있었다.
아쉽게도 선택사항은 거의 구현하지 못했다..

---

유지하면 좋을 점 🧱

프로젝트 구조 고민 🛟

이전 두 번의 과제는 기능 구현에 급급해서 프로젝트의 폴더 구조나 컴포넌트 구조 등을 고민하지 않고 강의에서 주어진 기본 코드 베이스에 덧붙이는 방식으로 만들었다. 그런데 팀원 분들이 해당 이슈를 고려하고 UI까지 깔끔하게 구현하시는 것을 보고 크게 반성했다. 그래서 이번 프로젝트는 내 나름대로 구조를 고민하고 기능을 추상화하면서 구현했다. 물론 아직 익숙하지 않으니 리뷰에서 지적을 많이 받았지만 다른 사람이 읽기 쉽게 코드를 작성하는 법을 익혀나가는 기회가 되었다.

추가 기능 구현 🗂️

기본 기능을 다 구현하고 버그를 수정할 때 홈페이지에 대한 요구 사항은 없었다는 걸 깨달았다. 때문에 내 홈페이지에는 극초반에 페이지 구분하려고 넣어놓은 Home이라는 innerText만 존재했다. 뭐라도 넣어야되지 않을까 고민하다가 많은 프로그램들이 최근에 사용한 파일과 자주 사용한 파일 목록을 첫 화면에 보여줬던 게 생각나서 해당 기능을 구현해서 넣었다. 덕분에 과제로만 느껴지던 프로젝트가 조금이나마 서비스처럼 느껴졌다. 만들 때 가장 재미있었던 부분도 이 기능이었던 것 같다.

배포 🍐

팀원 분이 Vercel로 배포하는 방법을 공유해주셔서 한 번 시도해보았다. 배포 경험이 aws 밖에 없다보니 약간 각오를 하고 사이트를 들어갔는데 클릭 몇 번하니 배포가 완료되었다. 배포에 대한 마음 속 걸림돌이 거의 뽑히다시피 해서 나중 과제에도 별 부담없이 해볼 것 같다.
또한 PR에 배포 링크를 제공하니 리뷰어분들도 쉽게 버그를 찾고 지적해줄 수 있다보니 PR 리뷰의 효율도 좋아졌다고 느꼈다.

---

아쉬웠던 점 🧩

추가 기능 구현 📂

아깐 좋다더니 뭔 소린가 싶겠지만 난 추가 기능을 하나 밖에 구현하지 못했다. 프로젝트를 구상할 때는 마크다운 에디터나 애니메이션 등등 어떤 걸 구현해야지하는 계획이 있었는데, CSS조차도 구색을 맞추는 정도로 밖에 구현하지 못해서 많이 아쉽다.

시간 관리 ⌛

사실상 모든 아쉬웠던 점의 원흉인데 과제를 하면서 계속 후회했다. 과제 시작일 시점에 오프라인 미팅이 이틀 있었다보니 피곤해서 구현 시작을 약간 미뤘다. 그래도 마감일 전까진 되겠지하는 마음이었는데 구조 정립에 시간이 예상보다 더 걸려서 마감 직전에 기본 기능 돌아가는 것까지만 제출하고 다음 날 버그를 수정했다. 개발자는 시간 엄수가 필수 덕목이라고 매니저님이 그러셨는데 사실상 못 지킨 셈이라서 반성했다. 지금도 노션 프로젝트 여파로 TIL 등 루틴이 전부 밀려있는데 좀 더 부지런하고싶다.

---

시도해볼 점 🎵

팀 스터디 👣

팀원들도 나처럼 아쉬운 점이 많았는 지 스크럼 시간에 노션 프로젝트 보강 스터디를 하자는 안건이 나왔다. 팀 바뀌기 전에 이번 프로젝트 급의 과제도 없는 만큼 부담이 과하지도 않을 것 같고 아쉬웠던 점을 해소할 수 있을 것 같아서 찬성했다.

주말 활용 높이기 📆

주말만 되면 헤이해져서 열심히 안했는데 디스코드도 켜놓고 하면서 나에게 강제력을 줘야할 것 같다. 당근이랑 번개 과하게 보는 시간도 좀 줄이구..

---