logo

Projects

Sharing Growth and Achievements

LG전자 Device Config Hub

LG전자 Device Config Hub

📌Summary
LG전자 태블릿 모니터링/제어 솔루션
📅 Duration
2024.10 ~ (현재)
🔍 Skills
React.jsTypescriptTanstack QueryTailwindjotaiMantineAWS ECS
프로젝트 소개
  • 고객사 별 태블릿 설정(인트로 화면, 기능 제한, 기본 앱 설치 등), 실시간 태스크 제어 (재부팅, 특정 앱 실행), 기기 상태 모니터링 등을 수행합니다.
  • 웅진 씽크빅에 교육용 태블릿 디바이스와 함께 납품 예정으로, 2025년 2월 개발 완료를 목표로 하고 있습니다.
dashboarddashboard
담당 업무
  • 프론트엔드 구조 설계 및 퍼블리싱
    • 디바이스 Agent 중심으로 개발된 Back-end의 API 복잡도가 매우 높아, Service Layer와 Business Layer를 분리하여 복잡도를 낮추는 형태로 설계
  • 디바이스 그룹 페이지의 트리 구조를 재귀적인 컴포넌트로 구현
  • 프로파일 페이지의 3 Step으로 구성된 Create Form 구현
    • React DnD 라이브러리를 사용하여 디바이스 바탕화면에 기본 App 위치를 Drag&Drop으로 지정하는 로직 구현
    table
  • Generic Type을 받는 유연한 Table 컴포넌트 개발
    • Row 에 전달되는 배열 형태의 데이터 타입을 Generic으로 정의
    • 해당 타입 기반으로 컬럼 정의, Row Select, Row Click, Row Customizing을 할 수 있는 다양한 기능 개발
    table
LG전자 e-Centric Care

LG전자 e-Centric Care

📌Summary
LG전자 전기차 충전기 모니터링/제어 솔루션
📅 Duration
2023.09 ~ 2024.03 - 현재 운영 및 고도화 진행 중
🔍 Skills
React.jsJavascriptStyled-ComponentTanstack TableAWS ECS
프로젝트 소개
  • 실시간 충전기 연결 상태, 사용 통계, 위치 정보 제공, 실시간 제어, 펌웨어 업데이트 등의 기능을 수행합니다.
  • 북미 지역을 타겟으로 하며, 이를 위한 불어/영어 지원과 함께 현지 전기차 충전기 운영 규제에 맞는 다양한 비즈니스 로직을 포함합니다.
dashboarddashboard
담당 업무
  • 프론트엔드 구조 설계 및 퍼블리싱
  • 대시보드 개발 및 다국어 처리
    • e-Chart 활용
  • 로그 분석 도구 개발
    • 로그 파일 다운로드 및 압축 해제(js-untar, pako), File을 시간 순으로 정렬 후, 같은 타입의 로그 데이터(ByteArray 형태)를 Merge하는 비즈니스 로직 구현.
    • 충전기 F/W 개발자들과 협업하여 로그 포맷 분석 및 정규식을 활용하여 로그 파싱, Tanstack Table을 통해 최소 3000라인의 로그를 브라우저 성능 저하 없이 출력
    • 로그 Filtering, Highliting, Pagination 기능 구현
    log
  • 펌웨어 업로드 기능과, 업데이트 API 전송 후 기기 상태를 Polling하는 로직 개발
KTDS 솔루션 포털

KTDS 솔루션 포털

📌Summary
사내 솔루션 소개 웹 사이트
📅 Duration
2023.06 ~ 2023.09 (3개월)
🔍 Skills
Next.jsTypescriptZustandEmotion CSS
프로젝트 소개
  • ktds 플랫폼사업본부에서 보유중인 다양한 솔루션을 홍보 목적으로 소개하는 웹 사이트입니다.
