미리보기

프로젝트 설명

사용자 맞춤형 여행 장소 탐색 및 일정 생성 플랫폼 개발 프로젝트

깃허브
Korip

팀 프로젝트 FE 2명 BE 2명

담당 성능 최적화, CI/CD 인프라, i18n 시스템

사용기술

프로그래밍 언어

HTML, TypeScript, JavaScript, CSS

도구 및 라이브러리

Vite, React, Yarn, TailwindCSS, Tanstack-Query, React-hook-form, MSW, i18next

상태관리

Zustand, contextAPI

기타/인프라

Git, GitHub Actions, RESTful API, AWS S3, CloudFront

[프론트엔드 렌더링 성능 최적화]

• 번들 분석(Rollup Visualizer)으로 불필요한 라우트 확인 후 코드 스플리팅(Lazy Loading) 적용으로 초기 번들 65% 절감 (1.6MB → 718KB)

• 2MB 로컬 가변 폰트를 Dynamic Subset CDN으로 교체하고 font-display: swap 적용으로 FOIT를 제거, 초기 네트워크 요청 병목 해소에 기여 (Speed Index 1.7초 → 0.9초)

• 최상단 노출 이미지는 priority props로 분기하여 fetchpriority: high를 적용하고, 나머지는 react-intersection-observer로 지연 로딩하는 방식으로 LCP 타겟과 일반 이미지를 구분하여 처리함.

• 결과적으로 Lighthouse 측정 기준 성능 총점 79점 ➔ 94점으로 상승시켰으며, LCP(최대 콘텐츠 렌더링 시간)를 3.3초에서 1.6초로 약 51% 단축, FCP 0.7초를 달성하여 체감 로딩 속도를 크게 향상시킴.

[CI/CD 파이프라인 구축 및 인프라 트러블슈팅]

• AWS S3와 CloudFront를 활용해 정적 웹 호스팅 및 CDN 인프라를 구축하고, GitHub Actions로 CI/CD 배포 파이프라인을 자동화함.

• 배포 후 API 요청 시 발생한 405 Method Not Allowed 에러를 디버깅하여, CloudFront의 Custom Origin 및 동작(Behavior) 라우팅 규칙을 재설정함으로써 프론트엔드 호스팅과 백엔드 API 통신 트래픽을 안정적으로 분리함.

• 관련 트러블슈팅 블로그 포스팅

[다국어(i18n) 시스템 구축 및 상태 동기화]

• i18next를 활용해 글로벌 사용자를 위한 총 4개 국어(한국어, 영어, 일본어, 중국어) 지원 시스템을 구축함.

• 브라우저 기본 언어 감지(ko-KR)와 서비스 지원 언어(ko) 간의 매핑 충돌 문제를 해결하기 위해 커스텀 설정(load option)을 최적화함.

• URL 기반 언어 파라미터(?lang=ko) 방식의 SPA 환경 SEO 한계를 인지하고, vite-plugin-sitemap으로 다국어 URL을 검색엔진에 색인화하며 페이지별 canonical 태그를 적용하여 중복 콘텐츠 문제를 해결함.

• 5개 이상의 핵심 도메인 페이지 및 하위 UI 컴포넌트에 i18next 텍스트 매핑을 적용하여 언어 확장성을 확보함.

[네트워크 에러 핸들링 및 UX 개선]

• 서버 불안정 및 네트워크 장애(504 Gateway Timeout, ERR_NETWORK 등) 상황을 대비한 통합 에러 핸들링 로직을 구현함.

• Axios interceptor + React Query의 onError 콜백을 계층적으로 조합하여, HTTP 상태 코드별 분기 처리 및 전역 Fallback UI를 단일 진입점에서 관리하는 구조를 설계함.

• API 요청/응답 인터페이스를 TypeScript 타입으로 명세화하여 런타임 에러를 사전에 방지하고 팀 내 API 계약을 명확히 함

[전역 상태 관리 및 반응형 UI 컴포넌트 설계]

• Zustand를 활용하여 로그인 상태, 다수 모달(CreateTripModal 등), 드롭다운 메뉴의 전역 상태를 효율적으로 관리함.

• 드롭다운 컴포넌트 간 반복되는 외부 클릭 감지 로직을 useClickOutside Custom Hook으로 추상화하여 코드 중복을 제거하고, Zustand로 햄버거 메뉴 · 드롭다운 · 모달의 전역 열림 상태를 통합 관리하여 Desktop / Tablet / Mobile 3단계 반응형 GNB를 구현함

프로젝트 설명

