[재호팀] 노션 클로닝 프로젝트 회고

KPT 회고 방법론을 이용하여 회고를 진행하였습니다.

Keep

🐈 은아

• 프로젝트를 시작하기 전에 컴포넌트나 페이지에 대한 상태, 함수, 데이터 흐름 등을 미리 정하고 프로젝트를 진행하려고 했고 플로우 차트를 만들어서 코드를 작성할 때 보다 명확하게 작성할 수 있었습니다.

• css는 최대한 노션과 가깝게 적용하려고 했고 처음으로 Scss를 이용하여 스타일링을 해보았는데 편리함을 많이 느꼈습니다.

• 강의에서 배웠던 낙관적 업데이트, 이벤트 델리게이션 등을 구현하면서 사용해볼 수 있어서 신기하고 좋았습니다.

🐏 지원

• 프로젝트 준비하기 위해 먼저 각 컴포넌트가 처리할 상태, 이벤트, 및 데이터 흐름 기준으로 노션에 계획했으며 코드 작성할때 정리한 내용을 따라보면서 개발을 더욱 쉽게 접근할 수 있었습니다.

• 기본 HTML & CSS 마크업을 해서 원하는 페이지 레이아웃을 먼저 구축하고 컴포넌트 DOM 렌더링 스크립트에 붙여넣을 수 있어서 좋았습니다.

• 자주 사용할 함수를 (예. addClass, removeCass, createElement) helper.js에 미리 만들어서 사용했습니다.

🐂 혜준

• 프로젝트 과정을 잊지 않기 위해 기록을 해야겠다고 생각하였고, 프로젝트 과정을 노션에 정리하면서 진행하였습니다. 발생한 에러, 해결하기 위해 고민한 점, 해결 방법 등을 간략히 정리하였습니다.

• 클론 프로젝트인 만큼 해당 서비스와 UI를 비슷하게 가져가고자 하였습니다. 초반에는 이러한 스타일링에 신경쓰지 않고 대략적인 기능을 모두 구현한 뒤 이 작업에 들어갔는데, 수정해야 하는 부분이 굉장히 많았습니다. 초반에 프로젝트 설계를 할 때 UI를 필수로 고려해야 한다는 것을 알게 되었습니다.

• 강의에서 배운 디바운싱, 낙관적 업데이트, 커스텀 이벤트 등을 직접 사용해볼 수 있어서 좋았습니다.

• 사용자가 보다 더 나은 경험을 할 수 있도록 신경을 썼습니다. 화면 깜빡임 현상 등 불편하다고 느껴지는 부분을 수정하기 위해 노력하였습니다.

• netlify를 사용하여 배포를 하였습니다. 배포를 하면서 API endpoint를 감추기 위한 방법을 알게 되었습니다.

🦨 충일

• 자바스크립트로 프로젝트를 만들어보았다는 부분에 대해 의의를 크게 두었습니다.

• HTML과 CSS, 그리고 JS를 라이브러리 도움을 받지 않고 도전해서 좋았습니다.

• 강의에서 나온 부분들에 대해서 직접 해볼 수 있는 기회가 있어서 좋았습니다.

🦖 천욱

• 단순히 클론과 기능 구현에만 그치지 않고, 프로젝트 배포를 하고 누군가한테 보여주겠다는 마음으로 개발을 진행했습니다. 누군가가 사용할 때 어느 부분들이 불편할까에 대해 생각했고, 그런 부분들을 생각하며 개발함으로써 제 생각보다 괜찮은 퀄리티의 프로젝트가 완성됐습니다. 이런 부분들은 앞으로도 유지하면 좋겠다고 생각합니다.

• 프론트엔드 프로젝트를 쉽게 배포하는법까지 강의에 나와있어서 쉽게 따라할 수 있었습니다. 처음으로 vercel에 배포해보면서 하나의 프로젝트를 완성했다는 뿌듯함도 느낄 수 있었습니다. 배포라는 것에 대한 막연한 두려움?같은게 있었는데 그걸 허물수 있는 좋은 계기가 되었던 것 같습니다.

• 디바운스나 낙관적업데이트를 실제로 써보면서 서비스 흐름이 유연해지는걸 느낄 수 있었고, 앞으로 다른 프로젝트를 하면서도 쓸 수 있을 것 같은 자신감이 생겼습니다.

• React Redux처럼 상태관리를 하면서 개발해볼까 했지만 중간에 기능구현을 먼저 하자 라는 생각으로 포기한 것이 아쉽습니다. redux를 써보지 않아서 이해하는데에 시간이 많이 걸렸습니다. 이 부분은 꼭 다시 공부해야겠다고 생각했습니다.

Problem

🐈 은아

• api에서 가져오는 데이터를 어느 화면에서 불러오고 데이터가 흘러가는 지에 대해 잘 못 파악하고 있는 부분이 있어서 개발 시에 렌더링이 안되거나 데이터를 불러오지 못하는 문제가 있었는데 중간에 다시 플로우 차트를 만들어보면서 해결했습니다.

