본문 바로가기

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

𝐀𝐥𝐥 𝐏𝐨𝐬𝐭277

사내 보안 리소스 통합 플랫폼 구축기 : 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.

[Next.js] tailwind CSS 로컬 폰트 적용 (feat. Type '{ children: Element[]; className: string; }' is not assignable to type) next.js + tailwind CSS프로젝트에서 글씨체를 적용 하는 방법해당 게시글은 다음 기술 스택을 기반으로 합니다.- next.js v15 pages-router- react v19- typescript- tailwindCSS- shadcnUI프로젝트에서 사용하는 pretendard를 예시로 작성합니다. Optimizing: Fonts | Next.jsOptimize your application's web fonts with the built-in `next/font` loaders.nextjs.org Pretendard 파일을 다운로드 합니다.https://cactus.tistory.com/306해당 프로젝트에서는 폰트 경량화를 위해 .woff2 확장자 파일을 다운로드 했습니다.다음 경로에.. 2025. 3. 14.

[Next.js] node.js 메모리 사용량 확인과 heap 메모리 제한 적용하기 node.js 메모리 사용량 확인과 heap 메모리 제한 적용하기현재 메모리 사용량을 확인하기 위해서는 next.js에서 server를 커스텀 하여 로그를 통해 확인할 수 있다.메모리 사용량을 알아내는 방법은 GPT의 도움을 받아 process.memoryUsage()를 통해 알 수 있다는 것을 확인했다. 1. process.memoryUsage의 중요 요소Node.js(Next.js) 애플리케이션 모니터링을 위한 메모리 인사이트 / if(kakaoAI)2024해당 컨퍼런스 내용이 내가 고민하고 있는 개념적인 부분을 다뤄주고 있었다. 1-1. 코드 적용// server.jsconst { createServer } = require('http');const { parse } = require('url');.. 2024. 12. 23.

[Next.js] Next.js의 기본 메모리 관리 구조 - node.js v8 Next.js의 기본 메모리 관리 구조Next.js는 Node.js 기반의 V8 엔진에서 실행된다.JavaScript는 싱글 스레드 언어이다. 따라서 V8 역시 자바스크립트의 Context 당 하나의 프로세스를 사용한다. 단, 서비스 워커를 사용하는 경우는 워커의 개수만큼 프로세스를 증식한다고 한다.실행중인 프로그램은 V8 프로세스에서 할당된 일정량의 메모리로 표현되는데, 이를 Resident set이라고 한다. 내부 구조는 아래 사진과 같다.사진에서 볼 수 있듯이 크게 힙 메모리와 스택 메모리로 관리 되는 것을 확인할 수 있다.1️⃣ 스택 메모리스택은 메모리 영역이고 V8마다 하나의 스택을 가진다. 스택에는 정적데이터(메서드와 함수 프레임, 원시 값, 객체 포인터)가 저장된다.V8의 스택 영역의 관리는.. 2024. 12. 22.

[Next.js] SWC 옵션을 활용하여 빌드 시간 단축하기 SWC를 활용하여 빌드 시간 단축하기 사내에서는 CI/CD 도구로 깃헙 액션을 사용하고 있다.백엔드와 다르게 프론트는 액션이 완료되는데 까지 전체적인 시간이 좀 더 소요되는 것을 확인할 수 있다. 현재 내가 개발하고 있는 프론트 환경에서 CI/CD 과정 중 가장 소요 시간이 긴 스탭은 빌드 후 도커 이미지를 만들어 ECR로 옮기는 시점이다. 그 중 CI 과정 중에서 프론트 프로젝트 빌드 시간과 ECR PUSH 타임이 대부분을 차지함을 확인 할 수 있다. ❓그렇다면,프론트 프로젝트 빌드 시간을 어떻게 줄일 수 있을까? Next.js 빌드 시간을 단축 하는 방법SWC 코드 압축 활성화: swcMinify: true를 설정해 빌드 시 SWC를 통해 코드를 압축하여 최적화.Webpack 캐싱 사용: W.. 2024. 11. 1.

이전 1 2 3 4 ··· 28 다음

티스토리툴바