[SSAFY 7기]공통프로젝트 "더민트" 후기

🧑🏻‍💻 담당 역할

• '더민트' 서비스 기획
• 경매 준비 및 경매 스트리밍 서비스 개발
  • OpenVidu와 WebSocket을 활용한 webRTC 실시간 스트리밍 개발
• 웹 알림 서비스 개발
  • Notification API 활용한 브라우저 알림 서비스
• 채팅 서비스 개발
  • sockjs와 stompjs 활용
• 회원가입, 로그인, 정보관리 서비스 개발
  • React-hook-form을 이용한 회원가입 form 관리
  • Recoil, React-Query를 사용한 회원 정보 상태 관리
  • 휴대폰 인증을 통한 회원가입
• 서비스 메인 홈 페이지 개발
• 경매, 상품, 프로필 검색 서비스 개발
• 경매 품목 페이지 개발
• 404 Not Found 페이지 개발
• Recoil과 React-Query를 이용한 상태 관리
• 재사용 향상을 위한 무한 스크롤 컴포넌트 및 Skeleton UI 구현
  • React-Query의 useInifiniteQuery와 IntersectionObserver Api 활용
• styled-components를 이용한 CSS-in-JS 방식 스타일링 구현

✏️ 프로젝트를 통해 배운 점

• OpenVidu를 활용한 WebRTC: 생소하게 여겨졌던 webRTC를 조금이라도 쉽게 프로젝트에 도입하고자 openvidu 라이브러리를 도입하였다. 도입함에 불구하고 공식 문서에 내용이 별로 없었기 때문에 참고용으로 제공하는 코드들을 한 줄씩 일어가며 해당 메서드가 어떤 역할을 하는지 파악해야 했었다. 혼자 시작했지만 그 내용이 너무나 벅찼기 때문에 팀원과 함께 스터디를 하며 코드를 한 줄씩 파악하였고, 각각의 메서드가 어떤 역할을 하는지 알 수 있게 되었다. 추후 개인의 devices에 접근하여 카메라를 on/off 하고 마이크도 선택적으로 컨트롤할 수 있게 만들었기 때문에, webRTC를 활용한 프로젝트를 이후에 또 하게 된다면 더욱더 잘 이용할 수 있을 것 같다.
• SockJS와 stompjs를 활용한 websocket 채팅 및 경매 스트리밍 실시간 경매: websocket을 상대방과 실시간으로 데이터를 주고받을 때 서버가 어떤 역할을 수행해하며, subscribe를 통해 클라이언트 간의 통로를 열어주며 채팅을 주고받을 수 있다는 원리를 알 수 있게 되었다. 경매 스트리밍 페이지에 도입하기까지 오래 걸렸지만, 이후 1대 1 채팅 구현에서는 정말 간단하게 적용할 수 있게 되었다. 지금은 간단한 메시지 정도밖에 주고받지 못하지만, 추후 이미지 전달 등 무궁무진하게 활용할 수 있을 것 같다.
• Recoil과 React-Query: 프로젝트가 큰 규모는 아니지만 어느 정도의 상태 관리가 필요하다 여겼고, 그동안 학습해보고 싶었던 두 상태 관리 라이브러리를 도입할 수 있었다. 우선 기존의 redux의 러닝 커브로 인해 react를 처음 사용하는 두 팀원이 단 시간에 적용하기 어렵다 판단하였고, 서버 데이터와 클라이언트 데이터를 분리하여 관리하여 하나의 스토어에 집중도를 낮추기 위해 recoil과 react-query를 각각 도입하게 되었다. recoil은 redux에 비해 devtools를 제공하지 않고 아직 완전한 기능을 갖추었다고 보기 어려웠지만 해당 서비스를 사용함에 있어 적당한 기능을 제공했다고 생각한다. 그리고 react-query를 도입하여 서버 데이터의 상태 관리를 수행하였고, 무한 스크롤 컴포넌트를 구현함에 있어 해당 기술을 통해 사용자 경험성 또한 좋아졌다고 생각한다.
• React-Hook-Form: 로그인 및 회원가입 등 다양한 form을 작성하는 데 있어 밸리데이션 등 유용한 기능을 가지고 있다고 판단하여 도입하였다. 자체 회원가입 기능에 있어 정규표현식, required 등 정말로 많은 곳에서 밸리데이션 항목이 필요하였고, 각각의 메서들을 별도로 구현하는 것이 아니라 해당 라이브러리의 도움을 받아 수월하게 검증작업을 수행할 수 있었다.
• React.Memo를 활용한 리 렌더링 줄이기: map을 적극적으로 사용하여 컴포넌트를 재사용하며 코드 수를 줄일 수 있었지만, 하나의 컴포넌트에 대한 값이 변경될 경우 모두 재 렌더링이 발생하는 문제가 있었다. 특히 1:1 채팅의 경우 채팅창 하나를 컴포넌트로 분리하였고, socket에 의해 채팅을 주고받을 때마다 채팅을 state에 저장하고 추가적으로 렌더링을 시키려고 하였다. memo를 사용하기 전에 메시지가 추가될 때마다 기존에 저장된 메시지까지 모두 재 렌더링이 발생하여 100개의 메시지가 있었을 때 100번의 렌더링이 추가적으로 발생하게 되는 것이었다. 하지만 memo를 사용하여 리 렌더링 성능 최적화를 이룰 수 있었다.

