개발자 하민아빠의 Dev & Money

최근 회사에서 React를 이용해 AI Agent 챗봇을 개발하고 있는데요.실시간으로 타이핑되듯 답변이 오는 경험을 주기 위해 Server-Sent Events(SSE) 방식인 @microsoft/fetch-event-source 라이브러리를 사용하고 있습니다. 그런데 개발 도중 아주 당황스러운 이상 현상을 발견했어요.LLM의 답변이 길어져서 잠깐 다른 작업을 하려고 브라우저 탭을 내리거나 다른 창으로 가렸다가 돌아오면, 진행 중이던 요청이 툭 끊기고 처음부터 다시 요청이 가는 것이었습니다. 저와 비슷한 문제를 겪고 계실 분들을 위해, 이 문제의 원인이 무엇인지 파악하고 네트워크 연결은 유지하면서 프론트엔드 자원 사용은 최소화하는 방식으로 어떻게 해결했는지 그 경험을 공유해보려고 해요.1. 문제 상황: ..

지난 글에서 react-resizable-panels를 활용해 화면을 깔끔하게 분할하는 방법을 공유해 드렸는데요.오늘은 그 작업에 바로 이어졌던, 또 다른 치열한(?) 고민의 흔적을 나눠보려고 합니다. 전체 레이아웃을 나누는 건 성공했지만, 분리된 '분석 패널(SidePanel)' 내부의 요소들을 리사이징하려다 보니 예상치 못한 난관에 부딪혔어요. 결국 라이브러리를 걷어내고 순수 React와 DOM 이벤트를 활용해 커스텀 리사이징 기능을 직접 구현하게 되었습니다.저와 비슷한 요구사항 때문에 골머리를 앓고 계신 분들께 이 글이 좋은 힌트가 되길 바랍니다. 😊1. 문제 상황: 왜 라이브러리를 쓰지 않았을까?지난 글에서 극찬했던 react-resizable-panels를 내부 패널에도 적용하려고 했습니다.하..

최근 프로젝트에서 채팅창 UI를 개편하면서, 채팅 영역과 분석 패널을 분리하고 사용자가 자유롭게 사이즈를 조절할 수 있는 기능을 개발해야 했어요.처음엔 이전에 모달창 리사이징에 유용하게 썼던 react-rnd를 무심코 꺼내 들었지만, 곧바로 예상치 못한 벽에 부딪혔습니다. 오늘은 저처럼 레이아웃 분할을 고민하시는 분들을 위해, 왜 react-rnd 대신 react-resizable-panels를 선택하게 되었는지, 그리고 실제 코드는 어떻게 작성했는지 그 과정을 공유해 보려고 합니다.1. 문제 상황: react-rnd의 한계이전에 모달창을 개발할 때는 react-rnd 라이브러리를 정말 유용하게 사용했습니다.드래그 앤 드롭과 리사이즈를 동시에 지원해서 '둥둥 떠다니는' 요소를 제어하기엔 안성맞춤이었거든요..

React를 사용하다 보면 보통 데이터나 함수를 '부모에서 자식으로' Props를 통해 전달하는 것이 익숙하실 텐데요.하지만 가끔은 자식 컴포넌트 내부에 있는 함수를 부모 컴포넌트에서 직접 실행해야 할 때가 생깁니다. 최근에 AI 채팅 기능을 구현하면서 이 문제에 직면했어요.원래 하나의 거대한 컴포넌트로 되어있던 코드를 유지보수하기 좋게 여러 개로 쪼개는 리팩토링을 진행했거든요.그런데 채팅 스크롤 영역을 별도의 자식 컴포넌트로 분리하고 나니, 부모 컴포넌트에서 새 메시지를 보낼 때마다 자식 컴포넌트의 '스크롤 맨 아래로 내리기' 함수를 호출해야 하는 상황이 발생한 거죠. 저처럼 컴포넌트를 분리한 후 DOM 요소 제어(Scroll, Focus 등) 때문에 고민이셨던 분들을 위해, forwardRef와 us..

안녕하세요!지난 글에서는 Promise를 활용해 비동기적으로 모달을 제어하는 방법을 알아보았는데요.오늘은 모달 시리즈의 마지막, 대망의 '다기능 윈도우 모달' 구현 방법을 공유하려고 해요. 실무를 하다 보면 관리자 페이지(백오피스)를 개발할 일이 참 많습니다. 이때 기획자분들이 종종 이런 요청을 주시곤 해요."모달 창이 화면 가운데를 다 가려서 뒤에 있는 데이터를 볼 수가 없어요. 창을 옆으로 치워두거나, 크기를 줄이거나, 잠시 접어둘 수는 없을까요?" 단순히 position: fixed로 화면 정중앙에 띄우는 모달만으로는 이런 요구사항을 만족시키기 어렵죠.저도 이 문제를 해결하기 위해 꽤 많은 고민을 했었는데요.오늘은 react-rnd 라이브러리를 활용해 마치 윈도우 OS의 창처럼 드래그(Drag), ..

