미리보기

FlowV

전력 입찰 및 관리 전력 중개 통합 서비스

역할: 프론트엔드 리드 / 초기 세팅부터 런칭까지 전 과정 주도

핵심 성과 및 기술 구현

• 서비스 초기 세팅부터 런칭까지 전 과정 단독 주도

  • Vite 기반 신규 프로젝트 초기 구조 설계 및 설정

  • Storybook 도입으로 컴포넌트 문서화 및 개발 속도 향상

  • i18n 적용 및 영어 다국어 번역 적용

• 성능 최적화 및 개발 생산성 향상

  • Webpack → Vite 마이그레이션으로 빌드 시간 9분 → 2분, 런타임 속도 75% 단축

  • Lazy Loading 및 동적 import 적용으로 초기 로딩 시간 2.8초 → 1.2초로 단축 (Lighthouse 기준)

  • S3 + CloudFront + Github Actions를 통한 CI/CD 자동화 및 HTTPS 리다이렉션 구성

• 실시간 데이터 처리 고도화 (SSE)

  • SSE 기반 실시간 알림 기능 직접 기획 및 구현

    • 재연결 로직, 네트워크 불안정 시 대응, 클라이언트 시간 동기화 등 고도화

  • 알림 UI, 입찰 마감 시각 정밀 동기화로 정확한 실시간성 확보

• 사용자 인증 및 권한 시스템 개선

  • 서버 권한 기반 메뉴/버튼 노출 제어 및 AuthGuard 라우팅 처리

  • Axios instance 기반 리프레시 토큰 자동 재발급 + 유효기간 초과 시 자동 로그아웃 구현

  • 쿠키 스토리지에서 http-only 적용으로 보안성 강화

• 입찰 데이터 실시간 시각화 및 캐싱 전략 적용

  • React Query 커스텀 훅 구성 → 15분 단위 데이터 자동 최신화 + 중복 요청 차단

  • ECharts + useMemo 조합으로 전력량 그래프 실시간 렌더링 최적화

  • ErrorBoundary 구성 → 오류 시 Fallback UI 제공 및 React Query invalidate 연계

• 사용자 경험 및 UX 고도화

  • GA4 연동 및 사용자 이탈 구간 분석 → Skeleton, Infinite Scroll 등 UX 개선

  • Skeleton UI 및 사용자 행동 기반 UX 요소 도입

사용 언어 및 툴: Typescript, React, Styled-Component, M-UI, Redux, React-Query, Nginx, AWS S3, CloudFront, Github Action CI/CD, SSE, Vite

flow

실시간 전력 중계 서비스

• M-UI, MUI Datepicker 레거시 파일 관리 및 유지보수

• Node.js 버전 16 > 18 업그레이드하면서 발생한 패키지 의존성 및 라이브러리 오류를 해결하고, 문제 수정 후 배포 진행

• Github Action CI/CD 를 통한 배포 및 관리 자동화

• 배포 방식 구축: main, develop (백업), release-prod, release-dev (배포), feature-** (작업)

사용 언어 및 툴: Typescript, React, Styled-Component, M-UI, Redux, Git, Nginx, AWS S3, CloudFront, Github Action CI/CD

V2G

전기차 충전 서비스 및 충방전 회원 관리 서비스

• Fetch > React-Query 전환으로 상태 관리 간소화 및 불필요한 데이터 재호출 차단

• WebSocket 을 도입해 실시간으로 충전 상태를 체크하고 요청 호출 처리

회사 대표 홈페이지 레이아웃 개선

• 기존의 유아틱한 홈페이지를 분석하여, 30~50대 남성 고객층을 타겟으로 맞춤형 레이아웃 재구성

• AOS 와 Bootstrap 을 활용해 효율적인 정보 전달 및 창의적인 레이아웃 설계로 포인트 강화

사용 언어 및 툴: Typescript, React, Styled-Component, Bootstrap, AOS

이력서, GitHub, 블로그를 통합한 포트폴리오 서비스

• Next.js 기반 마크다운 블로그 서비스 개발 및 최적화

  • 정적 페이지 렌더링 적용하여 마크다운 블로그 서비스 성능 최적화 및 SEO 최적화를 통해 구글 검색엔진 노출 증가 목표

