기록

nGrinder로 동시 요청 성능 테스트를 하던 중, 예상보다 성공 수가 적어 실시간으로 성공/실패 상황을 모니터링할 수 있는 도구를 찾던 과정에서 Pinpoint 알게 되어, 이번 글에는 Pinpoint에 대해 알아보았던 것과 이를 운영 서버에 적용하는 과정을 공유하려고 합니다.   1. Pinpoint 란?Pinpoint는 네이버에서 만든 APM (Application Performance Management) 도구로, 분산된 애플리케이션의 성능을 모니터링하고 분석하는 데 사용됩니다. 실시간으로 애플리케이션의 서버맵, 실시간 활성 스레드 차트, 요청/응답 차트, API 호출 상세 기록, 서버의 상태성능을 추적하고, 문제 발생 시 그 원인을 쉽게 찾을 수 있습니다.     2. Pinpoint 구성 ..

개인 프로젝트를 운영하던 중 예기치 못한 문제가 발생하여 원인 분석과 해결하는 과정을 정리해보았습니다.  개발 환경 : AWS EC2 프리티어(ubuntu 24), Nginx 1.24.0, Sentry1. 문제 시작개인적으로 운영하는 사이트에서 백엔드 API 요청 시 500 에러가 발생하였습니다. (어라? 어제까지는 잘 됐는데..)    2. 원인 분석일단 원인을 찾기 위해 모니터링 툴인 Sentry 들어가서 이슈를 확인했는데 새로운 이슈는 없었습니다.그 다음, 운영 서버에 들어가서 백엔드 프로젝트에 에러 로그를 보았습니다.하지만 에러 로그에는 기록이 남겨있지 않았습니다. 요청 로그에도 요청한 기록이 없었습니다.  백엔드에 문제가 아니라 "다른 문제일 수도 있겠구나" 생각이 들어서 Nginx 로그를 ..

블루-그린 배포 방식인 Nginx의 로드 밸런싱 기능과 헬스체크를 통해 무중단 배포에 대해 알아보겠습니다. 무중단 배포 시나리오는 다음과 같습니다.새로운 배포 시 두 인스턴스 중 하나만 업데이트하고 Nginx가 트래픽을 새 인스턴스로 라우팅하도록 합니다.배포가 완료되면, 나머지 인스턴스도 동일하게 업데이트합니다.이 과정에서 Nginx가 트래픽을 분산하여 중단 없이 배포를 수행할 수 있습니다.  개발 환경 : AWS EC2(ubuntu 24), Nginx 1.24.0, Spring Boot 31. 헬스 체크 API 만들기헬스 체크는 애플리케이션 인스턴스가 정상적으로 작동하는지 확인하는 메커니즘입니다.간단한 헬스 체크 API 만듭니다.@RestControllerpublic class KeepAliveCont..

티스토리에서 게시글 작성을 하다가 사진을 업로드 하면 가끔 로딩 창이 사라지지 않습니다.로딩 창이 있으면 작성한 글을 수정이나 저장을 할 수 없습니다.그래서 새로고침을 했더니 로그아웃이 되어 있었고 기존에 작성된 글이 사라졌습니다.허망했다. 임시 저장이라도 해둘껄...  이 문제를 해결하기 위해서 위에 있는 로딩 창을 없애고 기존에 작성한 글을 복사하여 다시 작성하는 방법으로 해결하였습니다.순서는 다음과 같습니다.개발자 콘솔로 들어가기오른쪽에 있는 화살표를 클릭마우스를 왼쪽 화면으로 이동왼쪽 화면 전체가 파란색이 되면 클릭5. div 중에 id="mce-modal-block" 찾아가서 postion : fixed 체크 되어 있는 것을 해제한다.그러면 로딩 창이 사라지고 작성한 글을 복사할 수 있습니다...

1. Highcharts 개념과 사용[ Highcharts 이란? ]자바스크립트만으로 다양한 차트를 그려낼 수 있는 차트 라이브러리로, 웹 페이지에서 실시간으로 변경되는 다양한 차트를 그려줄 때 매우 유용한 라이브러리입니다.  [ Highcharts 설치 ]npm install highcharts  개발환경 : React 18, highcharts 6.0.4[ Highcharts 생성 ]import React, { Component } from "react";import Highcharts from "highcharts";const defaultOptions = {  chart: { width: 1560,      height: 250,   },  xAxis: {    crosshair: true..

도서 관리 프로젝트에서 공통적인 4개 항목들을 개별적으로 변경해야 하는 작업을 맡게 되었습니다. 일반적으로 이러한 변경 작업은 모델 창을 사용하여 수행됩니다. 그러나, 모델 창을 통해 데이터를 하나씩 수정하는 방식은 사용자 경험을 저하시키고 작업 효율성을 떨어뜨릴 수 있습니다. 이 문제를 해결하기 위해, 더 가벼운 대안으로 툴팁을 활용해 보았습니다.   1. React-Tooltip 개념과 사용[ React-Tooltip 이란? ]툴팁은 사용자에게 필요한 정보를 간결하고 직관적으로 제공할 수 있는 도구로, 쉽게 말해 말풍선이나 복잡한 UI를 단순화하고 사용자가 더 쉽게 접근할 수 있게 도와줍니다. 특히, React-tooltip 라이브러리를 사용하면 툴팁을 간편하게 구현하고 데이터 수정 작업을 보다 유연..