미리보기

위치를 기반한 오프라인 취미활동에 재미를 더하고자 자신만의 장소를 기록하고 공유할 수 있는 서비스

nextjs recoil vanilla-extract supabase prisma authjs vercel

GITHUB | WEBSITE

• Next.js에서 Client 컴포넌트를 최대한 트리 하단으로 배치하여 SSR 과정에서 초기 렌더링 이후 요청되는 Client JS 번들 파일 크기 최적화 (556kb에서 531kb로 약 5% 개선)

• 동일한 URL 내에서 지도 컴포넌트와 리스트 컴포넌트 간 전환을 브라우저 내비게이션을 통해 제어하고자 History API를 활용한 상태관리 로직을 구현하여 커스텀 훅으로 제공

• Tanstack Query의 queryKey 기능을 활용하여 검색 키워드 추가 및 제거 과정에서 발생하는 검색 결과를 캐싱하여 서버 부하 약 5배 감소

• Recoil의 중복 key문제를 해결하기 위해 RecoilRoot를 활용하여 컴포넌트 간 Boundary를 설정하여 독립적인 상태 관리 수행

• Vercel의 이미지 최적화 비용 절감을 위해 단계적으로 browser-image-compression과, Lambda를 통한 리사이징을 적용했으나, 사용자 경험 저하로 인해 최종적으로 Weserv를 도입하여 비용 100% 절감 및 사용자 경험 개선

• 사용률이 저조할 때 접속 시 지도 정보 로딩이 지연되는 ColdStart 이슈 발생. 패키지 경량화로 번들 크기 감소 및 Cron 작업을 통해 지속적인 요청을 발생시켜 서버를 Warm 상태로 유지함으로써 초기 대기시간(TTFB)을 평균 1.4s에서 0.1s로 개선

특정 위치에서 일어난 사건이나 이야기를 익명으로 공유할 수 있는 위치 기반 SNS 서비스

nestjs aws ecs aws ecr aws sns aws sqs aws rds

GITHUB

• AWS의 ECS 기반으로 MSA 아키텍쳐를 설계하고 구축 및 사용자, 인증, 게시물 API 개발 등 프로젝트 전반 리딩 담당

• FE와 BE 간 반복적 소통 최소화를 위한 백오피스 관리 페이지 개발로 FE 개발 효율성 향상 및 데이터 검증 프로세스 간소화

• Mutation 요청 시 서비스 간 데이터 변경 사항을 반영하는 과정에서 서비스 다운으로 인한 데이터 유실 문제가 발생하여 이를 해결하고자 SQS와 SNS를 활용한 이벤트 기반 통신 방식을 채택. 서비스 다운 시에도 이벤트가 큐에 저장되어, 서비스 복구 후 큐의 이벤트를 처리함으로써 데이터 정합성 문제 해결

• FE와 BE 서버의 엔드포인트 주소를 논리적으로 분류하기 위해 서브도메인으로 구분하여 배포

• 팀원 간 기술 수준 격차와 제한된 시간 등의 제약 속에서 기술 부채를 최소화하는 것을 목표로 프로젝트를 진행하기 위해, 필요 기술과 변경된 인프라 환경을 주기적으로 시각화하여 공유 및 발표

클라이밍장 소개 및 관리 페이지 (외주)

next.js tailwind css google analytics aws s3

GITHUB

• Google Analytics에서 수집한 사용자 위치, 성별, 방문 정보 등을 다양한 차트와 그래프로 시각화하여 보여주는 대시보드 페이지 개발

• SideBar 애니메이션에서 레이아웃 스레싱으로 인한 성능 저하 문제를 식별. CSS GPU 가속 프로퍼티를 활용하여 렌더링 효율성 개선

• AWS S3의 pre-signed URL을 활용한 이미지 업로드 시스템 구축. 이를 활용한 종합적인 이미지 관리 페이지 및 API 개발

신세계 정용진 부회장이 추천하는 약 660여 개 맛집을 한눈에 확인할 수 있는 웹 서비스

nextjs styled-components google analytics

GITHUB | WEBSITE

• 수백 개의 맛집을 대상으로 검색할 때 불필요한 렌더링으로 인해 성능 저하 문제 발생. React.memo와 Throttle를 사용하여 리렌더링을 최소화함으로써 렌더링 성능 약 8배 개선

• SEO 최적화를 통해 LightHouse 지표를 약 1.5배 향상시켜 구글 검색 순위 1위를 달성. 이 후 유입이 증가하여, 누적 사용자 약 7천 명과 MAU 300명을 기록

Github의 잔디 달력과 Instagram의 스토리 달력을 결합하여 인생(vida)을 시각적으로 기록(log)하는 웹 서비스

reactjs recoil styled-components storybook nestjs aws lambda docker circleci nginx

GITHUB

• 이미지 업로드 시 최대 너비와 높이를 초과하면 리사이징하는 로직을 적용하여 이미지 로딩 시간 약 40% 절약

• Presentational & Container 패턴을 적용하여 비즈니스 로직을 분리

• StoryBook을 사용해 UI를 독립적으로 테스트하여 개발자 경험 및 안정성 개선

• Github의 잔디 달력 UI 및 Instagram 스토리 달력 UI 구현

• 트래픽에 비해 24시간 가동되는 EC2의 비용이 부담되어, 컴퓨팅 사용 시간에 따라 비용이 발생하는 Lambda로 배포하여 한 달 기준 약 13$의 비용 절약

독거 노인을 위한 재가봉사 매칭 웹 서비스

reactjs storybook react-redux styled-components nginx

GITHUB

• 홈과 로그인 페이지 개발 및 프로젝트 방향성을 주도하여 FE 리딩 담당

• 아토믹 디자인 패턴 적용으로 FE 팀원 간 개발 일관성 보장 및 모든 컴포넌트가 재사용될 수 있도록 개발

• Route별로 인가 로직을 선언적으로 적용하여 권한별 접근 제어 구현

• 프로젝트의 방향성을 유지하고 업무를 원활하게 진행하기 위해 8개월 동안 스크럼 내용을 지속적으로 기록하고 공유

• 6개월 동안 Git 심화를 주제로 정기 스터디를 진행하여, 전달 능력 및 발표 역량 강화

• 네트워크 및 AWS 클라우드 기술을 학습했으며, 우연한 발견 프로젝트를 진행하는 과정에서 AWS ECS 기반의 MSA 구축에 활용

• '헬스케어 바탕의 IM# 내 새로운 간편결제 시스템' 주제에서 FE와 BE 개발 담당

• 46개 팀이 참가한 대회에서 최종 4위 달성

• '골목 CCTV 데이터로 추출한 인구 밀집도를 기반으로 위험도를 분석하고, 지도를 통해 시각화하는 공공기관용 웹 애플리케이션' 주제에서 Kakao Maps API를 활용한 FE 지도 시각화 개발 담당

• 최우수상 수상

• '특정 위치에서 일어난 사건이나 이야기를 익명으로 공유할 수 있는 위치 기반 SNS 서비스' 주제의 '우연한 발견' 프로젝트에서 BE 및 FE 백 오피스 담당

• 장려상 수상

• '원 클릭 의료이용 솔루션' 프로젝트의 FE 개발 및 사용자 인터페이스 구현 담당

• 우수상 수상