본문 바로가기

What would life be If we had no courage to attemp anything?

2025/066

사내 보안 리소스 통합 플랫폼 구축기 : 4. sentry self-hosted (on-premise) 세팅 with next.js 1. Sentry란?Sentry는 애플리케이션에서 발생하는 에러 및 예외를 실시간으로 수집하고 시각화하여 빠르게 문제를 파악하고 대응할 수 있게 돕는 오픈소스 기반의 오류 추적 시스템이다.주로 웹, 모바일, 데스크탑 등 다양한 플랫폼에서 발생하는 런타임 오류나 성능 저하 이슈를 추적하는 데 활용된다.“Application Monitoring and Error Tracking that helps developers see what actually matters, solve quicker, and learn continuously in production.”2. Sentry로 할 수 있는 것들✅ 에러 추적에러 발생 시 스택 트레이스를 포함한 상세 로그를 수집해 어디서 문제가 발생했는지 시각적으로 파악할 수 .. 2025. 6. 18.

사내 보안 리소스 통합 플랫폼 구축기 : 3. URL을 중심으로 설계한 필터, 검색, 페이지네이션 상태 관리 전략 이번 글에서는 체커 목록 화면에서 필터, 검색, 페이지네이션 상태를 어떻게 관리했는지 정리하고자 한다.특히 Next.js 기반 환경에서 URL 쿼리 파라미터를 중심으로 상태를 통합 관리하고,이를 React Query와 서버 사이드 렌더링(SSR)까지 연결해 일관된 UX와 초기 성능을 확보하는 전략을 설계했다. 🔍 문제 정의처음에는 필터와 검색 상태를 전역 상태로 관리하거나 localStorage에 저장하는 방식을 고려했었다.하지만 아래와 같은 실질적인 한계점이 존재했다.페이지를 새로고침하면 상태가 초기화되어 사용성이 떨어짐필터링된 상태를 URL로 공유할 수 없어 협업 시 불편함브라우저 뒤로가기/앞으로가기 동작이 기대와 다르게 작동함SSR을 활용한 초기 렌더링과 연결되지 않아 로딩 시 UX가 좋지 않음이.. 2025. 6. 13.

사내 보안 리소스 통합 플랫폼 구축기 : 2. 계층형 레퍼런스 필터 UI 개선기 🧱 복잡한 트리구조 필터, 계층형 필터로 개선하기❌ 기존 UI의 문제점기존의 체커 관리 시스템에서는 아래와 같이 트리 구조 기반의 레퍼런스 필터를 사용하고 있었다.트리 형태로 구성된 필터는 시각적으로 복잡하며, 중첩 레벨이 많아지면 가독성과 사용성이 급격히 떨어지는 구조각 챕터/룰 단위로 선택할 수는 있었지만, 전체 선택/해제 로직이 직관적이지 않았고, 마우스 없이 조작하기에도 불편스크롤이 많고 구조가 평평하지 않아, 사용자 입장에서는 어떤 기준으로 선택할지 파악이 어려워 보임첫번째 선택 항목의 경우 필터 레이아웃을 벗어난 UI를 가지고 있음 ✅ 개선 방향: 3단계 계층형 필터 UI기존에 한눈에 보기 어려운 UI를 개선하기 위해 3단계 계층 구조에 기반한 커스텀 필터 컴포넌트를 설계 및 구현했다. ?.. 2025. 6. 13.

사내 보안 리소스 통합 플랫폼 구축기 : 1. 불편한 필터 UI, 모달 기반으로 개선하기 복잡한 필터 UI, 모달 기반으로 개선하기❌ 기존 UI의 문제점 기존 SAST 체커 관리 시스템은 위와 같은 필터 UI를 제공하고 있었다. 그로 인해 다음과 같은 문제점을 가지고 있었다.너무 좁은 공간에 많은 필터 항목이 배치되어 있어 시인성이 낮고 조작이 어려움필터 카테고리가 많아질 경우 세로 스크롤이 길어지고, 일부 항목은 가로 스크롤 없이 볼 수 없을 정도로 레이아웃이 깨지는 경우도 발생필터 항목에 따라 드롭다운이 필터 영역 밖으로 삐져나오는 문제도 있었고, 일부 긴 텍스트는 잘려서 표시되기도 함 ✅ 개선 방향 이런 문제를 해결하기 위해 다음과 같은 UI 개선을 적용했다. 필터를 모달로 분리 좌측 사이드 영역에서 벗어나 전체 모달 창으로 필터를 제공하여 시야 확보 및 사용자 조작성을 .. 2025. 6. 13.

사내 보안 리소스 통합 플랫폼 구축기 : 0. 프로젝트 개요와 기술 선택 사내 보안 분석 체계 통합 시스템 프로젝트에 참여우리 회사는 정적 분석(SAST), 동적 분석(DAST), 오픈소스 컴포넌트 분석(SCA) 등 다양한 보안 분석 서비스를 자체적으로 개발하고 운영하고 있다.기존에 SAST와 관련된 체커(분석 규칙 모듈)를 관리하기 위한 별도의 사내 시스템이 존재했으나, 그 외는 수동 관리에 의존하고 있어 체계적인 통합 관리 플랫폼이 부재한 상황이었다. 특히 신규 체커나 레퍼런스를 추가할 때 중복된 작업이나 커뮤니케이션 비용이 발생할 수 밖에 없는 문제를 가지고 있었다.이를 해결하기 위해 SAST, DAST, SCA 체커 및 레퍼런스 정보를 하나의 시스템에서 통합 관리할 수 있도록 신규 통합 관리 시스템을 기획하고 구축하는 프로젝트 TF가 꾸려졌다. 나는 프론트엔드 개발자로.. 2025. 6. 13.

[Docker] next.js를 Docker로 배포하기 with multi-stage 빌드 더보기📌 목차Dockerfile 작성하기 (Single-stage Dockerfile)Multi-stage 빌드를 통한 이미지 최적화.dockerignore로 불필요한 파일 제거주요 Docker 명령어Reference 사내 서비스 프로젝트 프론트엔드 개발을 맡으면서 CI를 구축해 볼 수 있는 기회가 생겼다.현재 개발중인 서비스는 next.js 기반으로 이루어져 있다. 내가 맡은 역할은 Dockerfile을 생성하여 도커 이미지를 빌드하여 Teamcity에 연동하는 것이다. 이 과정에서 특정 브랜치에 업데이트 발생 시, 도커 이미지를 빌드 후 사내 저장소에 push 하도록 하는 과정까지는 내가 맡았다. 최신 이미지 태그를 가져와 서버를 업데이트 하는 작업은 다른 개발자 선배님이 연동하시기로 했다. Doc.. 2025. 6. 5.

이전 1 다음

티스토리툴바