LLM 기반의 챗봇과 대화를 통해 사용자의 발 사이즈와 선호도를 분석하여 최적의 신발을 추천하는 서비스

깃허브
perfitt

사용기술

프로그래밍 언어

HTML, TypeScript, JavaScript, CSS

도구 및 라이브러리

React, Yarn, Vanilla-ExtractCSS, React-Query, FireBase

상태관리

Zustand

기타

Git, GitHub Actions, RESTful API

LLM 기반 챗봇 구현

1:1 AI 채팅 서비스 개발

• LLM 기반의 챗봇을 활용해 사용자의 신발 선호도 분석 및 추천

데이터 캐싱 최적화

• React-Query를 활용해 채팅 메시지와 이미지 데이터를 캐싱, API 호출 빈도를 감소시켜 성능향상

다중입력 방지

• 비정상적인 다중 입력을 차단하는 로직 설계 및 구현으로 서비스 안정성 강화

채팅 내역 공유 기능

• Zustand를 활용해 채팅 기록의 상태를 관리하며, URL을 통한 간편한 공유 기능 개발

채팅 서비스 사진 업로드 리사이징 기능구현

WebP 리사이징

• react-image-file-resizer를 활용해 이미지 용량을 평균 84% 감소(1.6MB → 256KB)

• 이미지 크기 축소를 통해 전송 시간을 단축하고, 클라이언트-서버 간 데이터 전송 효율성 향상

• 최적화된 이미지 크기로 페이지 로딩 속도 개선 및 사용자 체감 성능 향상

내 발 측정 SDK 연동 (기업 제공 가이드 기반)

• 기업 제공 가이드를 바탕으로 발 측정 기능을 프로젝트에 구현

배포

• GitHub Actions를 활용한 CI/CD 파이프라인 구축

• AWS S3 정적 웹 호스팅을 통한 안정적인 서비스 제공

기타

• Vanilla-Extract CSS: 제로 런타임 스타일링으로 번들 사이즈를 최소화

• React-Query 캐싱 전략: API 호출 최적화로 네트워크 요청 수 감소 및 데이터 로드 시간 단축

• useMemo 활용: 자주 호출되는 날짜 계산 로직을 최적화해 렌더링 성능을 개선

프로젝트 설명

구하기 어렵거나 비싼 아이템들을 대여비를 받고 빌려주고 빌리는 행위를 통해,
많은 사람들이 다양한 스타일을 즐길 수 있는 옷 대여 서비스

사용기술

프로그래밍 언어

HTML, TypeScript, JavaScript, CSS

도구 및 라이브러리

React, Yarn, TailwindCSS, React-Query, React-hook-form, MSW

상태관리

Zustand, contextAPI

기타

Git, GitHub Actions, RESTful API

OAuth2를 이용한 소셜 로그인 (카카오, 구글, 네이버) 기능 개발

• 소셜 로그인 도입으로 회원가입 및 인증 절차를 간소화하고, 플랫폼별로 상이한 OAuth2 인증 방식을 통합 관리

• 서비스에서 사용자 인증 상태를 유지하기 위해 토큰 관리 및 자동 갱신 로직 구축, 세션 만료로 인한 불편을 최소화

채팅 서비스 사진 업로드 리사이징 기능구현

• react-image-file-resizer를 활용해 이미지 용량을 평균 84% 감소(1.6MB → 256KB)

• 이미지 크기 축소를 통해 전송 시간을 단축하고, 클라이언트-서버 간 데이터 전송 효율성 향상

• 최적화된 이미지 크기로 페이지 로딩 속도 개선 및 사용자 체감 성능 향상

실시간 1:N 채팅 서비스 구현

• WebSocketAPI를 활용해 실시간 양방향 통신 채팅 서비스 개발

• 대여자와 대여 희망자가 실시간으로 소통할 수 있는 안정적인 채팅 경험 제공

MSW기반 모킹 데이터 활용 환경 구축

• 백엔드 API 병목으로 인하여 프로젝트 개발이 지연되는 상황을 방지하기 위하여
  msw 기반의 모킹서버 활용
  https://deswaq.tistory.com/55

react-hook-form 기반 폼 최적화

• 폼 상태 변경 시 불필요한 리렌더링이 발생하지 않게 하기 위해
  react-hook-form 활용
  추가로 validation 및 error처리에 용이한 패턴 구축
  타입스크립트 사용으로인해 프로젝트 타입 안정성 강화 및 유효성 검증을 위한 zod 활용
  https://deswaq.tistory.com/61

Eslint 규칙 설정 및 통일화

•  Eslint 규칙을 프로젝트에 적용하여 코드 품질 관리 및 유지보수성 향상