[React] Day_55 팀 프로젝트 후기

 

마듀 장착한 카이바쿤.

 

말도많고 탈도많은(?) 아웃소싱 뿌로작뜨.

그래도 계획했던 기능구현들은 다 해따고 한돠..

그래서 말인데 나는 내 UI가 고쳐진... 친구를 PR하고 싶다...

(PR 하게 해주라. . . 나 진짜 CSS만 고쳤단 말임 ㅠ)

여튼 오늘은 프로젝트 정리로 TIL를 작성하겠읍니다. 가보자고.

(이미지 하나하나가 오늘만큼은 쌈뽕하고 좋으니 많이들 퍼가3)

 

 

팀 프로젝트 - 아웃소싱 프로젝트 ( Mountain-Due Project)

줄여서 마듀. 다들 아시죠? ^-^)b

 

로고 이미지 이뻐서 냅다 올리지만? 불펌못하게 막아야지 히히! 사용하면 ^^.. (오열)

 

아웃소싱 프로젝트 (1) - 프로젝트 개요

추운 날씨에도 실내에서 즐길 수 있는 클라이밍!

하지만 관련 정보를 찾기 어렵다는 점에 착안하여,

“Mountain-Due (줄여서 마-듀.)”라는 클라이밍 정보 플랫폼을 제작했다

 

여튼 중대 문자라고요.

 

목표

• 사용자 위치 기반으로 주변 실내 클라이밍장 정보 제공
• 카카오 지도 API 및 유튜브 API를 활용해 쉽고 직관적인 UX 제공

 

아웃소싱 프로젝트 (2) - 주요 기능

 

1. Main Page

 

- 주요 특징

• 사용자의 현재 위치 또는 광역시를 기준으로 클라이밍장 정보를 확인 가능
• 카카오 Maps API를 활용하여 클라이밍장의 위치를 시각적으로 제공
• 페이지네이션으로 많은 정보를 효율적으로 볼 수 있도록 구성

 

2. My Page

 

- 사용자 정보 관리

• 닉네임 중복 검사 기능
• 닉네임 및 프로필 사진 변경 시 버튼 활성화
• 추후 더 많은 사용자 정보를 포함할 계획

 

3. Auth

로그인, 회원가입 둘다 ^-^)b

 

- 사용자 인증

• TanStack Query와 Supabase Auth를 이용한 안전한 회원 관리
• 회원가입 - Google 소셜 로그인 및 약관 체크 기능 포함
• 로그인 - 이메일/비밀번호를 통한 기존 사용자 인증

 

4. Detail Page

좋아요 이미지는 엄. 수정된 부분이 있어 가져왔습니다.

 

- 상세 정보 제공

• 지도에서 장소 마커 클릭 시 상세 페이지로 이동
• 좋아요 및 댓글 기능 구현 (낙관적 업데이트 적용)
• 사용자가 좋아요를 누른 클라이밍 장소를 모아볼 수 있는 페이지 제공

 

5. Youtube Page

 

- 클라이밍 관련 동영상 제공

• 유튜브 PlaylistItem API를 활용하여 API 할당량 절약
• useInfiniteQuery를 이용한 더보기 기능 구현
• 초심자 및 흥미로운 클라이밍 관련 동영상 제공

 

아웃소싱 프로젝트 (3) - 기술 스택

• 전역 상태 관리 : Redux Toolkit (RTK), Redux Persist
• 서버 상태 관리 : TanStack Query
• Data Fetching : Axios
• DB : Supabase
• 스타일링 : Tailwind CSS
• 라우팅 : React Router DOM (RRD), React DOM (포탈 기능 활용)
• UI/UX : React-Icons, Sweet Alert2, React-Toastify, React Hook Form
• 배포 : Vercel

 

아웃소싱 프로젝트 (4) - 피드백 관련 KPT 회고

Keep (잘한 점)

 

- 전반적인 프로젝트 퀄리티

• UI/UX의 디테일과 완성도가 높아 많은 긍정적인 피드백을 받음.
• TanStack Query, Supabase 등 최신 기술 스택을 활용하여 기능 구현을 효율적으로 처리.

- 회원가입/로그인 기능

• Google 소셜 로그인과 유효성 검사 로직의 구현이 매끄러웠음.
• 실시간 유효성 검사와 제출 버튼 로직을 설계한 점에서 좋은 평가를 받음.

- 지도 Interaction

• 사용자 위치 기반 지도 기능의 활용이 프로젝트의 목적에 잘 부합하고, 자연스러운 UX를 제공함.

