KPT 회고

<aside> 👏 Keep

• 기능 우선 개발로 단기간 내 요구사항 완료
• 디자인시스템 작성으로 스타일 코드 작성 용이
• 팀원 간 의사소통 원활
• 빠른 의사 결정
• 기능별 모듈화 (기능적 충돌 저하)

</aside>

<aside> 🚨 Problem

• 기획서 디테일 부족
• git-flow 전략 부족
• 잦은 충돌(데이터 통일성, 코드스타일)
• git commit과 pr 작성 방식에 관한 컨벤션 부족

</aside>

<aside> 💡 Try

• 컴포넌트 간 데이터 교환 방식 일관성 있게 개선 필요 → 도식화
• storybook 작성으로 컴포넌트 세부 사항 사전 정의
• git 사용법 사전 숙지
• commitizen 등을 도입해 git 관련 컨벤션 수립
• pr에 대한 개인별 코드리뷰 후 자동 merge하는 시스템 수립
• 파일별로 담당자를 지정해서 충돌이 나도 담당자의 pr로 통일

</aside>

구성원 총평

상준

<aside> 🐻‍❄️ 개인이 아니라 팀으로 프로젝트를 해보는 경험이 처음이라 많은 어려움이 잇었지만 팀원들과 같이 해결하고 프로젝트를 구성하는 것이 재미있었습니다.

</aside>

지영

<aside> 🐶 데브코스에 지원한 가장 큰 이유였던 협업 경험을 프로젝트를 통해 이룰 수 있었고, 기획과 디자인, 개발까지 팀원들과 함께하며 혼자서는 할 수 없었을 것들을 이룰 수 있었습니다.

</aside>

용록

<aside> 🐱 프로젝트 규모에 따른 복잡성을 느꼈다. 유기적으로 연결된 기능들 속에서 구성원 간 의사소통이 중요했다. 연쇄성을 줄이기 위해 컴포넌트적인 프로그래밍을 구성했고, 기대 이상의 성과를 거뒀다.

</aside>

최종 회고

• 프로젝트 계획 핵심기능(로그인, 회원가입, 포스트 작성/삭제/수정, 코멘트 작성/삭제)을 우선한 기능위주의 개발
  • 장점 빠른 개발 템포를 가져올 수 있었다. 실제로, 타 팀들 보다 빠르게 개발을 시작했고 시간적인 여유를 챙길 수 있었다. 또한 핵심기능 위주로 완성하는 애자일한 계획을 세웠기에, 시간 내에 가능한 기능을 최대한 많이 구현할 수 있었다.
  • 단점 기획이 부실했다. 허술한 계획에 기능은 다양하지만, 기능들이 프로젝트의 목표와 크게 융화되지 않는 느낌을 받았다. 또한 코딩 컨벤션도 확실하지 않았다. 코드 스타일 측면에서 지저분했기에 아쉬움이 남는다.
• 개발 프로세스 컴포넌트별로, 기능별로 나눠서 효율적으로 작업을 분담했다.
  • 장점 기능분리가 잘 되어있어서, merge 충돌도 적었고 개발하면서 혼선이 생기는 일이 적었다. 게다가 각자 최초로 맡은 파트를 기준으로 점점 기능을 넓혀가기에도 용이했다.
  • 아쉬운 점 어쩔 수 없이 공통적인 부분이 있었다. api 호출, 상태관리, local storage 사용 부분이었는데, 공통 함수 부분에서 미리 룰을 정해뒀다면 코드가 더욱 간결해졌을 거란 아쉬움이 남는다.
• 총평 기능위주 개발과 효율적인 컴포넌트 분리로 빠르게 핵심기능을 완성할 수 있었다. 하지만, 디테일한 부분에서 소홀해졌고, 다른 사람에게 설득할 문서가 빈약해지는 단점이 있었다.
• 리팩토링 계획 새로운 기능을 추가하기 보다는, 기존의 기능을 더욱 깔끔하고 완성도 있게 다듬는 작업에 중점을 두고 싶다.
  1. 게시글 HTML태그 현재 게시글 내용을 string으로 받고 있는데, 이를 HTML태그로 입력/배치되는 형식으로 수정하고 싶다. 현재 줄바꿈 처리도 안되는데, 당연히 반영되어야했던 부분을 놓쳤다.
  2. input 체크 회원가입 항목, 글 작성 항목 등에서 입력값이 반드시 필요한 부분이나 정해진 규칙을 따라야 하는 부분을 미리 체크하는 로직을 더욱 치밀하게 해야한다. 잘못된 input값이 서버로 전송되지 않는 것이 프론트의 가장 큰 역할이라고 생각하는데, 이 부분에 소홀했다.
  3. 검색 기능 개선 검색은 백엔드의 기능이긴 하지만, 프론트 차원에서 결과를 필터링해서 표시해주는 정도로 세심한 구현이 가능하다고 생각한다. 검색결과를 세밀하게 걸러내기만 해도 사용자 경험이 크게 오를 것이다.
  4. 공통 함수 통합 api호출, store상태관리 등 비슷한 기능을 하는 함수들이 난립해있다. 해당 기능들을 parameter에 따라 유연하게 대처가능한 형태로 통합하면 코드 수를 크게 줄일 수 있다.
  5. 로그인 체크 현재 localStorage에 로그인 정보가 남는다. 보안 문제는 팀 합의로 감수하는 부분이다. 하지만 브라우저의 로그인 정보token가 서버측에서 만료되는 것에 대해 대처를 못했다. 메인 페이지, 로그인 정보가 필요한 기능에서 로그인 유효성을 확인하는 로직을 추가해야한다.
  6. 폴더명 및 파일명 통합 현재 중복된 코드들로 파일명과 폴더명 역시 중복되거나 구체적이지 않게 작성되어 있다. 따라서 공통 코드를 먼저 정리한 후 그에 따라 파일명 및 폴더명을 정리해 전반적인 통일성을 높인다.
  7. api 파이어베이스로 교체 api 보안문제를 해결하고 프로젝트의 public 전환을 위해 파이어베이스를 사용한다.
  8. 컴포넌트에 props를 전달해서 독립성 있는 컴포넌트로 리팩토링 vuex의 상태의존성을 낮추고, 컴포넌트의 독립성을 높인다.
  9. github action으로 merge후에 바로 배포되도록 환경 구축 배포 프로세스를 간단화하여 개발 속도를 높인다.
  10. typescript 도입 향후 표준화될 것 같은 typescript를 적용하여 연습도 하고, 프로젝트의 확장가능성에 대비한다.
  11. css 라이브러리 적용(tailwind) 반응형, 다크모드 등 사용자 경험을 높일 수 있는 기능들을 보다 쉽게 적용할 수 있을 것으로 기대된다.
  12. 로딩 애니메이션 추가 로딩 애니메이션 등 사용자 경험을 향상시킬 수 있는 요소들을 추가해 서비스의 완성도를 높인다.