• 마크다운 지원 및 사용자 경험 개선

  • React-Markdown, SimpleMDE 활용하여 마크다운 입력 및 읽기 기능 지원

  • tag 리스트에 DnD(Drag & Drop) 적용으로 폴더 및 카테고리 정렬 기능 개선, 직관적인 UX 제공

• 소셜 로그인 및 사용자 데이터 연동

  • GitHub 소셜 로그인 구현 및 GitHub 랭크, 프로필 정보 조회 기능 추가

• 성능 및 데이터 최적화

  • Hydration Error 방지를 위해 클라이언트 사이드 전용 코드 및 useEffect 공통 처리 전용 훅 제작

  • Masonry 레이아웃 기반 무한 스크롤 리스트 페이지 구현

  • React-Query 활용하여 서버 데이터 캐싱 및 서버 상태 관리 최적화

  • Link Prefetch 및 Dynamic Import 적용으로 블로그 상세 페이지 진입 속도 개선, 사용자 체감 성능 향상

  • 페이지 특성에 따라 getStaticProps / getServerSideProps 전략적으로 분리 적용, 렌더링 성능 향상

사용 언어 및 툴: React, Next.js, Tailwind CSS, TypeScript, Recoil, React Query, Vercel, Cloudtype, Neon

프로젝트 링크: https://www.logme.shop/
Github 링크: https://github.com/gwanhun1/cvlog-fe

AI 고민 상담 서비스 (고민지우개 마이그레이션)

• OpenAI API 기반 맞춤형 답변 서비스 및 커뮤니티 기능 개발

  • OpenAI API 연동으로 사용자 맞춤형 답변 제공 및 고민 공유 커뮤니티 기능 구현

  • 다단계 입력 프로세스를 통한 정확한 고민 분석 및 상담 품질 향상

• 크로스플랫폼 UI 및 성능 최적화

  • 모바일 우선(UI 통일) 데스크톱 및 RN 웹뷰에서도 동일한 레이아웃 유지하여 크로스플랫폼 환경 구축

  • 웹앱 기반으로 데스크톱·모바일 환경 대응, Android 앱으로 빌드 및 출시하여 플랫폼 확장성 확보

  • Vite + HMR(Hot Module Replacement) 활용으로 빠른 개발 서버 및 효율적인 빌드 환경 제공

  • Framer Motion을 활용한 부드러운 애니메이션과 전환 효과로 UX 향상

• 코드 구조 및 상태 관리 최적화

  • 커스텀 훅 적용으로 코드 가독성 및 재사용성 향상

  • Atomic 디자인 패턴 도입으로 UI 컴포넌트의 최적화 및 재사용성 강화

  • Zustand 활용하여 전역 상태 관리 및 props 드릴링 최소화 및 보일러플레이트 감소

사용 언어 및 툴: TypeScript, React, Tailwind, Vite, Zustand, Firebase, Vercel, OpenAI API

프로젝트 링크: https://worryhelper.store

어플 출시 링크: https://m.onestore.co.kr/ko-kr/apps/appsDetail.omp?prodId=0000780588

Github 링크: https://github.com/gwanhun1/helper

• AI 기반 고민 상담 앱 개발 (iOS/Android 크로스 플랫폼)

  • OpenAI API 기반으로 사용자 맞춤형 상담 답변 생성 로직 구현 및 UX 최적화

  • React Native + Expo 환경에서 앱 개발 및 CI/CD 기반 자동 배포 체계 구축

  • Recoil 전역 상태 관리로 컴포넌트 간 데이터 흐름 최적화 및 유지보수성 향상

  • WebView + 반응형 UI 설계로 하이브리드 앱에서도 네이티브 경험 제공

  • SVG 및 이미지 최적화로 초기 로딩 시간 2초 → 0.5초 (75% 단축) (Lighthouse 기준)

  • Firebase 기반 사용자 인증 및 실시간 데이터 저장, 서버리스 구조 설계

• 사용 언어 및 툴: TypeScript, React-Native, Expo, Styled-Component, Recoil, Firebase, OpenAI API