Angola

• 서비스 바로가기

• 깃허브 바로가기

🔎 프로젝트 소개

• 사용자는 A vs B 형태인 전체 밸런스 포스트들을 최신순으로 조회할 수 있습니다.

• 사용자는 밸런스 포스트에 대해 투표하고, 의견을 남길 수 있습니다. 이 후 결과를 볼 수 있습니다.

• 사용자는 포스트에 좋아요를 남길 수 있습니다.

• 사용자는 전체 포스트, 유저를 조회할 수 있으며 검색할 수 있습니다.

• 포스트를 최신순, 좋아요 순으로 볼 수 있습니다.

• 유저를 팔로워 순, 레벨 순으로 볼 수 있습니다.

• 사용자의 레벨은 (작성한 글 수 + 작성한 댓글 수) 입니다.

• 레벨이 올라감에 따라, 작성한 글의 UI 가 변화합니다. 레벨 상승 시, 축하 팝업을 볼 수 있습니다.

👩🏻‍💻 개발 내용

1. 유저 레벨 기능 (↗️)

• 사용자의 포스트 개수 + 댓글 개수를 클라이언트에서 계산하여 레벨이 달라지는 기능을 구현했습니다.

• recoil 을 활용하여 유저의 레벨 정보를 전역적으로 저장하고, react-query/useMutation 의 onSuccess 에 레밸 데이터 갱신 로직을 연결하여 포스트/댓글 작성 시 전역 데이터가 업데이트 되도록 구현하였습니다.

• React/useRef 훅을 통해 이전 레벨을 저장하고, 레벨 상승이 발생할 시 Portal 로 일관된 DOM 위치에서 나타나는 팝업창을 구현했습니다.

2. A vs B 형식 포스트 기능 (↗️)

• 각 게시글은 [제목, 항목A, 항목B] 3개의 필드가 필요했으며, 댓글은 [선택지, 이유] 2개의 필드가 필요했습니다.

• 하지만 api 명세 상으로는 게시글, 댓글 모두 사용 가능한 속성이 1개 밖에 없었습니다.

• 식별자 문자열을 설정하여 POST 요청 시에는 join 을 거쳐서 보내고 GET 요청한 데이터는 split 하는 아이디어를 내고, 로직을 작성했습니다.
• joinDataBySeperator, splitPostBySeparator, splitCommentBySeparator 유틸을 구현하였습니다.

• 식별자는 키보드로 타이핑 불가능한 값으로 설정하고 환경 변수로 암호화하여, 서비스 기능이 안전하게 작동하도록 하였습니다.

👥 협업 과정

팀 문화 구축

• ‘우리는 하나다’ 라는 문화를 기반으로, 서로의 이슈상황을 즉시 공유할 수 있는 팀 규칙을 제안했습니다.

• 후반으로 갈 수록, 큰 이슈에 대한 팔로우업 시간을 가질 필요 없이 다 함께 솔루션을 제시할 수 있어서 문제 해결 속도가 증가했습니다.

머지 데이

• 스프린트 단위로 개발을 진행하며, 스프린트 마지막 날을 머지 데이로 설정했습니다.

• 머지 데이에는 개발한 기능을 병합하고 발생하는 에러들을 함께 해결하고자 하였습니다.

• 각 스프린트 시 서로 어떤 작업을 진행했는 지 파악하기 수월했으며, 맡은 역할에 대한 의존성이 감소하였습니다.