안녕하세요, 이상혁입니다

AI 서비스를 사용하면서 실시간으로 답변이 생성되는 UX를 경험하게 되었고, 이를 구현하는 Stream 개념에 관심을 갖게 되었습니다. Stream은 거대한 데이터를 작은 청크로 쪼개어 연속적으로 전달하는 방식으로, 메모리 효율화와 응답 시간 단축의 이점을 제공합니다. Next.js 프로젝트에서 ReadableStream과 Fetch API를 활용해 직접 스트리밍 UI를 구현하고, 상태 업데이트 최적화와 불완전한 JSON 처리 같은 실무에서 고려해야 할 사항들을 정리했습니다.

사내 전자동의서 에디터의 불편한 사용성 문제를 해결하기 위해 MCP(Model Context Protocol)를 도입해 Claude Desktop과 연동한 결과, 기존에 별도 UI 개발이 필요했던 목록 조회, 검색, 분석 기능들을 대화만으로 처리할 수 있게 되어 서비스 기능이 자연스럽게 확대되는 효과를 얻었지만, LLM이 의도한 방향으로 정확히 동작하게 하려면 아직 상세한 가이드가 필요한 상황이다.

2024년 한 해 동안 다양한 변화와 도전을 겪으며 성장과 고민을 반복했다. 새로운 환경과 프로젝트, 연봉 협상 등에서 성취와 부담을 동시에 느꼈고, 감정적으로 흔들리는 순간도 많았다. 업무에 재미와 의미를 찾기 위해 노력했으며, 기본기와 자기계발의 중요성을 다시 깨달았다. 앞으로도 자신에게 투자하며 더 나은 성장을 다짐한다.

무한 스크롤은 사용자가 페이지를 내릴 때마다 자동으로 데이터를 추가로 불러와 보여주는 UX 방식이다.Intersection Observer와 React Query의 useInfiniteQuery 훅을 활용하면 효율적으로 무한 스크롤을 구현할 수 있다. 핵심은 관찰 대상이 뷰포트에 들어오면 다음 페이지 데이터를 불러오고, 마지막 데이터까지 자연스럽게 이어주는 것이다.

React에서 데이터 패칭과 상태 관리는 복잡해질 수 있는데, React Query를 사용하면 데이터 패칭, 캐싱, 동기화, 뮤테이션 등을 간편하게 처리할 수 있다. useQuery와 useMutation 훅을 활용하면 로딩, 에러, 최신 데이터 반영 등 다양한 요구사항을 쉽게 구현할 수 있으며, invalidateQueries, Optimistic Updates 등 고급 기능도 지원한다. 적절한 옵션 설정과 쿼리 키 관리로 효율적인 데이터 최신화와 캐싱이 가능해진다.