미리보기

MLB Stats API 데이터를 활용하여 실시간 야구 데이터 분석 및 해당 데이터를 활용한 유저 참여형 달러 게임, 커뮤니티 기능을 가진 종합 서비스 개발

서버 개발

MLB 데이터 수집 및 달러 게임 점수 계산 시스템 구현과 서비스에 사용할 API구현

• 공식 가이드가 부재한 MLB Stats API를 심층 분석하고 에러시 추적에 용이한 로깅 시스템 구축(실시간 대응을 위해 이메일 서비스 도입)

• 실시간 경기 데이터 모니터링 배치 서버 개발 (2분 간격 자동 업데이트)

• 선수 정보, 달러 게임, 사용자 관리 REST API 설계 및 구현

• 각 단계별 로그 수준(info, warn, error) 분리 및 맞춤형 로깅 모듈 개발

기술스택: Nest, typeORM, PostgresSQL, Winston(logging), yarn workspace(모노레포)

프론트 개발

사용자 경험 최적화 및 데이터 시각화

• 디자이너와 소통하며 카드 디자인, 스크롤 효과 등 인터랙티브 UI 구현.

• React Query 커스텀 훅 설계로 프론트 API 연동 표준화

• 하나의 페이지에 컴포넌트별 로딩 처리를 통한 사용자 체감 속도 개선

• 달러 게임 인터페이스, 선수/팀 데이터 시각화, 경기 결과 화면 개발

• 커뮤니티 게시판 기능 구현

기술스택: Next15, tailwind, daisyUI, TanStack Query, TypeScript

인프라 구축

비용 효율적인 개발 환경과 안정적인 운영 환경 설계

• 개발 환경: 자체 PC 서버 활용 및 GitHub Actions 자동 배포 구성으로 비용 절감

• 운영 환경: AWS 서비스 활용 (API 서버-App Runner, 배치 서버-EC2, 프론트-Amplify)

• 데이터 저장 및 처리 과정의 위험 요소 식별 및 클라이언트와 협업하여 리스크 관리 전략 수립

서비스 링크

체육관 영상/점수판 통합 운영 프로젝트. 하나의 웹서비스로 PC의 웹뷰와 태블릿 PWA로 모두 운용 가능하도록 개발.

• 실시간 경기 데이터 동기화: SWR을 활용해 선수 점수, 경기 이벤트 등 주요 데이터를 Polling 방식으로 실시간 동기화. 경기 중 태블릿에서 입력된 점수가 즉시 PC 전광판 및 웹 UI에 반영.

• 멀티 디바이스 대응 및 컴포넌트 재사용: 점수판 운용 기능을 PC와 태블릿 환경 모두에서 일관되게 사용할 수 있도록 서버 데이터를 재사용 가능한 훅으로 구현. 태블릿에서 사용하는 컴포넌트를 PC 페이지에 그대로 적용하여 재사용성을 극대화했습니다.

• 자주 변경되는 디자인에 대한 대응: 프로젝트 특성상 자주 변경되는 기획에 맞춰 Recoil을 통한 상태관리로 어디서든 상태에 접근 가능하도록 구조를 개선했습니다.

기술 스택: React 18, Vite, Recoil, SWR, TailwindCSS, DaisyUI

응원 메시지가 담긴 책자를 가자지구에 전달 하는 프로젝트. 웹 사이트로 전 세계의 응원 메시지와 후원금을 모으는 것이 목표

• NCP, Git Action으로 배포 자동화

• SQLite를 활용해 테스트 API서버 구현.

• 웹 애니메이션 구현: parallax 스크롤링, Opacity fade-in을 모듈로 제작 후 npm배포

• 테스트를 위해 개별 컴포넌트: 스토리북 배포

기술스택 : Next13, SCSS, StoryBook, TypeScript, SQLite, NCP

Github, 포트폴리오

여행 투어를 예약, 탐색할 수 있도록 돕고, 스케줄러 기능을 통해 여행을 보다 즐겁고 편안하게 만드는 여행 스케줄러.

프론트개발

1. 여행상품 목록, 예약 관리 페이지 등 목록 페이지에서 Grid, Flex를 활용해 반응형 디자인 구현.

2. Google Map API를 활용하여 일정에 대한 장소 정보 연동(사진URL,전화번호, 위치)

3. React-Query를 통해 서버데이터 상태관리.

기술 스택: Next13, React-Query, sass-module, MUI

백엔드개발

1. 정의된 ERD를 활용해 패키지 여행 예약 부분 API명세 - 노션으로 작업 공유

2. Sequelize(MYSQL), Express를 활용해 Router-Controller-Model 구조로 구현.

3. S3, Multer모듈 사용해 이미지 업로드를 위한 미들웨어 구현.

기술 스택: Express, Sequelize, MYSQL, AWS S3, Multer

포트폴리오, Github