✅ 프로젝트에서 아쉬운 점

• 이미지 리사이징을 통한 최적화 부재
  • 성능 최적화 작업을 수행하기 CLS를 0.2로 낮추고 select 옵션을 통해 기본 로고의 png, webp를 통해 브라우저에 따른 이미지 확장자를 선택하도록 하였으며, banner와 logo 등의 이미지 비율을 일치시켜 퍼포먼스 성능을 올릴 수 있었다.
  • 하지만 사용자가 직접 이미지를 등록하여 해당 이미지가 컴포넌트의 메인에 나타나면서 S3에 올라간 파일에 대한 확장자를 변경하지 못하였고, 카드의 이미지 비율을 4:3으로 고정해두었기 때문에 img 태그의 object-fit으로 cover를 사용하여 이미지의 비율을 다르게 했기 때문에 퍼포먼스가 떨어졌다. 이미지 리사이징을 도입해 해당 퍼포먼스의 성능을 올리지 못해 아쉽다.
• typescript 미도입
  • react에 대한 프로젝트 경험이 있었기 때문에 해당 프로젝트에 typescript를 도입해보고 싶은 욕심이 있었지만, react를 새롭게 배우는 팀원들로 인해 ts까지 도입은 무리라 판단이 되어 도입하지 못하였다. 추가적으로 내가 한 부분에 대해서 ts를 도입하거나 다음 프로젝트에서 ts를 도입하기 위한 학습을 할 계획이다.

📌 향후 계획

• typescript 도입
  • 동적 언어인 js에서 발생하는 문제를 정적 언어인 typescript으로 전환하여 캄파일 단계에서 미리 오류를 발견할 수 있는 등 장점을 가졌기 때문에 추후 ts를 도입해서 프로젝트의 완성도를 높일 것이다.
• 상태 관리 라이브러리 선정
  • 상태 관리 라이브러리를 단순히 사용하기 쉽고 여부를 떠나서 논리적으로 판단하여 프로젝트에 알맞은 상태 관리 라이브러리를 도입할 계획이다.
• 리액트 성능 최적화

📌 프로젝트 후기

프로젝트 익명 후기

• 프로젝트에 대한 방향성을 먼저 제시하고 많은 부분을 리드하였기 때문에 이번 프로젝트에 대한 책임감과 부담감이 많이 있었다. 첫 협업 프로젝트를 경험하는 교육생들이 많았기 때문에 알려준 지식들을 잘 습득해나갔지만, 모두가 동일할 순 없었다. 프로젝트 진행에 많은 어려움을 겪는 사람도 있었다. 이 부분을 고려하지 못하고 프로젝트 방향을 계획했기 때문에 계획이 예상대로 진행되지 못하자 많은 일정에 많은 영향을 받게되었다. 프로젝트 계획 시 다양한 방향성을 고려하고, 조금 더 함께 성장할 수 있는 방향을 고민해봐야겠다.
• 프로젝트에 돌입할 때 이번 프로젝트를 통해 이루고자 한 목표를 반드시 설계를 하고 들어가야한다는 것을 깨닫게 되었다. 새로운 것을 시도해보는 것도 좋지만, 해당 프로젝트를 통해서 내가 이루고자하는 목표가 있다면 조금 더 깊게 학습하고 적용해 볼 수 있으며, 조금 더 해당 프로젝트가 의미가 있을 것이다. 이번 프로젝트에서 목표했던 포퍼먼스 향상에는 조금 미흡했지만, React.memo 등을 사용해서 재렌더링을 조금이라도 줄일 수 있었다. 다음 프로젝트에서는 퍼포먼스 최적화에 힘을 써보자!

---

더민트 프로젝트 이슈 및 해결 관련 글

• [React-Hook-Form] react hook form validate debounce 적용기
• [React-Query] react-query를 활용한 무한 스크롤 구현 에러 처리