프로젝트 CFD 회고

엘리스 SW 엔지니어 트랙 2기 두 번째 프로젝트 CFD 회고

시작

이번 프로젝트는 React 기반으로 컴포넌트를 잘 분리하고, Custom Hook을 사용하는 것을 목표로 시작했다. 프로젝트 주제의 경우 개발자를 위한 커뮤니티 플랫폼으로 하여 포트폴리오, QnA를 메인 기능으로 하기로 했다.

5명 중 백엔드 2명, 프론트엔드 3명으로 구성되어, QnA 파트를 담당했다. QnA 파트는 기본적인 질문 CRUD에 더해 답변과 댓글 CRUD, 에디터, Markdown 에디터 등이 기본 기능으로 들어가며 추가적으로 답변 좋아요 기능, 검색, 무한 스크롤 등을 담당하게 되었다.

프로젝트 주요 기능

- 유저
    - 회원가입
        - 소셜 로그인 -> Oauth [Github,Kakao]
        - 이메일 인증 -> Nodemailer [Gmail SMTP]
    - 로그인
        - access token, refresh token [Jwt]
        - Cookie
    - 로그아웃
    - 회원정보 수정
    - 회원탈퇴
        - soft delete
    - 비밀번호 변경 (소셜 로그인 가입자 x)
    - 유저 프로필 조회 (본인/다른 유저 구분)
    - 작성한 포트폴리오 조회
    - 스크랩한 포트폴리오 조회
    - 질문 글 조회
    - 답변 글 조회
- 포트폴리오
    - 포트폴리오 조회
        - infinite scroll
    - 포트폴리오 작성
      포트폴리오 수정
        - editor.js
        - 이미지 업로드 -> Multer & Firebase storage
    - 포트폴리오 삭제
    - 포토폴리오 검색 -> MongoDB searchIndex, 동적 필터
    - 포토폴리오 추천 & 스크랩
    - 포토폴리오 댓글 CRUD
- QnA
    - editor.js를 활용한 질문 작성 및 수정
		- 질문 삭제 및 조회
		- editor.js를 활용한 답변 작성 및 수정
		- 답변 삭제 및 조회
		- 답변 추천 기능
		- 답변에 대한 댓글 작성, 수정, 삭제, 조회
    - 질문 검색 -> MongoDB searchIndex
    - infinite scroll을 추가한 질문 목록
- 에러 페이지
    - 404 페이지

진행 중 이슈

라이브러리 선정 이슈

프로젝트 기간 내에 에디터를 구현하는 것은 기간에 맞추지 못할 것이라고 생각하여 에디터는 라이브러리를 활용하기로 했는데, React에 적합한 라이브러리를 선정하는 것이 조금 더 효율적이고 커뮤니티 프로젝트이므로 에디터가 다른 부분에 비해 중요도가 낮기 때문에 다른 부분의 로직을 구현하는 것이 더 중요하다고 생각했다. 하지만, Editor.js를 활용하게 되었고, 라이브러리 공식 문서는 상세히 잘 나와있으나 가장 큰 문제는 에디터를 적용하는데 필요한 코드가 과도하고, 원하는 수준으로 활용하기 위해서는 수많은 추가적인 패키지를 설치해야만 했다.(참고)

백엔드 개발자와의 커뮤니케이션 이슈

첫 번째로는, API를 만들 때 약속된 엔드포인트는 다음과 같다.

const response = await axios.get(`/api/qna/${qnaId}`);

하지만 데이터를 가지고오는데 에러가 자꾸 발생하기에 Postman이나 함께 활용하는 Notion, Discoard를 모두 찾아봤지만 관련된 이슈에 대한 언급이 없어 개인적으로 연락을 했으나, 하루 지나서 답변을 해주더니 자기가 엔드포인트롤 변경했다고 말해서 하루를 아쉽게 날리고, 이를 다음과 같이 수정했다.

const response = await axios.get(`/api/qnas/${qnaId}`);

이미 약속된 부분과 다르게 개발하는 것도 아쉽지만, 이를 공지하거나 혹은 물어봤을 때 바로 답변을 했었다면 조금 더 여유롭게 작업할 수 있지 않았을까 하는 아쉬움이 있었다.

이후 유사한 상황이 또 존재했다. 발생한 에러는 다음과 같다. 특정 Id를 가진 답변에서 좋아요 버튼을 클릭하는 경우에도 항상 첫 번째 게시글의 좋아요가 늘어나는 이슈였다.

백엔드 개발자 분이 수정하시다가 커밋을 올려서 발생한 문제여서 해결해달라고 요청했지만, 확인을 하지 않으셔서 시간이 지체됐다.

마무리

이번 프로젝트는 전반적으로 아쉬웠다. 물론 실력이 부족하여 라이브러리 활용에 문제가 있었고, 댓글 관련 렌더링 이슈가 있어 우선 강제 새로고침으로 해결한 후 이후에 수정하는 등 시행착오가 많아 시간이 부족했다. 이에 추가적으로 백엔드 개발자와의 소통 과정에서 연락이 되지 않아 API 에러로 인해 작업을 하루이틀 정도를 진행하지 못해 무한 스크롤의 경우 검색과정에서 제대로 데이터를 넘겨주지 못하는 이슈가 존재했다.

협업의 중요성과 관련 문서의 중요성을 뼈져리게 느꼈고, 아직 실력이 부족해 빠르게 문제를 해결하지 못하고 검색과 검색과 검색을 해야하는 점이 정말 아쉬웠다. 조금 더 성장하는 개발자가 될 수 있도록 해야겠다.