본문 바로가기

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

𝐀𝐥𝐥 𝐏𝐨𝐬𝐭285

[React] 파편화된 Form 유효성 검사 로직, Zod로 우아하게 격리하기 1. 들어가며: 거대해진 Form의 습격프런트엔드 개발을 하다 보면 수십 개의 입력 필드를 가진 거대한 설정 Form을 다뤄야 할 때가 있습니다.초기에는 단순했던 유효성 검사 로직도 서비스가 성장하면서 점점 복잡해집니다.정규식 기반 포맷 검증파일 크기 및 확장자 체크특정 조건이 만족될 때만 이어지는 순차 검증이런 로직들이 하나둘 추가되다 보면, 어느 순간 UI 컴포넌트 안에 수백 줄의 검증 코드가 뒤엉켜 있는 상태를 마주하게 됩니다.해당 프로젝트는 초기에 약 3주만에 클라우드 서비스를 올려야 했으며, MVP가 기존의 온프레미스의 기본 기능을 모두 혼자 구현해야 한다는 핑계로 UI로직과 비지니스 로직이 뒤섞인 상태였습니다. 최근에 해당 프로젝트의 유효성 검증 로직이 추가 요구사항으로 들어오게 되어 덮어두었.. 2026. 1. 12.

실시간 알림 구현 하기 : 4. 하나의 채널로 SSE 통신하기 (with. Shared Worker) 이전글에서 SSE 연결 테스트를 마친후에 실제로 개발에 착수하는 단계가 되었다. 개발 이전에 내가 고려해야 할 사항들에 대해 정리를 해보았다. 1. SSE는 브라우저 탭마다 연결이 새로 열린다.2. 헤더 커스텀이 필요하지만 SSE의 경우 헤더 커스텀이 불가능하다. 이 조건을 동시에 만족시키는 구조를 만드는 것이 이번 실시간 알림 개발의 핵심 과제였다. 1. 탭마다 새로 열리는 SSE 연결 문제SSE는 기본적으로 브라우저 탭 단위로 연결이 생성된다.즉, 사용자가 같은 서비스에서 탭을 3개 열면 서버 입장에서는 SSE 연결이 3개가 열린다. 기술 검토 초기에는 이 부분을 크게 문제 삼지 않았다.하지만 실시간 알림은 특정 페이지가 아니라 헤더에 항상 떠 있어야 하는 기능이었고, 자연스럽게 사용자는 여러 탭을 .. 2025. 12. 7.

실시간 알림 구현 하기 : 3. 인프라 환경에서 백엔드 서버와 연결 테스트 (with. trouble shooting) 이전 글에서 백엔드 로컬 서버에서는 실행이 잘 되는 것을 확인하였다. 하지만 k8s 인프라 환경에 올렸을 때 문제가 발생하였다.이번 글에서는 Next.js API Routes + SSE 프록시 구성 시 K8s 환경에서 localhost로 연결되던 문제에 대해 작성해보려 한다. Next.js API Routes를 사용해 SSE(Server-Sent Events) 프록시를 구현하던 중, 로컬(Linux 서버)에서는 정상 동작하던 코드가 Kubernetes(K8s) 인프라 환경에 배포되자 localhost로 잘못 연결되며 실패하는 이슈가 발생했다. 이 글에서는 단순한 “env 설정 실수”를 넘어,IP 직접 접근 ↔ Service Name 기반 접근의 구조적 차이,그리고 Next.js의 빌드·런타임 환경 변수 .. 2025. 12. 7.

실시간 알림 구현 하기 : 2. SSE 백엔드 로컬 서버와 연결 테스트 (feat. next.js) 우리 서비스는 프론트(next.js - pages router)와 백엔드(spring boot)로 된 프로젝트이다. 기술을 도입하기 전 백엔드 개발자와 SSE 통신이 가능한 지 확인을 위해 프로토 타입 테스트를 시행하였다. 프론트 코드는 다음과 같이 작성하였다. EventSource 객체를 활용해 SSE 채널을 열고, 서버가 보내는 데이터를 수신하는 간단한 코드이다. 프로젝트에서는 백엔드와의 통신을 next.config.js의 rewrites 설정을 통해 프록시하고 있기 때문에, SSE 엔드포인트(/sse/test)도 동일한 방식으로 작성하였다.// pages/sse-example.jsximport { useEffect } from 'react';export default function SseExa.. 2025. 12. 7.

