코딩하는 곰돌이

Spring AI로 임베딩과 RAG 구현해보기평소엔 백엔드가 던져주는 API 응답을 화면에 그리는 데 집중했지만, 최근 사내 서비스에 AI 검색 기능을 붙이는 작업을 앞두고 있다는 소식을 듣고 "내가 소비할 API가 내부적으로 어떻게 동작하는지" 를 직접 이해해보고 싶어 KOSA의 Spring AI 임베딩/RAG 과정을 학습했다. 이 글은 그 과정에서 익힌 핵심 개념과 직접 구현하며 겪은 시행착오를 정리한 기록이다.왜 프론트엔드 개발자가 RAG를 알아야 할까AI 기능이 붙은 화면을 만들다 보면 항상 비슷한 질문에 부딪힌다."이 응답은 왜 이렇게 늦게 오지?""같은 질문인데 왜 답변 품질이 매번 다르지?""이미지 검색은 왜 텍스트 검색보다 느리지?"이런 질문에 답하려면 백엔드가 어떤 데이터를 어떤 구조로 ..

대규모 리스트 렌더링 성능 개선: 가상 스크롤(Virtual Scroll) 직접 구현하기"리스트에 데이터 좀 늘었다고 스크롤이 이렇게 버벅여도 되나요?" — 운영팀 문의를 받고 콘솔을 열어보니, DOM 노드 수가 12,000개를 넘어가고 있었다.🔍 문제 상황담당하던 관리자 페이지에는 거래 내역을 테이블 형태로 보여주는 화면이 있었다. 초기 설계 당시엔 페이지네이션으로 20건씩 끊어서 보여줬지만, 기획 변경으로 "스크롤하면서 계속 이어서 보고 싶다" 는 요구사항이 추가되며 무한 스크롤 방식으로 바뀌었다.문제는 데이터가 누적될수록 심각해졌다.데이터 500건: 큰 문제 없음데이터 3,000건: 스크롤 시 미세한 끊김데이터 8,000건 이상: 스크롤할 때마다 프레임이 뚝뚝 끊기고, 필터를 바꾸면 화면이 1~2..

메모리 누수 디버깅기: Chrome DevTools로 원인 찾기"페이지를 오래 켜두면 브라우저가 느려져요." — 어느 날아온 이슈, 3일간의 추적기의 시작이었다.🔍 문제 상황담당하던 대시보드 서비스에서 장시간 사용 시 브라우저 탭이 느려지고, 결국 응답 없음 상태가 된다는 제보가 들어왔다. 재현 조건은 명확했다.실시간 데이터가 갱신되는 대시보드 페이지10~15분 이상 페이지를 열어둔 채 방치탭 전환이나 스크롤 시 눈에 띄는 렉 발생처음엔 "그냥 데이터가 많아서 그런가?" 싶었지만, 새로고침 한 번으로 증상이 즉시 사라진다는 점이 마음에 걸렸다. 전형적인 메모리 누수(Memory Leak)의 냄새였다.1단계: 증상부터 정량화하기 — Performance Monitor감으로 접근하면 삽질만 늘어난다. 가장..