• 리치에디터에 대한 이해도가 부족해서 focus나 저장 부분에서 제대로 된 구현을 하지 못했는데 리팩토링하며 해결해 나갈 예정입니다.

🐏 지원

• 어느 컴포넌트 안에서 API 호출을 할지 결정하는데 어려움을 느꼈습니다
• 예. DocList 안에서 POST 하면, 생성된 documentId를 어떻게 Editor로 전달하는지?

• setState 할때 스크롤 위치 유지하는 작업 중 DOM 요소를 다루는 이벤트가 해당 요소를 직접 렌더링하지 않는 컴포넌트에서 조작해야만 하는 상황에 어떻게 하면 컴포넌트들간의 의존성을 최소화시키면서 이벤트 핸들링을 할지에 대해 많이 고민했습니다.

🐂 혜준

• 프로젝트 초반에 컴포넌트 구조와 UI를 조금 더 신경써서 설계를 했다면 나중에 고생을 조금 덜 했을 것 같습니다. 조금 더 깔끔한 컴포넌트 구조를 가져갈 수 있었을 것 같고, 현재 발생한 문제인 문서 생성, 수정 삭제시에 발생하는 열려있던 하위 페이지들이 모두 닫히는 현상을 미리 고려해볼 수 있었을 것 같습니다.

• 프로젝트를 진행하면서 비동기와 관련된 지식의 부족함을 느꼈습니다. 코드의 위치에 따라서 실행 결과가 달라지는 점에서 어려움을 느꼈습니다.

• 프로젝트를 늦게 시작하면서 제가 만족할 수 있을만큼의 마무리를 하지 못했습니다.

🦨 충일

• 시간투자를 많이하지 못하여서 아쉬운 부분이 있습니다.

• 화살표 함수로만 사용하다 this등 function 기능을 사용하려고 하니 생각보다 어려운 지점들이 많았습니다.

• 일정을 정확히 세우고 진행해야겠다고 생각했습니다. 최근 들어 소홀해진 경향이 많아서 그 부분에 대해 바로 잡아야겠다고 생각했어요.

🦖 천욱

• 처음엔 개발하면서 생겼던 문제나 고민들 하나하나를 노션에 기록하면서 진행하려고 했지만, 생각보다 어려움을 느꼈습니다. 프로젝트 초반엔 짧게나마 기록하면서 진행했지만 프로젝트 후반쯤엔 데드라인안으로 만들어야된다는 생각때문에 개발에만 시간을 쏟은 것이 아쉬움으로 남습니다.

• 너무 명령형 프로그래밍으로 코드를 짜서 재사용성이 낮다는 점이 아쉽습니다. 지금 코드에선 UI를 조금만 수정해도 바꿔야 할 부분들이 많기 때문에 유지보수하기 힘들 것 같다는 생각이 듭니다. 이런 부분은 리팩터링을 하면서 고칠 수 있는 부분인 것 같습니다.

• 주석을 상세히 달지 못한 점이 아쉽습니다. 협업이 아닌 개인 프로젝트임에도 불구하고 프로젝트 후반쯤엔 제 코드를 제가 이해해야되는 상황이 발생했고 그 부분에서도 시간을 많이 낭비했던 것 같습니다. 그런 과정을 겪으면서 주석의 중요성을 알 수 있는 시간이었던 것 같습니다.

Try

🐈 은아

• 리치에디터 스타일 저장 문제

• 리스트 이동시 화면 깜빡임 문제

• 렌더링 시 토글 스타일 초기화 문제

• 새로운 페이지에서 글 생성 후 페이지 이동 시 썼던 내용이 없어지는 문제

• 배포

🐏 지원

• 리치 텍스트 에디터 기능 구현하기

• 접근성 고려사항에 맞춰 키보드 네비게이션 작업

• 배포

🐂 혜준

• 다음 프로젝트에서는 초반에 UI, 데이터 플로우, 컴포넌트 구조 등을 모두 생각해 본 뒤 프로젝트를 시작하겠습니다.

• 자바스크립트에 대한 더 많은 공부가 필요할 것 같습니다.

🦨 충일

• 일정 계획 세우기

• 데브코스에 시간 더 투자하기

• 자바스크립트, 함수에 대해 더 알아보고 강의 열심히 듣기

🦖 천욱

• 리팩터링을 우선적으로 해야겠다고 생각합니다. 현재 코드에선 중복된 코드들도 몇몇 있어서 그런 부분들을 고치고, 어느 역할을 하는지 주석도 상세히 적겠습니다.

• ES6문법을 자세히 공부해야할 것 같습니다.

• 앞으로 만들면 좋을 기능들
하위페이지가 많아질 것을 대비해서 리스트 사이즈 조정 (마우스로 resize하기)
글 수정할 때 수정 성공인지 실패인지 사용자에게 알려주기
리치 에디터 구현해보기