개발자 하민아빠의 Dev & Money

[React] React 바깥에서 안전하게 세션 만료/로그아웃 처리하기 (feat. 의존성 주입)

안녕하세요! 오늘도 실무에서 겪은 트러블슈팅 경험을 나누러 온 4년 차 프론트엔드 개발자입니다. 😊React SPA(Single Page Application)를 개발하다 보면, 사용자의 인증 세션이 만료되었을 때 처리해야 할 일이 꽤 많습니다. Redux 상태를 초기화하고, 열려있던 모달이나 패널을 닫고, React Query 캐시를 날린 뒤, 로그인 페이지로 안내해야 하죠.그런데 이 '정리(Cleanup)' 로직을 작성하다 보면 한 가지 큰 벽에 부딪히게 됩니다.바로 "React 훅(Hook)은 컴포넌트 바깥에서 쓸 수 없다"는 React의 철칙 때문입니다. 오늘은 이 규칙 때문에 파편화된 로그아웃 로직을 모듈 스코프와 의존성 주입(DI) 패턴을 이용해 한 곳으로 우아하게 모은 과정을 공유해보려고 ..

안녕하세요! 최근 LangGraph를 활용해 AI 에이전트를 개발하면서 정말 골치 아픈 문제에 직면했었어요.바로 사용자와 에이전트가 대화를 나눌수록, 그리고 툴(Tool) 호출 결과가 쌓일수록 그래프 스테이트(Graph State)에 저장되는 데이터가 무한히 증식한다는 점이었습니다. 이로 인해 컨텍스트 한계값(현재 약 200만 토큰)에 도달해버리거나 서버 상태에 큰 부담을 주는 문제가 발생했죠.저와 비슷한 고민을 하고 계실 개발자분들을 위해, 이번에 클로드 코드(Claude Code)에서 영감을 받아 구현한 '대화 압축(Compact)' 기능의 실무 적용기를 공유해 보려고 해요!1. 컨텍스트 무한 증식, 무엇이 문제였을까?LangGraph는 노드 간 상태(State)를 전달하며 워크플로우를 이어가는 훌륭..

안녕하세요! 현업에서 치열하게 구르고 있는 4년 차 개발자입니다. 지난 3편에서는 GraphDB를 활용해 'UI-SQL 추출'과 '테이블 영향도 파악'을 자동화한 경험을 공유해 드렸는데요.글 말미에 잠시 예고해 드렸던 '에러 추적 에이전트' 기억하시나요?트랜잭션 관리부터 에러 로그 분석, 그리고 그 이면의 비즈니스 맥락까지... 하나의 글로 담기엔 내용이 너무 깊어 부득이하게 이번 심화 편으로 따로 빼서 찾아오게 되었습니다. "어? 에러 났어요!"라는 슬랙 메시지를 받으면 우리는 보통 에러 로그를 뒤지고, 몇 번째 라인인지 확인하고, Git Blame을 열어 누가 언제 고쳤는지 보고, 지라(Jira)를 뒤져서 왜 이런 요구사항이 들어왔는지 확인하죠. 원인을 찾는 데만 한참이 걸립니다.그래서 저는 이 모든..

안녕하세요! 현업에서 치열하게 구르고 있는 4년 차 개발자입니다.지난 1편에서는 AI 에이전트의 토큰 낭비를 막기 위해 GraphDB를 도입한 배경을, 2편에서는 소스 코드를 AST로 파싱해 CI/CD 파이프라인에서 자동으로 GraphDB를 갱신하는 과정을 다루었습니다. 인프라와 데이터 파이프라인이 완성되었으니, 이제 이 강력한 무기를 실무에서 어떻게 써먹고 있는지 보여드릴 차례입니다.현재 저희 팀은 GraphDB에 적재된 데이터를 바탕으로 크게 3가지의 AI 에이전트를 개발하여 운영 중인데요. 오늘은 그중에서도 개발자들의 퇴근 시간을 획기적으로 앞당겨준 'UI-SQL 추출 에이전트'와 '테이블 영향도 추적 에이전트'의 실전 활용기를 공유해 보겠습니다.1. UI-SQL 추출 에이전트: 화면부터 실제 DB..

안녕하세요! 현업에서 치열하게 구르고 있는 4년 차 개발자입니다. 지난 1편에서는 AI 모니터링 에이전트의 토큰 낭비를 막고 추적 성능을 높이기 위해, 왜 Git API 텍스트 검색 대신 GraphDB(Neo4j) 를 선택했는지 이야기해 보았습니다.그런데 GraphDB를 구축하기로 마음먹고 나니 가장 큰 현실적인 벽에 부딪혔습니다."서비스 코드는 매일매일 수정되고 배포되는데, GraphDB에 저장된 구조도(노드와 엣지)는 어떻게 최신 상태로 유지하지?" 사람이 코드가 바뀔 때마다 DB를 쿼리해서 관계를 수정하는 건 말도 안 되는 일이죠.그래서 저는 정적 분석(AST 파싱) 모듈을 파이썬(Python)으로 직접 개발하여 CI/CD 배포 파이프라인에 태웠습니다.즉, 개발자가 코드를 배포하면 파이프라인이 돌면..

