미리보기

실시간 설비 데이터 수집 및 AI 분석을 위한 On-Premise 인프라 환경 구축 (Link)

• Telegraf InfluxDB Mosquitto 를 사용한 Data Pipeline 설계로 실시간 데이터 처리 최적화

• 설계한 Data Pipeline을 기반으로 프론트엔드와 백엔드 시스템을 통합하여 실시간 설비 모니터링 대시보드를 위한 인프라 환경을 구축하고 배포

• InfluxDB 와 Grafana 연동 및 시스템 모니터링 대시보드 구성

• Docker 와 GitHub Actions을 활용한 FE / BE 자동배포 시스템 구축

• Batch 및 Shell Script를 활용한 시스템 자동화 및 인프라 구축 프로세스를 최적화하여 운영 관리 효율성 향상

• docker cache 및 node cache 를 활용해 배포 시간을 약 50% 단축 (2m 24sec -> 1m 11sec).

• multi-stage build와 scratch 및 alpine 기반 이미지를 활용하여 크기를 96% 이상 축소 (144MB -> 5.2MB) 했으며 빌드 효율성 개선

설비 모니터링 대시보드 개발 (FE) (Link)

• 실시간 차트 데이터 처리 방식을 최적화하여 메모리 점유율 62% 개선 (820MB -> 312MB)

• Grid 데이터 호출 프로세스를 최적화, 처리 시간을 5초에서 0.5초로 90% 이상 단축

• Chart 및 Grid 라이브러리를 커스터마이징하여 화면 설계서에 맞는 UI를 구현하고, 공통 컴포넌트를 개발하여 디자인 변경 시 스타일 수정을 용이하게 하여 유지보수성 향상.

• 프론트엔드 환경에서 MQTT와 GraphQL을 기반으로 하는 공통 모듈을 설계 및 개발하여 데이터 흐름의 일관성을 높이고 유지보수성 향상.

• SvelteKit으로 개발하면서 레퍼런스 부족으로 인해 React 기반으로 작성된 코드를 분석하고 재구현하여 SvelteKit 환경에 최적화된 기능으로 전환함.

• 백엔드 API 의존성을 줄이기 위해 MSW를 도입하여 효율적이고 안정적인 프론트엔드 개발 환경 세팅.

• SvelteKit 과 Tailwind , GraphQL 를 활용한 프로젝트 개발.

• 로딩 시간을 시각적으로 완화하기 위해 Skeleton UI를 적용하여 사용자 경험(UX) 향상.

기술 스택

WSL2 Docker influxDB Telegraf Mosquitto Grafana Github-Actions

프로젝트 개요

• AI 분석을 위한 데이터 수집을 위해 현장에 필요한 인프라 환경을 구축하고, 서비스 설치 및 설정 작업을 수행하여 데이터 수집 및 모니터링 시스템을 구축.

주요 트러블슈팅 및 문제 해결 (Link)

1. InfluxDB v2 설정 오류

   • 문제 상황

     • InfluxDB Docker 컨테이너 실행 시, v2 버전에서 사용하는 config 파일 설정이 잘못되어 계정 생성 중 에러 발생. InfluxDB Github Issue 확인 결과, v1과 v2의 config 경로가 다르고, v2 경로가 생성되지 않아 파일이 제대로 마운트되지 않는 문제를 발견.

   • 해결 방법

     • Docker Image 생성 시 권한 설정을 추가하여 v2 경로를 수동으로 생성.

     • v1 config 파일을 v2 경로로 이동하도록 수정 후, 문제 해결.

   • 배운 점

     • Docker 이미지 내부에서 파일 경로와 권한 설정의 중요성을 학습.

     • InfluxDB 버전별 경로 차이를 이해하고, setup script를 통해 문제를 디버깅하는 과정을 경험.

2. Grafana 템플릿 적용 후 데이터 쿼리 문제

   • 문제 상황

     • Grafana 템플릿 적용 시 데이터가 제대로 표시되지 않고 쿼리 에러 발생. 템플릿의 기본 쿼리가 프로젝트에 맞지 않아 데이터가 표시되지 않음.

   • 해결 방법

     • Grafana 대시보드의 각 요소에 적용된 InfluxDB 쿼리를 확인하고, 프로젝트 환경에 맞게 수정.

     • 회사 데이터 구조에 적합한 쿼리를 작성하여 데이터 시각화 성공.

   • 배운 점

     • Grafana와 InfluxDB의 연동 및 쿼리 작성 과정을 학습.

     • 시스템 모니터링 환경에 따라 템플릿 커스터마이징이 필요함을 깨달음.

기술 스택

