미리보기

기간 : 2025.01.01 ~ 2025.01.21 / 링크 : Github Repository, View Website

스택 : React, Next.js, Tailwind CSS, JavaScript, SCSS, GSAP, Vercel, GitHub Actions

개인이 사진, 음악 등 문화적 기록을 전시하기 위해 제작한 웹 포트폴리오 프로젝트

담당 분야

• 애니메이션 구현: Parallax, GSAP를 사용해 스크롤, 페이드 등 다양한 인터랙션 구현

• 중앙집중화: 각 섹션별 스크롤 트리거 로직을 단일 컴포넌트로 통합, 불필요한 "use client" 선언 최소화

• 스타일링: Tailwind CSS 및 SCSS로 반응형 디자인 적용

• 배포 파이프라인: GitHub Actions를 이용한 CI/CD와 Vercel 자동 배포 설정

성과

• 성능 지표 개선 🔗PR comment

  • LCP 30.4s → 2.6s, Speed Index 23.5s → 5.6s (애니메이션 로딩 및 이미지를 최적화하고, GSAP 초기화를 중앙집중화한 결과)

• TBT 안정화 🔗PR comment

  • ScrollTrigger 중복 초기화 제거로 Total Blocking Time이 11,800ms에서 5,850ms로 감소

• 코드 유지보수성 향상

  • 공통 애니메이션 로직을 한 곳에서 관리해 코드 중복을 30% 이상 제거, 프로젝트 구조가 단순해지고 가독성이 향상됨

• 반응형 UI 완성도

  • Tailwind CSS와 SCSS를 병행 사용해 스마트폰, 태블릿, 데스크톱 등 다양한 해상도 지원

• 자동 배포 환경 구축

  • GitHub Actions + Vercel로 푸시 시마다 자동 배포되어 개발 속도 40% 단축

기간 : 2024.07~2024.09 / 링크 : Github Repository

스택 : Html CSS JavaScript React React-redux redux-thunk customHook Axios Sass

위치기반 애견 호텔 예약서비스 및 고객 맞춤 간식구독 서비스, 커뮤니티 서비스

담당 분야

• 호텔 예약 시스템: Redux 상태 관리로 스텝 기반 예약 페이징 처리, 검색/조회/예약 페이지 개발

• 카카오 API 연동: 지도 조회, 주소 검색, 카카오페이 결제 기능 구현

• UX/UI 개선: 모션, 슬라이더 라이브러리로 유저 친화적 반응형 디자인 적용

• 디자인: 🔗Figma를 활용한 UI/UX 설계 및 메인 페이지 랜더링

• CI/CD 구축: Docker + GitHub Actions를 활용한 자동 배포 환경 설정

성과

• Drawer 리렌더링 최적화 → FPS 30 → 50~60 개선, Reflow 60% 감소, 모바일 UX 향상

• Redux 캐싱 최적화 → API 호출 40% 감소, 로딩 속도 1.8초 → 1.0초 단축

• 공통 컴포넌트 모듈화 → 중복 코드 20% 감소, 유지보수 시간 50% 단축

레저·아웃도어 위치 정보(캠핑장, 낚시터, 해수욕장 등)를 제공하는 모바일 앱.

공공데이터 API, OpenStreetMap(Leaflet) 등을 활용하여 직관적이고 간편한 UI/UX를 구현함.

ㅤ

Github : https://github.com/stars/jehoonje/lists/campridge

• 사용자 인증 & 로그인

  • React Native에서 카카오/구글 OAuth 및 이메일 회원가입 기능 지원

  • 인증 성공 시 Spring Boot 서버로부터 JWT(Access/Refresh 토큰) 발급

  • AuthContext를 통해 전역 인증 상태 관리, 사용자 정보 조회, 로그아웃 기능 구현

  ㅤ

• 부트 스플래시 (BootSplash)

  • RNBootSplash 라이브러리 활용, 앱 실행 시 로딩 화면 → 데이터·지도 준비 완료 후 스플래시 종료

  • 초기 로딩 시간을 기존 대비 약 40% 단축하여 사용자 이탈률 감소

  ㅤ

• 지도(WebView + Leaflet) & 마커 클러스터링

  • React Native WebView로 map.html 파일을 로드, Leaflet + OpenStreetMap 기반 지도 구현

  • 백엔드 서버와 JSON 통신으로 장소별 마커 표시, MarkerClusterGroup을 통한 최대 3,000개 마커 효율적 클러스터링

  • 마커 클릭 시 WebView → React Native 간 메시지 전송, 상세 화면으로 이동 (navigation.navigate)

  • 지도 데이터 로딩 속도 30% 개선 (필요 데이터 선별 후 전송)

  ㅤ

• 즐겨찾기 & 검색 & 상세 화면

  • 다중 레이어로 즐겨찾기 기능 제공, 별도 API로 DB 저장 및 조회

  • 통합 검색으로 다중 카테고리(캠핑장, 낚시터, 해수욕장 등) 필터링 가능

  • debounce로 불필요한 검색 트래픽 약 35% 절감, 평균 검색 응답 시간 0.5초 이내

  • 상세 화면에서 장소 이미지, 리뷰, 지도 정보 등 확인 가능

  ㅤ

• 데이터 흐름 & 스케줄러

  • 공공데이터 API를 통한 초기 데이터 수집 후 DB에 저장, 트래픽 과부하 방지를 위해 스케줄러로 정기 업데이트로 최신 정보 유지

  • AxiosInstance로 서버와 통신, useEffect / useFocusEffect 등 React Hook을 통해 상태관리

  • 오류 처리, 로딩 처리, 재요청(Refresh 토큰) 등을 통해 안정적인 데이터 제공

    ㅤ

  ㅤ

• 마이페이지 & 로그아웃

  • 사용자 프로필(닉네임, 사진) 수정 및 정보 조회 기능 구현

  • 로그아웃 시 Access/Refresh Token 초기화, AuthContext 갱신

    → 1초 이내 세션 정리

  ㅤ

• UI/UX & 반응형 디자인

  • 다중 레이어 드롭다운 메뉴로 위치 정보 필터링 구현

  • 리뷰 시스템, 즐겨찾기 기능 등 사용자 친화적 인터페이스 설계

  • Figma로 UI 프로토타입 작업 → React Native 컴포넌트로 제작

  • 현재 구글 플레이스토어 비공개 테스트 진행 중

ㅤ