개요수질 데이터와 장비 상태를 실시간으로 모니터링하는 대시보드를 구축하면서초 단위로 유입되는 WebSocket 데이터를 안정적으로 처리할 수 있도록WebSocket 연결과 구독을 전역에서 관리하고 비즈니스 로직과 UI를 분리했습니다. 전체 구조 WebSocket 관련 로직은 역할에 따라 세 단계로 나누어 구성했습니다.각 단계는 WebSocket 연결 관리, 구독 인터페이스 제공, 도메인 데이터 처리를 담당합니다.WebSocketProvider ↓useWebSocket ↓useWaterQualityWebSocket 1. WebSocketProvider앱 전체에서 하나의 WebSocket 연결을 유지하고 연결/재연결/구독 관리를 담당하는 Context Provider 2.useWe..

개요제가 맡게 된 프로젝트는 MFA(Micro Frontend Architecture) 구조를 기반으로 운영되었습니다.이 구조는 이미 타사에서 개발된 하나의 호스트 앱 위에 4개의 독립적인 서비스(Remote App)가 띄워지는 형태였습니다. MFA 특성상 각 서비스는 독립적으로 개발 및 배포되지만, 사용자에게는 하나의 서비스처럼 작동해야 합니다.따라서 이번 프로젝트의 목표는 디자인 시스템의 통일성과 일관성이었습니다.문제해당 프로젝트는 이미 한 차례 구버전으로 서비스가 개발되어 있었습니다.리뉴얼을 진행하면서 디자인 시스템이 도입되었고, 이 시스템을 4개의 리모트 앱 모두에 동일하게 적용해야 하는 요구사항이 있었습니다. 하지만 각 리모트 앱들은 서로 다른 레포지토리로 관리되고 있었고, 기존 구조에서는 각 ..

React와 Tabulator 라이브러리를 활용하여 재사용 가능하고 확장성 있는 테이블 컴포넌트를 설계한 과정을 작성해보고자 합니다.프로젝트 개요, 라이브러리 선택React 프로젝트에서 복잡한 데이터 테이블을 구현해야 했습니다.특히 클립보드 기능과 범위 선택 기능이 핵심 요구사항이었고, 이를 효율적으로 구현할 수 있는 라이브러리를 찾아야 했습니다.여러 테이블 라이브러리를 검토한 결과, Tabulator를 선택하게 되었습니다.Tabulator 선택 이유무료 오픈소스 라이브러리로 라이선스 비용 부담 없음클립보드 기능이 내장되어 있어 Excel과 유사한 복사/붙여넣기 지원풍부한 커스텀 에디터 지원으로 날짜, 선택 등 다양한 입력 방식 구현 가능관심사 분리 아키텍처 도입프로젝트 전반에서 일관된 테이블 UI/UX..

문제 상황회사 보안 점검에서 Fortify 스캔을 진행한 결과, 내가 작성한 Dockerfile에서 다음과 같은 HIGH 레벨 보안 경고가 발생했다.Default User PrivilegeHIGHDocker 컨테이너가 root 권한으로 실행됨 Fortify의 "Default User Privilege" 보안 경고는 Dockerfile 내에서 기본 사용자(root) 로 컨테이너를 실행할 경우 발생합니다. 이는 컨테이너가 해킹되거나 취약점이 발생했을 때, root 권한이 그대로 유지되므로 호스트 시스템까지 영향을 줄 수 있는 위험이 존재합니다. 따라서 root 대신 일반 사용자 권한을 사용하도록 설정하는 것이 권장됩니다. 해결 방법 및 적용 내용기존 Dockerfile에는 사용자 설정이 없어서 기본적으로 r..

1. XSS(Cross‑Site Scripting)란?XSS(Cross‑Site Scripting) : 웹 애플리케이션에서 자주 등장하는 취약점으로, 공격자가 악성 스크립트를 주입해 사용자의 브라우저에서 실행시키는 기법세션·쿠키 탈취 : 악성 스크립트가 실행되면 로그인 세션 쿠키를 탈취해 계정 탈취로 이어질 수 있습니다.피싱·악성 행위 : DOM을 조작해 가짜 로그인 창을 띄우거나, 숨은 네트워크 요청으로 토큰·개인정보를 외부로 전송할 수 있습니다.연계 공격 : CSRF 등 다른 취약점과 결합해 결제·게시물 작성 등 의도치 않은 동작을 수행시키기도 합니다.발생 원인사용자 입력을 검증·필터링·인코딩 없이 그대로 HTML이나 속성(src 등)에 삽입하는 경우React, Vue 등에서 dangerouslySe..

