미리보기

1) 개요

• 개인 프로젝트

• 링크: 배포 사이트, 깃허브

2) 기술 스택

• React, Typescript, Recoil, React-Query, Styled-Components, Supabase

구현 내역

• 주간 인기 키워드 기능: 사용자 검색어에서 유의미한 키워드를 추출하고, 검색 빈도수를 기준으로 인기 키워드를 선정하여 제공함으로써 커뮤니티 내에서 많이 검색되는 키워드를 쉽게 파악할 수 있도록 구현. 또한, SQL 트리거 함수를 사용해 생성된 지 7일이 지난 키워드를 자동으로 삭제하도록 구현.

• 이미지 로드 최적화: react-image-file-resizer 라이브러리를 사용하여 유저가 첨부하는 모든 이미지를 WebP 형식으로 변환하고 크기를 조정하여 storage에 저정되는 이미지 용량 약 29% 감소.

• Lazy-loading 구현: IntersectionObserver를 이용해 화면에 즉시 표시되지 않는 슬라이드 이미지를 실제로 필요할 때 로드되도록 처리하여 초기 로딩 속도를 단축.

• 슬라이드 이미지 미리 로드: 슬라이드 전환 시 다음 슬라이드 이미지를 미리 로드하도록 구현해 전환 시 발생할 수 있는 지연을 최소화하여 사용자 경험을 향상.

• 그 외 기능들과 주간 인기 키워드 기능의 데이터 흐름을 시각적으로 쉽게 이해할 수 있도록 시퀀스 다이어그램으로 정리했습니다. → link

1) 개요

• 참여인원 6명 ( FE 2명, BE 4명)

• 링크: 배포 사이트, 깃허브, 노션

2) 기술 스택

• React, Typescript, Recoil, Tanstack-Query, Tailwind CSS, Chakra Ui

3) 기여도 60%

• 와이어프레임, 메인페이지, 경매 아이템을 조회할 수 있는 페이지, 포인트 충전, 경매 생성, 채팅, 알림, 회원가입, 로그인, 아키텍처 제작
  

4) 구현 내역

• 인증 프로세스: 사용자가 로그인 시 Access Token과 Member ID가 발급되어 로컬스토리지와 리코일 상태에 저장. 이후 Access Token이 만료되면 refresh Token을 이용해 자동 갱신하여 인증을 유지하며. 로그아웃 시에는 로컬스토리지와 리코일 상태에서 모든 사용자 정보를 삭제하여 인증을 해제.

• 실시간 알림: 로그인 후 SSE를 통해 서버와 연결하여 실시간 알림을 수신, 수신된 마지막 이벤트 ID를 로컬스토리지에 저장하여 알림 수신이 끊겼다가 다시 연결될 때도 놓친 알림을 다시 받아볼 수 있도록 구현. 이후 로그아웃 시에는 SSE 연결을 해제.

• 실시간 가격 변등: WebSocket을 사용해 서버와 연결하고 입찰 진행 중에 발생하는 경매 데이터(경매 ID, 회원 ID, 입찰 가격)를 실시간으로 수신하여 화면에 즉각 반영하고 컴포넌트가 언마운트될 때 WebSocket 연결을 종료하도록 구현.

• 실시간 채팅: WebSocket을 사용해 사용자가 특정 roomId에 해당하는 채팅방에 연결되도록 구현. 채팅방 입장 시 roomId를 기반으로 해당 채팅방의 이전 메시지 기록을 불러오고, 이후 채팅 중에는 roomId를 구독하고 있는 다른 사용자들에게 새로운 메시지가 실시간으로 전송되도록 처리.

• 실시간 경매 입찰: WebSocket을 통해 사용자가 경매 상세 페이지에 입장하면 서버와 연결되어, 입찰 시도 시 회원 정보와 입찰 금액을 서버에 전달하도록 구현. 이후 다른 사용자가 입찰할 때마다 서버로부터 실시간으로 데이터를 받아 recoil 상태 변화를 통해 클라이언트 화면에 즉시 반영하여 경매 진행 상황을 실시간으로 업데이트.

• 데이터 흐름을 시각적으로 쉽게 이해할 수 있도록 시퀀스 다이어그램으로 한번 더 정리했습니다. → link