안녕하세요! 지난 글에서는 Context API와 Portal을 활용해 모달을 자바스크립트 함수처럼 호출하는 방법을 공유했는데요.혹시 적용해 보셨나요? 저도 그 방식을 도입하고 나서 꽤 만족하며 개발을 진행하고 있었는데, 사람의 욕심은 끝이 없더라고요.하위 컴포넌트에서 매번 JSX로 ... 형태의 레이아웃을 직접 넘겨주는 게 점차 귀찮아지기 시작했어요.특히 단순한 알림 창(alert)이나 확인 창(confirm)은 프로젝트 전체에서 디자인이 똑같은데 말이죠. 게다가, 사용자가 '확인'을 눌렀는지 '취소'를 눌렀는지에 따라 다음 로직을 실행해야 하는데, 이걸 콜백 함수로 넘기다 보니 코드가 이리저리 튀는 느낌이 들었습니다."기본 제공되는 window.confirm() 처럼 if (await confirm(..

지난 글에서 토큰 최적화 이야기를 하며 'SQL 추출 AI 에이전트'를 개발했던 저의 실무 경험담을 들려드렸는데요.글을 읽으시면서 혹시 이런 의문이 들지 않으셨나요? "그냥 프롬프트 잘 짜서 ChatGPT(LLM)한테 물어보는 거랑, AI 에이전트(Agent)랑 도대체 뭐가 다른 거지?" 요즘 IT 업계에서 '에이전트'라는 단어가 유행어처럼 남발되고 있지만, 실무를 하는 개발자 입장에서는 이 둘의 아키텍처 차이를 명확히 아는 것이 매우 중요합니다.오늘은 단순히 묻는 말에 대답만 하는 '챗봇'을 넘어, 스스로 생각하고 행동하는 'AI 에이전트'의 본질과 작동 원리에 대해 정리해 볼게요.1. 수동적인 챗봇 vs 능동적인 에이전트 (ft. 우리가 쓰는 Gemini의 비밀)가장 직관적인 차이는 '주도권이 누구에..

안녕하세요! 이전 글에서 React Portal을 사용해 모달의 z-index 이슈를 해결하는 방법을 나누었는데요, 오늘은 여기서 한 걸음 더 나아가 실무에서 정말 유용하게 쓰는 꿀팁을 공유하려고 해요. 리액트에서 모달을 띄우려면 보통 const [isOpen, setIsOpen] = useState(false)처럼 상태를 만들고, JSX 안에 ...을 선언해 줘야 하죠.모달이 늘어날 때마다 이 코드를 반복하는 게 은근히 번거롭지 않으셨나요?저도 이 반복 작업에 지쳐서 "그냥 window.alert()처럼 자바스크립트 함수 딱 하나로 부를 순 없을까?"를 엄청 고민했답니다. 오늘은 Context API와 커스텀 훅을 조합해서 모달을 자바스크립트 함수처럼 아주 우아하게 호출하는 방법을 알려드릴게요!1. 왜..

안녕하세요! 오늘은 프론트엔드 개발을 하면서 정말 자주 구현하게 되지만, 은근히 속을 썩이는 '모달(Modal) 창 띄우기'에 대해 이야기해 보려고 해요. 저도 예전에 열심히 모달을 만들었는데, 부모 컴포넌트의 overflow: hidden 속성에 갇혀서 모달이 반토막 나거나, 복잡하게 꼬인 z-index 때문에 엉뚱한 요소 뒤로 숨어버려서 식은땀을 흘렸던 기억이 납니다.이런 구조적인 스타일링 문제를 아주 우아하게 해결해 줄 수 있는 방법이 바로 React Portal이에요. 오늘은 이 React Portal을 활용해서 부모 요소의 눈치를 보지 않고 안전하게 모달을 띄우는 방법을 공유해 드릴게요!1. React Portal이란 무엇일까요?React 공식 문서에서는 Portal을 이렇게 설명하고 있어요."..

리액트로 처음 프로젝트를 세팅하고 개발을 시작할 때, console.log를 찍어보고 당황했던 경험 다들 한 번쯤 있으시죠?분명 한 번만 실행되어야 할 로그가 두 번씩 찍히거나, API 호출이 연달아 두 번 발생하는 현상 말이에요.저도 초보 시절에는 "이거 리액트 버그 아니야?" 하면서 index.js에 있는 를 냅다 지워버리고 개발했던 부끄러운 기억이 있습니다. 하지만 실무를 경험하다 보니, 이 친구가 우리를 괴롭히려는 게 아니라 잠재적인 버그를 미리 잡아주기 위해 애쓰고 있었다는 것을 깨달았어요.오늘은 Strict Mode가 대체 무엇인지, 왜 컴포넌트를 두 번씩 렌더링하는지, 그리고 실무에서는 이를 어떻게 다루어야 하는지 제 경험을 녹여 자세히 설명해 드릴게요.1. Strict Mode란 무엇인가요..