회사 내부 모니터링 대시보드에서 수천 건 이상의 카드(Card) 컴포넌트를 한 화면에 표시해야 하는 요구사항이 있었습니다. 처음에는 단순히 Array.map을 통해 모든 데이터를 렌더링했으나, 아래와 같은 문제가 발생했습니다.렌더링 지연 : 한 번에 모든 컴포넌트를 그리다 보니, 브라우저 메인 스레드가 과부하되어 화면이 뜨기까지 20~30초 걸림스크롤 성능 저하 : DOM 요소가 늘어나면서 스크롤 시 FPS가 크게 떨어지는 문제 발생사용자 경험(UX) 악화 : API는 이미 빠르게 응답했는데, 렌더링이 끝나지 않아 로딩 스피너가 바로 사라지고도 빈 화면이 한참 동안 노출문제를 해결하기 위한 방법으로 리스트 가상화를 진행해보기로 했습니다. 리스트 가상화란 ?화면에 보이는 아이템만 실제로 렌더링하고, 나머지..

React에서 페이지 또는 컴포넌트를 동적 로딩할 때, React.lazy()와 Suspense를 사용하면 효율적으로 관리할 수 있습니다.   lazy()를 활용한 동적 로딩(Route 정리)기본적으로 React에서는 import를 사용하여 정적인 방식으로 컴포넌트를 불러옵니다.하지만, 페이지가 많아질수록 초기 로딩 속도가 느려지는 문제가 발생합니다.👉 이를 해결하기 위해 React.lazy()를 사용하면, 필요한 순간에만 컴포넌트를 불러올 수 있습니다.이 방식은 코드 스플리팅(Code Splitting)을 적용하여 성능 최적화에도 도움을 줍니다.  정적 로딩 방식 (비효율적인 예시)이 방식은 모든 페이지가 초기 로딩 시점에 한 번에 불러와지기 때문에 초기 로딩 속도가 느려질 수 있다.import Ho..

Vite로 작성된 React 프로젝트를 GitLab CI/CD를 통해 Docker 이미지를 빌드하고, Nginx로 정적 파일을 서빙하는 과정을 정리했습니다.  최종적으로 배포 환경에서 index.html과 관련된 정적 자산(js, css, svg 등)을 Nginx로 제공하여 정상적으로 애플리케이션이 동작하도록 합니다.Nginx는 웹 서버 소프트웨어입니다. 웹 서버는 클라이언트(브라우저)에서 요청을 보내면, 이를 처리하고 파일(HTML, CSS, JS 등)을 클라이언트로 보내주는 역할을 합니다.정적 파일 배포와 프록시 기능에 최적화된 서버로, React, Vue 같은 프론트엔드 프로젝트의 빌드 결과물을 효율적으로 배포할 수 있는 도구입니다.Nginx의 기본 동작 클라이언트 요청: 사용자가 브라우저에서 ht..

라우트 정의 시 정적으로 import하는 방식에서 동적으로 import하는 방식으로 전환하게 되었습니다.이를 위해 dynamicImportComponent라는 유틸리티 함수를 도입하여 동적으로 컴포넌트를 로드하고, 라우트 정의를 효율적으로 관리할 수 있게 되었습니다. 기존 정적 import 방식기존에는 각 라우트 모듈을 개별적으로 import하여 사용했습니다. const testView1 = from "@/views/test/test1"const testView2 = from "@/views/test/test2"const testView3 = from "@/views/test/test3"export default [ { path: "testView1", children: testView1, ..

React 프로젝트에서 SVG 아이콘을 효율적으로 관리하고 사용하는 방법입니다.특히, vite-plugin-svgr와 import.meta.glob을 활용하여 SVG 파일을 자동으로 불러오고 React 컴포넌트처럼 사용합니다.SVG 파일을 React에서 사용하는 이유SVG는 벡터 기반의 그래픽 형식으로 다음과 같은 장점이 있습니다:확장성: 해상도와 무관하게 선명하게 렌더링유연성: 색상, 크기, 스타일 등을 동적으로 조정 가능가벼움: 아이콘과 같은 간단한 그래픽에서 번들 크기를 최소화React에서 SVG를 사용하면 동적인 UI 구성과 함께 코드의 재사용성이 증가합니다. Vite에서 SVG를 React 컴포넌트로 변환하기1. vite-plugin-svgr 설치vite-plugin-svgr는 SVG 파일을 R..