실시간 알림 구현 하기 : 1. SSE(Server Sent Events)는 무엇인가? SSE(Server Sent Events)SSE의 경우 웹페이지(클라이언트)의 요청 없이도 언제든지 서버가 새로운 데이터를 보내는 것이 가능전통적으로 웹페이지(클라이언트)는 새로운 데이터를 받기 위해 서버로 요청을 보내야 함SSE(Server-Sent Events)는 실시간 웹 애플리케이션을 구현하는데 사용될 수 있는 Web API실시간으로 소식 불러오기, 알림 받기 등 실시간으로 모니터링 해야하는 상황해서 사용할때 유용하게 사용동작 흐름클라이언트가 서버에게 SSE로 통신하자는 요청을 보냄. (Connection Request)서버는 이 요청을 수신하고 수락했음을 알리는 메시지를 보냄. (Connection Response)클라이언트는 이를 받고, 지금부터 서버가 보내주는 데이터들에 반응할 준비이제 서버.. 2025. 12. 1.

실시간 알림 구현 하기 : 0. 요구사항 분석과 방법론 비교 이전에는 서비스에 알림을 볼 수 있는 채널이 존재하지 않았다.서비스 내에 기존에 지원하던 분석과 관련된 서비스 외에 SBOM을 활용한 서비스의 공유 기능이 생기게 되면서 알림 기능이 요구사항으로 추가 되었다. 주요 요구 사항은 다음과 같았다.이벤트 수신 여부 실시간 반영새로운 이벤트 발생 시 실시간 업데이트이벤트 삭제 시 실시간 업데이트 요구 사항 분석 ✅ 새로운 이벤트 발생 시 실시간 업데이트데이터 전송 흐름case 1 : 클라이언트 → 서버 (요청)case 2 : 서버 → 클라이언트✅ 이벤트 수신 여부 실시간 반영, 이벤트 삭제 시 실시간 업데이트데이터 요청/전송 흐름클라이언트 동작 → 서버 (요청)실시간성이 아닌 클라이언트 동작에 따른 서버 요청으로 실시간 알림과 별개로 생각기존 REST 요청을.. 2025. 12. 1.

사내 보안 리소스 통합 플랫폼 구축기 : 6. on-premise sentry 고도화 이전글 에서 sentry를 프론트엔드 서버에 연동 완료하였다. 하지만 어떤 유저가 발생한 오류인지 확인하기는 어려웠고 소스맵 연동도 제대로 되어있지 않아서 어떤 코드에서 발생한 에러인지 한 눈에 알아볼 수 없는 상황에 오류를 트레이스하기 어려운 문제점을 가지고 있었다. 또한, 현재 서비스가 릴리즈 되어있는 현재 시점에 사용자가 어떤 페이지(기능단위의 페이지로 구성되어 있다.)를 자주 들어가는지 알 수 있는 방법이 있으면 좋겠다는 내부의 의견도 존재했다. 그래서 나는 3가지에 대해서 일단 고도화를 진행하였다. 1. 어떤 사용자로부터 비롯된 오류인가2. 어떤 소스코드로부터 트레이스 된 오류인가3. 어떤 페이지를 사용자가 많이 접근하는가 어떤 사용자로부터 비롯된 오류인가Sentry에서는 에러 이벤트에 사용.. 2025. 11. 29.

사내 보안 리소스 통합 플랫폼 구축기 : 5. 페이지 단위의 UI/UX 개선하기 이전에 작성했던 UI/UX 개선기는 컴포넌트 단위의 개선을 다뤘다면,이번에는 페이지 단위의 UI/UX 개선 사항에 대해서 다뤄보려고 한다.어쩌다보니 "레퍼런스"라는 개념에 대한 개선을 자꾸 다루게 되지만, 다른 페이지들도 개선 사항이 꽤 있었다. 또한, 추가 되는 개념들이 있어서 이걸 어떻게 사용자들이 설명 없이 직관적으로 사용할 수 있을까?라는 고민을 되게 많이 했다. 개발도 개발이지만 기획과 UI/UX를 설계하는 일도 꽤나 의미있고 재미있었다. 기존 서비스를 하나씩 다 뜯어보고, 직접 사용해보고 불편한 점들을 취합하고, 기존 사용자들에게 물어봐서 개선해야 하는 부분들에 고민했다. 약간의 자율성이 주어지는 프로젝트라서 피드백이 더 빠르게 오갔던 환경이라 더욱 흥미를 느꼈던거 같다. 같이 참여한 분들도 .. 2025. 11. 28.

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

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

티스토리툴바