프로그래머스 데브코스에서 첫 개인 프로젝트로 Notion cloning 프로젝트를 진행했다.
매우매우매우 허접하지만 첫 개인 프로젝트이므로 일단 vercel로 배포해봤다.
기본 요구사항
바닐라 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를 불러와 편집기에 로딩합니다.
보너스 요구사항
- 기본적으로 편집기는 textarea 기반으로 단순한 텍스트 편집기로 시작하되, 여력이 되면 div와 contentEditable을 조합해서 좀 더 Rich한 에디터를 만들어봅니다.
- 편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링하도록 추가합니다.
- 편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가합니다.
- 그외 개선하거나 구현했으면 좋겠다는 부분이 있으면 적극적으로 구현해봅니다!
보너스 요구사항은 거의 구현하지 못했다. 기본기능을 구현하는데도 많이 어려웠다😭
좋았던 점
1. Vanilla JS 노가다(?)
Vanilla JS만 사용하여 큰 프로젝트를 진행해본 것은 처음인 것 같다.
React와 같은 프레임워크와는 다르게 상태관리나 props의 전역관리 등을 고민하고 구현해야하는 것이 까다로웠지만, 덕분에 React의 hook의 구조를 이해할 수 있었다. (React도 결국 vailla JS로 만들어졌다는거😱)
이런 과정은 React와 같은 프레임워크를 사용할 때, 분명 도움이 된다고 믿어 의심치 않는다. 올해 1월 42seoul 라피신 과정을 진행할 때, C언어의 있는 기본 라이브러리 함수(printf, atoi, strstr, strcat 등...)들을 모두 처음부터 구현하는 과정이 C언어의 메소드들을 더욱 잘 이해하게 된 계기가 되었던 것처럼 말이다.
즉, React hook의 중요성을 다시 한 번 깨달았다 🥺
2. PR 리뷰를 통한 코드 refactoring
PR 리뷰의 중요성을 크게 느낄 수 있는 기회였다.
멘토님과 팀원분들의 진심어린 피드백으로 정말 많은 부분을 개선시킬 수 있었다. 특히 비효율적으로 렌더링되고 있는 부분을 개선하거나, eventListener의 컴포넌트 세분화는 성능적인 부분 뿐만 아니라 코드의 가독성에서도 매우 발전시킬 수 있었다!!
(멘토님과 팀원들 쵝오😚)
또한 이번에 팀원들과 함께 개인 노션 프로젝트를 더욱 발전시키는 스터디를 하게 되었다.
각자 더 구현했으면 좋겠다는 부분을 구현하고, 팀원들에게 PR 리뷰를 받는 것이다.
우선 나는 보너스 요구사항을 구현하고, UI적으로 발전시켜보고 싶다.
아쉬운점
사실 아쉬운 점이라기 보단 프로젝트 과정에서 부정적으로 생각했던 부분일 것 같다.
1. 객관적으로 바라본 나의 실력
진짜진짜진짜 프로그래머스 데브코스에는 잘하는 분들이 너무 많다.
나는 마지막 쯤에 PR리뷰를 제출하였기 때문에, 나보다 먼저 제출하신 분들의 프로젝트를 염탐할 수 있었다. 진짜 너무 잘하신 분들이 많아서 깜짝 놀랐다. (노션 그 자체인줄...)
다른 분들의 코드를 보니 스스로가 너무 한심하고 부족하다는 생각이 들었다.
같은 출발선에서 시작하였는데, 어쩜 이렇게 다른지 모르겠다.
이번 일을 계기로 더욱 마음을 다 잡고 열심히해서 발전하는 내가 되고 싶다.
지금 당장은 비교되고, 부족하더라도 꾸준히 나아가다보면 분명 어느 순간 성장한 내가 있을 것이라 생각된다.
2. 바람직하지 못한 UI
UX적으로도 당연 부족하지만, UI도 심각하다는 생각을 다른 분들의 프로젝트를 보며 느끼게 되었다.
나는 미적 감각이 많이 부족한 것 같다.🎨
또한 내가 생각해 낸 디자인을 바로 적용하기가 힘든데, 이는 CSS가 많이 부족하기 때문이다. 멘토님께서 말씀하신 것처럼 FE 개발자에게 CSS는 정말 중요한 것 같다.
향후 프로젝트를 진행할 때도 웹 퍼블리셔가 존재할 것이라 생각하지 말고, 내 스스로의 힘으로 유저가 사용하고 싶어하는 서비스를 만들고 싶다.
그러려면 CSS 공부 게으르게 하지 말자!
