[회고록] 2차 프로젝트를 마치며
목차
🧊 프로젝트 개요
📖 프로젝트 목표
모프는 누구나 스터디 및 프로젝트를 함께 할 팀원을 모집하고, 참가할 수 있고, 열심히 완성한 프로젝트를 자랑할 수 있도록 플랫폼을 구축하려고 한다. 또한, 통일성있는 스타일과, 쉽고 간편한 상호작용을 통해 사용자에게 최선의 UX/UI와 모바일 사용자를 위한 반응형 페이지를 제공한다.
진행 기간
- 2023년 5월 29일 ~ 2023년 6월 22일 (4주)
팀 구성
- Front-End: 6명, Back-End: 1명
기술 스택
- React, TypeScript, Recoil, Sass, Node.js, Expree.js, MySQL
프로젝트에서 담당한 기능 (Front-End)
- 마이페이지
- 회원 정보 수정 페이지
- 기술 스택 컴포넌트
- 챗봇 컴포넌트
- 에디터 코드블록 처리
- 메인 페이지 UI
- 404 에러 페이지
- 모집완료 리스트 모달 컴포넌트
🧊 프로젝트 진행 과정
📖 매일 두 번의 데일리 스크럼
우리는 아침 11시 ~ 저녁 11시까지 게더타운에 필수로 참여하고 오후 12시에 한 번, 오후 9시에 한 번 해서 30분 내외로 데일리 스크럼을 진행했다. 첫 번째 스크럼 때는 전 날 진행하면서 새로 발견한 이슈 공유나 오늘 진행할 것에 대해 얘기를 나누는 시간이었고, 두 번째 스크럼 때는 당일에 개발한 결과물 혹은 트러블 슈팅등을 공유하고 머지하는 시간을 가졌다. 기존 팀 프로젝트에서는 한 번씩만 진행했었는데 두 번씩 하게 되니 결과물을 보여줘야한다는 의도치 않은 강박관념이 다들 생긴 나머지, 3주 안에 진행해야하는 프로젝트에 맞게 빠른 속도로 개발하고 에러를 잡아내며 프로젝트 효율이 대폭 상승했다.
📖 프론트와 백의 소통
프론트 팀원이 6명이고 백 팀원이 1명인 상황이라 개발속도가 당연히 같을 수 없었다. 우리가 선택한 방법은 API가 나오기전 프론트에서 목데이터를 가지고 개발을 진행하기로 했다. 우선 백엔드 팀원분이 노션에 API 명세서를 작성해주시고 해당 API의 response를 서로 협의해가며 맞춰가고 해당 데이터 타입과 구조가 확정되면 프론트에서 목데이터를 만들어서 화면에 데이터를 띄울 수 있도록 진행했다. 그래서 백엔드에서 API가 개발되면 바로 요청 경로만 수정해서 빠르게 개발을 진행할 수 있었다.
📖 테스트 과정
매주 주말마다 배포를 하고 프로젝트 마지막 주에는 매일 배포를 진행했는데, 프로젝트 배포를 하고 나서부터 로컬에서는 보이지 않았던 에러들이 배포환경에서 보이기 시작했다. 우리 팀은 깃랩에다가 실서버 QA를 진행하고 노션에 테스트 케이스를 남겨서 각자 확인해야할 테스트를 문서화 했다. 테스트 케이스의 경우 로컬과 실서버, 추가로 진행한 반응형에서도 잘 보이는지 까지 경우를 나눠서 본인이 개발한 컴포넌트, 페이지의 테스트를 진행했다. 그리고 실서버 QA는 서로 테스트 하면서 보완점이 있을 경우 깃랩 이슈에 남겨서 소통을 진행했다. 테스트 과정도 문서화를 진행하니 어떤 에러가 나고있는지 모든 팀원이 빠르게 파악할 수 있고 도움을 줄 수 있었다.
🧊 프로젝트를 통해 배운 점
📖 의미있는 코드 작성
프론트 코치님께서 강조해주신 내용 중 하나가 로직을 이렇게 작성한 이유 혹은 해당 라이브러리를 사용한 이유 등 어떤 근거를 가지고 코드를 작성하고 있는지에 대한 것이다. 처음에는 그냥 수업을 들으며 배운 것들을 토대로 작성한 것 밖에 없어서 이 질문에 대해 선뜻 대답할 수 없었다. 시간이 지날수록 프로젝트를 진행해보니 코더처럼 단순히 프로그래밍만 하는 게 아니라 어떻게 하면 좋은 코드를 작성할 수 있을까 하는 고민을 시작해보게 되었다.
기억나는 질문이 텍스트 에디터 라이브러리 중 퀼 라이브러리를 사용하였는데 왜 이 라이브러리를 선택했는지 물어보는 질문이다. 퀼 라이브러리를 선택한 이유가 가장 많이 사용하는 텍스트 에디터 라이브러리이기도 하고 그러다 보니 공식문서는 물론이고 구글링했을 때 참고할 수 있는 내용이 많아서 선택했다고 답변했다. 하지만 해당 라이브러리가 리액트 생명주기에 맞지 않을 수 있어서 라이브러리를 선택할 때도 현재 개발환경에 맞는 생명주기인지 한 번 찾아보면 좋을 거 같다는 답변을 주셨다. 찾아보니 react-quill이라는 리액트로 개발할 때 사용하기 편리한 리액트버전의 퀼이 있었다. 너무 리액트에 국한되어서 개발하는 것이 좋다고 생각하지는 않지만 빠르게 결과물을 만들어 내야하는 프로젝트인 만큼 라이브러리도 조금 더 신중하게 찾아봐야겠다는 생각을 하게 되었다.
📖 useMemo, useCallback으로 메모이제이션
useMemo는 특정 값을 메모이제이션하는 훅, useCallback은 특정 함수를 메모이제이션하는 훅이다. 공식문서에 따르면 기본적으로 구성 요소가 다시 렌더링되면 React는 모든 하위 항목을 재귀적으로 다시 렌더링한다. 하지만 이전 렌더링과 값이 같을 경우에는 렌더링을 건너뛰어서 성능 향상을 시킬 수 있다는 장점이 있다. 항상 useState와 useEffect만 남발하면서 코드를 짰었는데 이런 훅을 통해서 재렌더링을 피할 수 있다는 점을 배울 수 있었다. 프로젝트 막바지에 알게되어서 담당했던 기능쪽에서 모든 컴포넌트에서 적절하게 사용하지 못한 아쉬움이 있지만 다음 기회가 된다면 조금 더 캐싱도 신경 쓰면서 해당 훅을 써보고 싶다.
🧊 프로젝트를 진행하며 아쉬운 점
📖 테스트 코드 작성
사실 테스트 케이스를 작성하면서 각자 jest로 테스트 코드를 작성해보려는 노력이 있었으나 이미 개발이 완료되는 시점에서 진행하다보니 많은 에러와 config로 맞출 것들이 많으면서 테스트 케이스에 맞는 테스트 코드를 작성할 수 없었다. 또한 어느 단위까지 테스트를 해야하는지 감이 잡히질 않아 테스트 코드 작성은 결국 제대로 진행하지 못했다. 코치님의 조언도 있었는데, 만약 지금처럼 프로젝트 막바지인 상황에서 테스트 코드를 작성하게 된다면 비즈니스 로직보다는 유틸성 코드에 테스트코드를 붙여보는 방향으로 진행하는 것이 좋고 실제로는 운영하면서 서비스 로직이 많이 들어가는 코드는 변동이 빈번하게 되고 그 때마다 테스트 코드를 작성해야한다는 점에서 여러모로 어려운 점이 많다고 알려주셨다. 결론적으로는 테스트 코드가 잘 작동되도록 컴포넌트를 만들었어야하고 지금 같이 컴포넌트를 다 만들고 테스트 코드를 작성하는게 쉽지 않다는 것도 알게 되었다.
🧊 프로젝트 결과
📖 시연 영상
📖 서비스 주요 기능 설명
홈
- 캐러셀
- 최신 모집글
- 인기 프로젝트 자랑글
- 인기 기술 스택 순위
로그인
- 이메일 로그인
- 카카오 로그인
마이페이지
- 회원 정보 조회
- 모집글 / 프로젝트 자랑글 / 북마크 / 댓글 모아보기 기능
회원정보 수정
- 기본적인 회원 정보, 프로필 이미지, 기술 스택 등 수정 가능
회원 탈퇴
- 계정 정보 및 모든 서비스 이용 기록 삭제
게시글 리스트
- 무한 스크롤, 검색, 모집 상태 필터링, 카테고라이징 기능
게시글 상세 페이지
- 모집 상태, 북마크, 공유하기, 모집글과 프로젝트 자랑글 연결 기능
게시글 작성/수정 페이지
- 임시저장 / 미리보기
- 프로젝트 참여 유저 및 모집완료 프로젝트 조회 기능
댓글
- 댓글 등록 / 수정 / 삭제 / 복사 기
- 댓글 작성자 클릭 시 유저 페이지로 이동
- 대댓글 기능
챗봇
- 자주 묻는 질문에 대한 답변 및 바로가기 기능
- 팀이메일 바로 보내기 기능
모바일 사용자를 위한 반응형 제공
라이트 모드 / 다크 모드 제공
🧊 마치며
리액트로 개발하는 두 번째 팀프로젝트였다. 프론트와 백 비율이 너무 달라서 우리 잘 할 수 있을까 걱정이 많이 됐는데 최우수상까지 받아서 정말 뜻깊은 시간이 아닐 수 없었다. 다른 팀들은 기능도 더 많고 정말 잘했지만 완성도 측면에서 수상을 하지 않았나 조심스럽게 추측해본다. 한 주만에 1차 구현 기능을 전부 구현하고, 성능 개선을 위한 고민도 해보고 막바지에는 하루 만에 다크모드를 지원할 수 있도록 UI를 변경하는 등 정말 능력좋은 팀원들과 함께 프로젝트를 할 수 있어서, 또 상까지 받아서! 너무 좋았다. 가장 기억에 남을 프로젝트가 될 거 같다. 우리 ICE 팀원들 증말루 사랑합니다💙
