미리보기

• 차량 관제 시스템(CCS)의 관리자 어드민 페이지를 개발 및 유지보수

• 태양광 전문가를 위한 현장 관리용 엔비전 케어 개발

• 태양광 전문가를 위한 올인원 IT 솔루션인 모니터링 엔비전 개발 및 유지보수

• 웹뷰를 적용해 엔비전을 모바일 앱으로 제공 및 배포

• 에너닷 자사 홈페이지 리뉴얼 개발 및 유지보수

• Muzit 음악 관련 업계 종사자들이 한 곳에 모여 프로필을 만들어 서로 네트워킹 하고 정보를 교류할 수 있는 음악 업계 소셜 네트워크 서비스 앱 개발 및 유지보수

• Muzit App 관리를 위한 Admin 페이지 개발 및 유지보수

• 서버 유지보수 및 관리 운영 (리눅스(Redhat) OS 설치, 기술지원 및 장애지원)

• IDC에서 서버 장애 발생 시 원인 분석 및 대응

• 정기 점검 및 보안 패치 적용

• 고객사 대상 시스템 구축 및 유지보수 지원

• 신규 서비스 도입 및 시스템 업그레이드 수행

공통 UI 컴포넌트 개발 

• 현대자동차의 디자인 시스템을 기반으로 UI 컴포넌트를 표준화하여, 공통 UI 컴포넌트를 개발

가상화 기술 적용

• 초기 렌더링 및 검증 과정에서 9,000개의 데이터를 로딩하는데 6초가 소요되던 문제를 해결하기 위해, react-window 가상화 기술을 적용하여 로딩 시간을 0.5초로 단축하고 성능을 90% 향상

ECharts 기반 차량 상태 이력 시각화 및 UX 개선

• 차량 상태 이력을 시간 단위로 그래프로 만들어 특정 시점에서의 상태 변화를 직관적으로 확인할 수 있도록 개발

• 차량 상태 조회에서 데이터의 간격이 작은 경우 ToolTip이 정상적으로 표시되지 않는 문제를 발견해 dataZoom 기능을 적용하여 사용자가 확대/축소 가능하도록 개선 하여 데이터 가독성과 UX 향상

Tech Stack

Next14 TypeScript Jotai React-hook-form Styled-Component

개발 환경 개선

• CRA 프로젝트를 Vite 기반으로 변경하여 핫 리로딩, 개발 서버 실행 속도 및 빌드 시간 개선 (빌드 시간: 16s -> 8s)

전역 상태 관리 도입

• 전역 상태 관리를 위해 Zustand 도입하여 페이지 간 상태 공유 최적화

웹뷰 기반 모바일 앱 배포

• React-Native-WebView를 활용하여 엔비전을 App Store Connect 및 Google play console 배포

Tech Stack

Next12 TypeScript Zustand Styled-Component

자사 홈페이지 반응형 개발

• react-responsive에서 useMediaQuery 훅을 이용하여 해상도 및 기기에 따라 동적으로 UI를 변경하도록 구현

고객 지원 시스템 연동

• 채널톡을 연동하여 실시간 고객 문의 대응 및 운영 효율성을 향상

SEO 최적화
• 회사 홈페이지의 검색 엔진 최적화(SEO)를 위해 meta 태그 적용, Sitemap.xml, Robots.txt 구조적인 마크업을 적용하여 구글 검색 결과에서 사이트 클릭률을 10% 향상

Tech Stack

Next12 TypeScript Styled-Component

모바일 앱 개발 및 배포 자동화

• 모바일 애플리케이션을 구성 및 세팅

• 앱의 상태 관리를 위해 Provider 패키지를 도입, 앱 전역에서 상태를 공유하고 관리 하기 위해 Provider 패턴을 적용

• Fastlane을 이용한 배포 자동화로 배포 과정 효율화

Tech Stack

Flutter Provider Http

뮤지트 앱 서비스 개발

• 기존 REST API에서 GraphQL로 마이그레이션하여 API 응답 최적화 및 개발 생산성 향상

• KG이니시스 결제 모듈을 아임포트를 통해 연동

• 푸쉬 알림을 위한 Cloud Messaging API 연동

뮤지트 어드민 페이지 개발

• CRA 기반 프로젝트의 개발 환경을 구성하여 Prettier, 절대 경로 설정 등 개발 편의성을 개선

• 개발 생산성을 높이고 일관된 UI 구현을 위해 MUI 도입

• 컴포넌트 간의 상태 공유를 용이하게 하기 위해 Redux를 사용하여 전역 상태 관리

Tech Stack

Web: React TypeScript Redux Styled-Component

App: React-Native(expo) TypeScript GrapQL Redux Styled-Component