프로그래머스 1차 장기과제로 Notion 클로닝 프로젝트를 진행했다. 약 1주일간의 기간 동안 그동안 배운 내용을 바탕으로 Notion의 기본 기능을 완성하는 것이 목표였다.
클론 프로젝트를 하면서 매일 회고를 작성했더라면 지금 회고록을 작성하기 편할텐데... 그 당시에는 머리속에 프로젝트를 끝내야한다는 생각 때문에 작성하지 못했다...
때문에 지금 와서 돌이켜보면 하나하나 상세한 모든 것을 기억하지는 못하지만 그래도 프로젝트를 진행하면서 겪었던 어려움에 대해서 돌아보면서 부족했던 부분을 인지하고 개선해보려 한다.
고차 함수 map
main 브랜치는 내것이 아닌데...
PR제출을 위해서 working 브랜치와 과제 제출용 브랜치를 만들고 working 브랜치에서 작업을 하다가 어느날 c커밋을 했는데 브랜치가 main으로 되어 있었고... Github 과제 레파지토리에는 내 작업물이 올라가 있었다
처음 커밋을 한게 아니고 그 전에는 분명 내 working 브랜치였는데... 너무나도 당황스러웠고 이 부끄러운 코드를 다른 사람들이 볼까봐 두려웠다. 🥵
구글에 검색을 해보면서 어찌저찌 로컬에서는 커밋을 취소 했었는데, main 브랜치에는 여전히 남아 있었고 다행히 slack와 나와 같은 실수를 하셨던 분이 있어서 그분의 질문에 답변해주신 멘토님들의 방법을 참고해서 다시 돌릴 수 있었다
처음 만나는 <details> 태그
상권님의 도움으로 details 태그를 사용하면 노션처럼 토글 처럼 하위 문서를 보이거나 안보이게 할 수 있다는 것을 알고 적용시켜봤다.
<li> 태그를 사용할 때는 몰랐었는데, <details> 태그를 사용하니까 문서의 수정, 추가, 삭제로 인해 List를 랜더링 할 때 마다 <details>태그가 닫혀버리는 현상이 발생했다. 이것 또한 든든한 팀원분들의 도움으로 Map을 사용해서 details 태그의 open 상태를 저장하도록 만들고 랜더링 될 때마다 이 상태의 값을 바탕으로 details 태그의 상태 유지를 가능하게 할 수 있었다.
CSS는 너무 어렵다...
예전에 MFC, Qt 프로그래밍을 할 때, UI는 대부분 drag & drop으로 필요한 아이템들을 가져와서 마음대로 조절할 수 있었다. 또한 그 아이템의 속성을 검색해보면 쉽게 사용할 수 있었지만, CSS를 사용하려니 속성값들을 어떻게 써야 하는지, 좋은 방법은 어떤것인지 알 수가 없어서 너무 어렵게 느껴졌고
어느정도 노션과 비슷하게 만들었다고는 생각하지만 매우 불안정하고 구글에서 검색해서 얻어온 코드들도 있어서 동작의 원리를 제대로 이해하지 못한채 사용하는 것도 있었다.
다행인건 어제 4.21 박영웅 멘토님의 강의를 통해서 CSS를 어떻게 사용해야하는지 조금은 알 수 있게 되었다 ~~
컴포넌트 구조화
보너스 요구사항
보너스 요구사항으로 있는 rich Editor를 만들어 보려 했으나. 생각보다 Notion의 기본 기능을 완성하는데 시간이 오래 걸렸고, CSS 작업을 앞두고 있는 상황에서 도저히 시간적으로 무리일것 같아서 포기했다.
이 프로젝트를 여기서 끝낼 생각은 없기 때문에 앞으로 리팩토링을 하면서 반드시 추가해야할 기능으로 생각하고 다시 도전해봐야 겠다!
정리
약 1주일 간의 프로젝트 였고 많은 시간을 쏟아부었다고 생각하지만 그 만큼의 성과가 있었는지는 모르겠다. 프로젝트를 끝내고 PR까지 작성하고 나서 다른 분들의 PR을 보면서 너무나도 강한 현타를 느끼고 나는 왜 이렇게 못할까 라는 생각이 들었다. 솔직히 데브코스를 시작하기에도 부족한 실력이라 느껴져서 포기하고 싶다는 생각도 조금 들었다.
하지만 리아 매니저님이 말씀하신 것처럼 다른 사람들과 비교할 필요 없이 나는 성장했다고 느낀다. 컴포넌트, State 같은 개념이 전무했던 나였지만 그래도 state를 사용하면서 SPA 프로그램을 어떻게 작성해야 하는지, 프론트 엔드가 무엇인지 조금은 알 게되었다고 생각한다. 이 프로젝트를 계속 리팩토링 하면서 앞으로 더 성장해 나갈 것이라 생각한다 😄