안녕하세요! 현업에서 치열하게 구르고 있는 4년 차 개발자입니다. 최근 저희 팀은 운영 중인 기존 서비스에 '시스템 모니터링 및 기능 추적을 위한 AI 에이전트'를 도입하는 프로젝트를 진행했습니다.서비스에 장애가 나거나 특정 기능을 수정해야 할 때, AI가 "이 UI에서 호출하는 API가 어떤 테이블을 수정하는지" 단번에 추적해서 알려주길 바랐거든요. 처음에는 아주 단순하게 생각했습니다."AI 에이전트한테 Git 저장소 조회 API 권한을 주고, 코드를 직접 읽어서 분석하게 하면 되지 않을까?" 하고요.하지만 결과는 처참했습니다.방대한 소스 코드와 참조 관계를 따라가다 보니 LLM의 컨텍스트 토큰은 순식간에 고갈되었고, 추적 성능은 바닥을 쳤습니다. 이 문제를 해결하기 위해 제가 찾은 돌파구는 바로 Gr..

안녕하세요! 실무에서 치열하게 부딪히며 성장하고 있는 4년 차 개발자입니다. 😊 최근 사이드 프로젝트로 만들고 있는 Family Planner 앱의 백엔드(NestJS)를 개발하다가 정말 기묘한 버그를 만났습니다.공공데이터포털(data.go.kr)의 공휴일 API를 호출하는데, 자꾸만 400 INVALID_REQUEST_PARAMETER_ERROR 에러를 뱉어내는 것이었죠. 단순한 파라미터 에러인 줄 알았는데, 눈에 보이는 증거가 전혀 없어서 원인을 찾고 수정하느라 배포 커밋만 15번을 넘게 했고, 꼬박 2일이라는 시간을 쏟아부었습니다. 결론부터 말씀드리면 범인은 파라미터가 아니라 Sentry(모니터링 툴)가 몰래 주입한 HTTP 헤더 때문이었습니다.혹시 지금 저처럼 이유를 알 수 없는 공공 API 4..

안녕하세요! 실무에서 치열하게 고민하고 부딪히며 성장하고 있는 4년 차 개발자입니다. 😊 다들 사내 발표나 세미나를 준비하실 때 어떤 툴을 사용하시나요?아마 십중팔구 파워포인트(PPT)나 키노트를 떠올리실 텐데요.저 역시 항상 PPT로 발표 자료를 만들면서 '폰트 파일 챙겼나?', '발표장 PC에서 레이아웃이 깨지면 어떡하지?' 하는 불안감을 안고 살았어요. 다음 달에 사내에서 AI Agent 서비스 개발과 관련해 팀 빌딩 발표를 하게 되었는데, 명색이 최신 AI 기술을 발표하는 자리인데 구식 PPT 포맷을 쓰는 게 영 아쉽더라고요.그래서 과감하게 기존에 보유한 사업자 도메인에 HTML 기반의 웹 프레젠테이션을 올려보기로 결정했습니다. 결과적으로 바이브 코딩(Vibe Coding)을 활용해 PPT보다 ..

안녕하세요! 4년 차 실무 개발자입니다. 😊최근 AI Agent 챗봇 서비스를 개발하며 @microsoft/fetch-event-source를 이용해 실시간 스트리밍 채팅을 연동하고 있습니다.테스트를 진행하던 중 꽤 당황스러운 상황을 마주했는데요.채팅을 입력하는 순간 Access Token이 만료되면 401(Unauthorized) 에러가 발생하면서 채팅이 뚝 끊겨버리는 현상이었습니다. 보통 실무에서는 Axios 인터셉터(Interceptor)에서 이런 토큰 갱신(Refresh) 로직을 공통으로 처리하죠.하지만 스트리밍 API는 순수 fetch 기반이라 Axios 인터셉터를 타지 못한다는 사실을 잠깐 깜빡했던 겁니다. 🥲 게다가 화면이 복잡해지면서 동시에 여러 API가 호출되다 보니, 401 에러가 ..

안녕하세요! 'Family Planner(패밀리 플래너)'를 이용해 주셔서 진심으로 감사드립니다. Family Planner는 우리 가족의 소중한 일정, 육아 기록, 그리고 자산 현황까지 하나의 앱에서 편리하게 공유하고 관리할 수 있도록 만들어진 공간입니다. 앱을 사용하시면서 겪으신 불편한 점, 개선되었으면 하는 점, 혹은 궁금한 사항이 있으시다면 언제든지 편하게 의견을 남겨주세요. 여러분의 소중한 의견 하나하나가 앱을 더 나은 방향으로 발전시키는 데 큰 힘이 됩니다. 📌 문의 방법아래 두 가지 방법 중 가장 편하신 방법으로 문의를 남겨주시면, 확인 후 최대한 빠르게 답변 및 조치해 드리겠습니다. 1. 이메일 문의자세한 오류 상황이나 캡처 화면을 함께 첨부해 주시면 문제 해결에 큰 도움이 됩니다.이메일..