미리보기

※ Description

• Samsung Cloud Platform은 컴퓨팅, 스토리지, 네트워킹, 데이터베이스 등 기업에 필요한 다양한 자원 풀을 가상화해 제공하는 클라우드 환경입니다.

• BareMetal Server 및 Block Storage 등 새로운 Cloud 상품(자원)을 출시하는 프로젝트에 Frontend를 담당하여 웹 기반 콘솔을 통해 BM 프로비저닝부터 모니터링, 빌링까지 사용자가 직접 Self Service로 손쉽게 사용 가능하게 개발하였습니다.

• Vue2에 대한 지식이 전무한 상태에서 투입되었지만, 빠르게 레거시 코드를 분석하고 개발을 성공적으로 수행했습니다.

※ Experience

• Funnel 패턴의 상품 생성 플로우 개발 & 상세/목록 화면 개발

• 상품 생성 플로우 개선 경험

  • 상품 생성 플로우의 가독성 및 유지보수성 향상을 위해 하나의 파일에 집약된 형태의 여러단계 플로우 코드를 개별 파일로 분리하여 모듈화하여, 이를 통해 코드의 복잡도를 낮추고 재사용성 향상

• QA팀 PM담당하여 QA 티켓 생성 및 QA팀 대응

• 인도, 베트남팀과 협업 & Frontend Directory 구조 및 초기설정 영어자료 제공 및 교육

※ Tech Stack

Vue2, Javascript, StoryBook, Java, Spring, Swagger, Github, JIRA, Confluence

※ Description

• 견주와 반려견이 함께 산책을 통해 건강을 관리할 수 있는 "DangDangWalk App"​입니다.

• 최근 1인 가구의 증가와 함께 반려동물 시장도 꾸준히 성장하고 있습니다. 그중에서도 개의 양육 비율이 가장 높은 것을 확인하여, 반려견 애플리케이션을 개발하기로 결정했습니다.

• 데브코스 수료 후에도 팀원들과 꾸준히 온/오프라인 Sprint 및 StandUp 미팅을 진행하며, 코드 품질 향상과 최적화를 위해 지속적인 리팩토링을 수행하고 있습니다.

• 최종적으로 WebView를 활용하여 Mobile App을 개발하고 배포하는 것을 목표로 하고 있습니다.

※ Experience

• Frontend 개발 / 팀 빌딩 & 리딩 / 프로젝트 & 디자인 기획

• 간편가입을 위해 OAuth 2.0(google, kakao, naver)을 도입하여 인증, 인가 개발

• React-Image-Crop 라이브러리를 사용하여 반려견 프로필 사진 업로드 시 이미지 크롭 기능 개발

  • 이미지의 가로 세로 비율을 유지하며 최소 크기를 보장하는 반응형 이미지 크롭 기능을 구현

  • 결과 이미지를 DataURL 형태로 이미지 최적화

    • 이미지 콘텐츠 다운로드 속도 99.6% 향상(113.7ms → 1.06ms)

    • 파일 크기 99.6% 감축(752.2kb → 3.5kb)

  • Zustand 기반 중앙 집중식 상태 관리 시스템 구축을 통해 이미지 크롭 기능 최적화

  • 이미지 크롭 관련 상태(crop 정보, 미리보기 이미지 URL, 에러 상태 등)를 중앙에서 효율적으로 관리하여 컴포넌트 간 데이터 동기화를 최적화하여 사용자 경험을 향상

  • 이미지 크기가 최소 요구 크기보다 작거나 지원하지 않는 파일 형식일 경우, 사용자에게 오류 메시지를 표시하고 이미지 업로드를 제한하는 예외 처리 로직을 구현

• React Query 커스텀 훅을 통해 사용자 인증 로직을 모듈화 및 코드 재사용성 향상 , 캐싱 메커니즘을 활용하여 사용자 경험 개선

  • API 재시도를 방지하기 위해 QueryClient에 retry:false 설정하여 서버 부하 감소, 네트워크 트래픽 감소

  • refetchOnReconnect & refetchIntervalInBackground을 사용하여 사용자가 네트워크에 다시 연결되거나, 백그라운드에서도 토큰 갱신을 수행하도록 설정

  • (로그인 상태 관리 캐싱 문제 트러블 슈팅)

• 모바일 App의 Stack Navigation, Navigation Bar, Bottom Sheet UX와 유사한 App Navigation UX/UI를 Web 브라우저 환경에서도 경험할 수 있도록 개발

  • (App UX/UI 관련 트러블 슈팅)

※ Tech Stack

React, TypeScript, @tanstack/react-query v5, Zustand v4, Tailwind-css v3, React-Image-Crop

전략적 협력관계를 구축한 고객사 및 국내 대형 SI업체와의 프로젝트 개발 및 유지보수 업무를 맡았습니다.