미리보기

데이트 아이디어를 공유하고 위치 기반 유저 추천을 통해 회원 간 매칭 및 실시간 좋아요, 채팅 기능을 제공하는 데이팅 애플리케이션 서비스

RizzPick : RizzPick Site 바로가기
Figma : RizzPick Figma 바로가기
GitHub : RizzPick GitHub 바로가기
Project : RizzPick Project 바로가기

Develop

1. 회원 가입, 로그인

• Axios와 SWR 활용하여 회원 가입 및 일반 회원 로그인 기능 구현
• Next.js 미들웨어를 이용한 미로그인 및 미등록 유저 라우터 처리

2. Websocket과 Stomp를 활용한 채팅 기능 및 Context API를 통한 상태 관리

• 새로운 메시지 도착 시, 'ChatContext'라는 Context API를 통해 해당 채팅방 정보를 실시간으로 업데이트. 사용자가 로그인 후 참여하는 채팅방 리스트를 실시간으로 관리하는 시스템 구현

3. SSE를 활용한 좋아요, 매칭 실시간 알림 기능 구현

• Context API를 사용해 전역 상태를 관리하고, Next.js의 'Root Layout.tsx'에서 새 알림이나 오류, 타임아웃 발생 시에만 데이터를 불러오도록 설정

4. 반응형 웹 디자인 구현

• CSS 미디어 쿼리를 사용하여 순수 CSS 기반 반응형 디자인 구현
• 렌더링 방식에 따라 CSS 미디어 쿼리와 react-responsive 라이브러리를 통해 반응형 처리
• Next.js의 반응형 웹 디자인을 구현하기 위해, 데이터 패치를 담당하는 서버 컴포넌트와 이벤트 처리 및 사용자 인터페이스를 관리하는 클라이언트 컴포넌트를 Next.js 공식 사이트의 권장 기준에 따라 분리하여 구현

Performance

1. CSR에서 SSR 및 SSG 렌더링 방식으로 전환, 평균 로드 시간 29.53% 개선
2. 컴포넌트 내부 함수 최적화 및 로컬 상태 초기화를 통해 DOMContentLoaded 이벤트 발생 시간 평균 25.33% 단축
3. 번들 분석 및 최적화

Trouble Shooting

1. 서버와 클라이언트 간 HTML 불일치 문제
2. 반응형 웹 디자인에서 발생하는 서버와 클라이언트 구성 요소 불일치 문제
3. SSE 연결 요청의 불필요한 반복 문제

낚시를 하는 장소, 어종등을 낚시꾼들간에 공유하며 그날의 월척을 자랑하는 서비스

FishingLoad : FishingLoad Site 바로가기
GitHub : FishingLoad GitHub 바로가기
Notion : FishingLoad Notion 바로가기

Develop

• 개발 환경 구성 및 서비스 개발 방향 설정
• 팀 내 TypeScript 및 Next.js 도입
• Naver Web Dynamic Map API 활용하여 포인트 등록 시 입력한 주소로 마커 생성
• Daum Post-Code를 사용해서 주소를 입력받고, KaKao Map API의 Geocoder를 통해 해당 주소 데이터 조회 기능 구현
• 메인 페이지 구현
• 상세 페이지 구현
• 댓글 추가, 삭제, 수정, 대댓글 기능 구현