미리보기

주요 업무

IT 서비스 사업팀의 Frontend 개발자로 근무하였습니다.

React 프로젝트의 전체 설계 및 구축, 개발을 담당했습니다. 주로 지도 기반 서비스를 개발하였고, 내비게이션 기반의 주문 서비스를 웹뷰로 개발한 경험이 있습니다.

팀원들과 함께 주도적으로 스터디를 진행하며, 프론트엔드 기술 선정 및 팀 내 기술을 전파하였습니다.

프로젝트 진행 시 Figma를 활용하여 기획자, 디자이너와 UI/UX 관련 피드백을 주고받았으며, Figma로 스타일 속성을 참고하여 프론트엔드 구현의 정확도를 높였습니다. Swagger를 통해 백엔드 개발자와 효율적으로 소통하며 개발을 진행하고, Swagger를 통해 API 문서를 검토하고 테스트하여 백엔드 연동 과정에서의 오류를 최소화했습니다.

• 기술 스택

  • TypeScript, React, MUI, tanstack/react-query, zustand, Jotai, Github

진행 프로젝트

• 현대 오토에버 Pickup Service POC

  • 2024.09~진행 중

  • PM 1명, 기획 & 디자인 1명, 프론트엔드 개발 2명, 백엔드 개발 1명, 웹 퍼블리셔 1명

• 현대 오토에버 Global Contents Provider Service

  • 2024.03~2024.09

  • 기획 & 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명

• 현대 오토에버 Global Poi(Point of Interest) Search Service

  • 2024.01~2024.05

  • 기획 1명, 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명

주요 업무

웹 팀의 웹 퍼블리셔로 근무하였습니다.

사이트, 로고, 인터랙티브 디자인과 프론트엔드 개발을 위주로 반응형 웹사이트 구축 및 사용자 경험 개선에 기여하였습니다.

• 기술 스택

  • JavaScript,

    jQuery,

    HTML,

    CSS,

    Photoshop

진행 프로젝트

• 코리아메쎄 전시 플랫폼

  • 2022.07~2022.09

  • 기획 & 디자인 1명, 백엔드 개발 1명, 웹 퍼블리셔 1명

• 제이에스씨텍 홈페이지

  • 2022.07

  • 개발 1명

현대 오토에버 픽업 주문 서비스입니다.

내비게이션 어플리케이션의 웹 뷰로 서비스가 되는 사용자 서비스와 웹으로 접근하는 관리자 서비스로 나뉩니다.

팀 학습을 통해 TypeScript를 도입한 프로젝트입니다.

사용 기술 : React, TypeScript, react-query, zustand, jotai, MUI, Docker, Kubernetes, Github

참여 인원 : PM 1명, 기획 & 디자인 1명, 프론트엔드 개발 2명, 백엔드 개발 1명, 웹 퍼블리셔 1명

기여도 : 64% (150개 PR 중 96개)

[구현 기능]

• 사용자 서비스 : react-query의 cache를 이용해 서버와 클라이언트 간의 데이터 동기화

• 사용자 서비스 : 장바구니의 메뉴 삭제 optimistic update 기능 구현

• 사용자 서비스 : JWT 토큰 로그인 구현

• 사용자 서비스 : api 공통 error handler 구현

• 관리자 서비스 : 세션 로그인 기능 구현

• 관리자 서비스 : 이미지 디스크 캐싱 문제 해결

• 관리자 서비스 : 이미지 base64 인코딩, 업로드 기능 구현

현대 오토에버 지도 플랫폼 어드민 서비스입니다.

이전 프로젝트의 회고를 통해 팀 내의 컨벤션과 공통 컴포넌트에 대한 기준을 정했습니다.

사용 기술 : React, MUI, react-query, zustand, react-google-maps, Github

참여 인원 : 기획 & 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명

기여도 : 45% (124개 PR 중 56개)

[구현 기능]

• 지도 마커 클러스터링 기능 구현

• 지도 마커 리렌더링 최적화

• 공통 컴포넌트 리팩터링

• JWT 기반 로그인, 회원가입 기능 구현

• 지도 poi 검색 및 필터 기능 구현

현대 오토에버 지도 검색 서비스입니다.

프로젝트 설계 및 구축을 담당하고 기술들을 선정했습니다.

React 학습을 위한 팀 스터디를 주도하여 팀원들의 기술 역량 강화에 기여했습니다.

사용 기술 : React, MUI, react-query, zustand, react-google-maps, i18next, Github

참여 인원 : 기획 1명, 디자인 1명, 프론트엔드 개발 4명, 백엔드 개발 2명, 웹 퍼블리셔 1명

기여도 : 33% (258개 PR 중 86개)

[구현 기능]

• JWT 기반 로그인, 회원가입, OTP 인증 기능 구현

• 영어권 서비스를 위한 i18next 적용

• api 공통 error handler 구현

• 지도 poi 검색 및 필터 기능 구현

• 공통 dialog 구현

• 통계 차트 기능 구현

React로 개발한 개인 포트폴리오 사이트입니다.

사용 기술 : TypeScript, React, Redux, Styled, motion, es-toolkit, Github

참여 인원 : 개발 1명

[구현 기능]

• motion을 사용한 애니메이션 효과 구현

• vercel을 사용한 CI/CD 및 배포

• 상태관리 zustand에서 redux toolkit으로 변경

• styled를 사용한 사이트 디자인

• scroll spy 구현

• parallax scrolling 구현

• 반응형 웹 디자인

AI 화상 면접 연습 서비스입니다.

사용 기술 : React, TypeScript, react-query, recoil, emotion, aws amplify, Github

참여 인원 : 프론트엔드 개발 2명, 백엔드 개발 3명

기여도 : 33% (72개 PR 중 24개)

[구현 기능]

• 면접 녹화 영상 업로드 시간 단축 (85s => 62s)

• 영상 로딩 속도 단축 (1,830ms => 600ms)

• WebRTC를 사용해 실시간 비디오 통신 구현

• socket 통신을 사용하여 사용자 간의 상태 공유

• react-query 데이터 캐싱

• aws amplify 배포

https://github.com/KKamjangE/KOREA_MESSE?tab=readme-ov-file

전시회 기획, 운영, 디자인, 마케팅 서비스를 제공하는 플랫폼입니다.

Figma를 통해 기획, 디자이너와 지속적으로 소통하며 UI/UX 디자인 세부사항을 조율하였습니다.

브랜드의 개성을 표현하고 사용자의 흥미와 몰입도를 높이기 위한 인터랙티브 디자인이 많습니다.

사용 기술 : JavaScript, HTML, CSS, jQuery, Figma

참여 인원 : 기획 & 디자인 1명, 웹 퍼블리셔 1명, 백엔드 개발 1명

[구현 기능]

• 전체적인 화면 퍼블리싱

• parallax scrolling 구현

• scroll progress bar 기능 구현

• swiper 기능 구현

• 전시회, 프로젝트, 뉴스 검색 기능 구현

• 대용량 트래픽이 아니면 안보셔도 됩니다! 선물하기 서비스 캐싱 전략

• 카카오의 Kubernetes가 Data Center 화재를 견디는 방법

• taxi-meter 개발기

• 글로벌 멀티플랫폼 게임의 어뷰징 차단하기

• 카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우

• 카카오톡 펑 개발기