- 전역 상태 관리와 코드 관리

• Redux Toolkit을 활용한 상태 관리가 명확하고 깔끔하게 구현됨.
• commit convention과 PR 관리가 잘 이루어져 협업에서의 체계성이 돋보였음.

- 좋아요 및 낙관적 업데이트

• 좋아요 기능에 낙관적 업데이트를 적용하여 사용자의 경험을 강화.

 

Problem (개선할 점)

 

- 이미지 파일 최적화 부족

• 이미지 용량이 너무 커서 제출 시 파일ZIP이 100MB를 초과. 이는 페이지 로딩 속도 및 서버 부하 문제를 유발할 가능성이 있음.

- UX 개선 필요

• 현재 좋아요 버튼을 disabled 처리했지만, 회원가입/로그인을 유도하는 방식이 더 나은 UX로 평가됨.
• 유튜브 카드에서 transform만 적용했으나, transition을 추가하여 시각적 매끄러움을 더할 필요가 있음.

- 불필요한 커스텀 훅 사용

• useUser 커스텀 훅의 필요성이 의심됨. 기존 상태 관리로 충분히 커버 가능한 상황임.

- 이미지 파일 관리 방식

• public과 src의 의도를 명확히 구분해야 함.
• public 디렉토리에 이미지를 저장할 경우 검색 크롤링에 걸려 불필요한 요청이 발생할 가능성이 있음.

- 낙관적 업데이트 시 UX 개선 필요

• 낙관적 업데이트로 더보기 기능을 눌렀을 때 잠깐이라도 로딩바 표시가 추가된다면 사용자 경험이 더욱 향상될 것.

 

Try (시도할 점)

 

- 이미지 최적화 작업

• Squoosh를 활용해 이미지 용량을 최적화하여 로딩 속도를 개선하고 서버 부하를 줄임.
• 이미지 파일의 크기와 퀄리티를 고려하여 리소스를 효율적으로 관리.

- 좋아요 UX 개선

• 좋아요 버튼을 비활성화 처리하는 대신, 회원가입/로그인을 유도하는 메시지나 모달을 띄워 전환율을 높임.

- 유튜브 카드 UX 개선

• transform 외에 transition 효과를 추가하여 카드 이동 시 시각적 완성도를 강화.

- useUser 제거 검토

• 커스텀 훅의 필요성을 재검토하여 불필요한 코드를 줄이고 상태 관리를 더 효율적으로 구성.

- 로딩바 추가

• 좋아요 기능이나 더보기 버튼 클릭 시 로딩바를 추가해 사용자에게 진행 상황을 명확히 전달.

- 이미지 파일 관리 체계화

• public 디렉토리와 src 디렉토리의 용도를 명확히 분리하여, 검색 크롤링과 불필요한 요청을 방지.

 

 

 

 

 

마무리 -  림졍 NEVER CRY... (오열)

 

발표 PPT 마지막 자룐데, 이번엔 진짜 가지고와야해서 가져와봤습니다.

 

 

이번 프로젝트를 진행하며 팀원들과 자체적으로도 KPT 회고를 진행하였는데

한줄로 정리하면 원활한 소통과 협업이 돋보였으나, 작업 진행 상황 공유와 역할 분배의 명확성이 부족하여 아쉽다는 이야기가 있었다.

 

이번엔 특히 리더십의 다양한 형태와 팀워크의 중요성을 배울 수 있는 계기가 되었다.

늘 나의 경우는 팀장을 맡으며 수직적인 구조보다는 유연하고 수평적인 팀워크를 추구하는 편인데,

이러한 방식이 모든 팀원에게 익숙하지는 않아 적응의 어려움을 겪었던 팀원이 있어 이 부분이 매우 아쉬웠달까..

앞으로는 팀원의 개별 스타일과 적응 속도를 더 세심하게 고려하며, 모두가 편안하게 협업할 수 있는 환경을 조성하기 위해 노력해야겠다.

 

비록 완벽하지는 않았지만, 이번 회고를 통해 문제를 분석하고 해결 방안을 도출하면서

다음 프로젝트에서는 더 나은 팀워크와 결과물을 기대할 수 있는 밑거름으로 만들어봐야징.

 

“팀은 함께 성장하는 사람들의 모임이다.”

다음 프로젝트에서도 성장하는 팀원이자 책임감 있는 리더가 되기를 다짐하며,

아듀, 마듀!