nestjs typescript typeorm prisma docker redis kafka jest

프로젝트 개요 (Link)

프론트엔드 개발자로서 백엔드 기술을 학습하기 위해 프로젝트를 구상하고, Layered Architecture를 적용하여 TDD 방식으로 개발을 진행하였습니다.
설계 단계에서 시퀀스 다이어그램, ERD, API 명세서를 작성하고 개발에 착수했으며, 데이터베이스 동시성 처리와 성능 최적화, 외부 시스템 연동 등을 고려하여 개발을 진행했습니다.

주요 성과

• 시스템 설계 및 API 문서화

  • 시퀀스 다이어그램, ERD, API 명세서를 설계하고 Swagger를 활용하여 API 문서화를 진행하면서, 개발에 앞서 철저한 설계를 통해 프로젝트의 전체 흐름을 명확히 하고, 이를 바탕으로 효율적으로 개발을 진행할 수 있다는 점을 깊이 이해하게 되었습니다.

• 대기열 처리 및 동시성 최적화

  • 초기에는 DB Lock(낙관적 락, 비관적 락)을 사용하여 동시성 문제를 해결하려 했으나, 성능 문제를 개선하기 위해 Redis를 도입하여 대기열 처리 로직을 최적화하였고, 이를 통해 시스템의 효율성을 50% 향상시켰습니다.
    부하테스트 결과 (60.2sec -> 30sec)

• 조회 성능 최적화

  • 데이터 증가에 따른 읽기 성능 저하를 방지하기 위해 인덱스 최적화 전후 성능을 비교하고, 콘서트 및 좌석 관련 테이블에 인덱스를 적용하여 기존 대비 조회 성능 90% 이상 개선

    
    (데이터10만건 조회 시 10ms -> 0.073ms)

• 외부 결제 시스템 연동 (Link)

  • Kraft Mode 를 적용하여 Zookeeper 를 위한 별도 운영 비용 절감 및 성능 개선

  • Kafka를 도입하여 이벤트 기반 결제 시스템을 구축하고, outbox pattern을 통해 이벤트 발행 보장

• 테스트 자동화

  • 각 서버를 Container 화하여 독립적인 환경에서 E2E 테스트를 진행

  • K6로 부하 테스트를 실시하여 시스템 성능과 안정성을 확인.

• 시스템 모니터링

  • Prometheus와 Grafana를 사용하여 컨테이너별 시스템 사용량을 시각화하고, 대시보드를 구성하여 실시간 모니터링 시스템 구축

기술 스택

Sveltekit Graphql Tailwind Scichart Tabulator Mqtt Vite

프로젝트 개요

• 공장 설비 데이터를 실시간으로 수집 및 시각화하는 대시보드를 개발하였습니다.
  주요 데이터로는 공구 사용량, 생산 정보, 생산 이력 등이 포함됩니다.

주요 트러블슈팅 및 문제 해결 (Link)

1. 실시간 차트 렌더링 중단 문제

   • 문제:

     화면 최소화(Fade out) 후 복귀 시, SetTimeout 함수가 작동을 멈추며 MQTT로 받은 데이터가 쌓여 화면 복구 시 데이터 과부하로 화면이 먹통이 되는 현상 발생.

   • 고민

     • 먼저 SetTimeout 재귀 호출 로직 최적화를 고민.

     • 두번째로, Web Worker를 활용해 데이터 처리와 렌더링을 브라우저 메인 스레드와 분리할 지 고민

     • 마지막으로, 일정 주기로 새로고침을 실행해 데이터를 초기화할 지 고민.

   • 해결 방법:

     • 호출 로직 최적화 후, 화면 상태를 고려하여 주기적으로 새로고침 방식을 선택.

     • 이는 유저가 화면을 보지 않는 상황에서 실시간 업데이트의 필요성이 낮다는 점을 기반으로 결정.

   • 성과:

     과도한 데이터 처리 문제를 해결하고, 안정적으로 실시간 데이터를 유지하여 사용자 경험 개선.

2. 진입화면 간 이동 시 데이터 불일치 문제

   • 문제: 진입화면 이동 시 이전 Polling 요청이 유지되어 잘못된 데이터가 화면에 표시되는 문제 발생.

   • 고민:

     기존 Polling 요청이 취소되지 않고 남아 있어서, 화면 이동 시 어떻게 이전 요청을 취소할까 고민.

   • 해결 방법:

     AbortController를 사용하여 페이지 이동 시 이전 요청을 취소하는 로직을 구현.

   • 성과:

     데이터 일관성을 유지하며, 정확한 화면 전환을 보장.

과제 통과율 90% 및 Best Practice 3회 선정.