dashboarddashboard
담당 업무
  • 프론트엔드 구조 설계 및 퍼블리싱
    • 안드로이드 진영에서 활발하게 활용되는 MVVM 아키텍처에서 착안한 구조 설계
      • dashboard
    • 프론트엔드 리드를 맡아 Next.js (Page Router), Tailwind, Zustand를 기반으로 MVP 개발 및 실제 프로젝트 진행
    • 모바일 환경을 고려한 반응형 설계
  • 관리자 페이지 개발
    • 메인 화면 슬라이더에 포함되는 이미지, 매뉴얼 페이지의 매뉴얼 파일 등을 업로드 하는 로직을 공용화
    • 공지사항 등을 작성하는 시각적 에디터를 Quill 라이브러리를 사용하여 구현, 공지사항의 노출 기간 및 우선순위 등을 설정하는 로직 개발
KTDS BEAST

KTDS BEAST

📌Summary
SaaS형태의 API Gateway 관리 솔루션
📅 Duration
2022.02 ~ 2023.06 (1년 5개월)
🔍 Skills
Vue.jsTypescriptPinia
프로젝트 소개
  • API 생성 및 관리, 라우팅, 인증/인가, 트래픽 실시간 모니터링, 통계/이력 정보 조회 등의 기능을 제공하는 솔루션입니다.
  • Open Source인 Spring Cloud Gateway 기반의 API Gateway를 직접 구현하는 경우, 코드 기반의 복잡한 구성 작업과 관련 인프라 작업 등이 수반됩니다. 이러한 과정을 웹 기반의 관리 솔루션으로 수행할 수 있도록 개발되었습니다.
  • 사전 개발된 다양한 기능의 Filter, Handler를 추가하는 방식으로 제어합니다.
  • 개발 진행 단계부터 도입을 요청하는 다양한 잠재 고객들이 있었고, 개발 완료 후 과기정통부 마이데이터 과재, KT, 하나은행 등에 납품하였습니다.
beast1dashboard
담당 업무
  • API 관리 - API Provider/Consumer 관점에서 각각의 요구를 충족하는 기능 구현
    • 엔드포인트와 메서드를 직관적으로 설정하는 기능을 포함한 API 생성, 수정, 삭제 기능 개발.
    • API 배포요청 및 관리자 승인/반려 로직 구현
      • deploy
  • 관제 화면 구현
    • API 요청의 성공/실패를 Pie 차트로 확인할 수 있는 관제 화면 개발
    • 각 API별 응답 시간, TPS, 에러 레벨 등을 표현
      • monitoring
  • 솔루션 패키징 작업 담당
    • AWS EKS 기반의 개발 환경 구축
    • 고객사 납품 시 요구사항에 맞게 on-Premise, Docker, Kubernetes 형태로 패키징하여 배포
KT A'Cen Cloud

KT A'Cen Cloud

📌Summary
AI 상담센터 솔루션
📅 Duration
2021.09 ~ 2022.01 (5개월)
🔍 Skills
Vue.jsJavascriptVuex
프로젝트 소개
  • AI 상담사의 상담내역을 모니터링하고, 상담에 필요한 기능들을 제어하는 솔루션입니다.
담당 업무
  • 프론트엔드 구조 설계
    • 프론트엔드 전문 개발자 없이 진행되던 프로젝트에 투입되어 공통 모듈 개발 및 컴포넌트 분리 등의 작업 수행
  • Nexus 기반 자체 NPM 서버 구축 및 운영
    • 보안상의 목적으로 외부 NPM 서버 활용 불가하여 자체 구축
  • 상담내역 상세화면 구현
  • 상담 현황판 기능 구현
    • acen-2
KT 기가지니

KT 기가지니

📌Summary
기가지니 웹 앱 개발
📅 Duration
2021.04 ~ 2021.08(5개월)
🔍 Skills
Vue.jsAndroidJavaRetrofitRoom
프로젝트 소개
  • AOSP(Android OpenSource Project) 운영체제 기반으로 개발된 기가지니 1,2의 런쳐 앱과, 웹뷰 형태로 고객에게 제공되는 웹앱을 개발하는 프로젝트입니다.
  • 스피커의 음성 인터페이스와 상호작용하는 기능을 주로 개발하였습니다.
담당 업무
  • 버스정보시스템 앱 고토화
    • 흐르는 텍스트(Text Marquee) 기능을 적용하여 가로 공간이 부족한 카드뷰 내 텍스트 처리
      • giga1
  • 키즈 컨텐츠 대화상자 기능 개발
    • giga2
  • 기존 앱 기능 유지보수
  • 제3자 테스트 주도