{"product_id":"chatbot-builder-react","title":"React용 챗봇 빌더 Skill","description":"\u003cp\u003e대부분의 React 챗봇 튜토리얼은 데모에서 끝납니다. 8초 후에 답변이 한 덩어리로 표시되고, 매번 대화할 때마다 전체 스레드가 모델로 다시 전송되며, 키는 Next가 브라우저 번들에 그대로 인라인하는 NEXT_PUBLIC_ 변수에 들어 있습니다. 스크린샷에서는 멀쩡해 보이지만 실제 사용을 시작한 첫 주에 무너집니다.\u003c\/p\u003e\u003cp\u003e이것은 시스템 prompt가 아니라 빌드 가이드입니다. 파일을 프로젝트에 넣고 Claude Code 또는 Cursor로 열면, Fetch ReadableStream 리더를 사용한 스트리밍, 중지 기능이 연결된 AbortController, 토큰이 추가되는 낙관적 사용자 메시지, 토큰이 추가될 때마다 모든 말풍선을 다시 렌더링하지 않는 목록, 위로 스크롤한 사용자를 방해하지 않는 자동 스크롤, 마크다운과 코드 블록, 라우트 핸들러 뒤에 숨긴 키, localStorage에 저장하는 기록과 이후 실제 백엔드에 저장하는 방식, 그리고 스레드가 길어지는 날을 위한 토큰 예산까지 아키텍처를 함께 구축해 나갑니다.\u003c\/p\u003e\u003cp\u003e한 번 구매하면 계속 소유할 수 있습니다. 구독도, 런타임 종속성도 없으며, 다음 프로젝트에서 다시 사용하거나 코드베이스가 변화함에 따라 수정하는 데 걸림돌도 없습니다.\u003c\/p\u003e","brand":"KissMySkills","offers":[{"title":"Default Title","offer_id":58693470486792,"sku":null,"price":14.99,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1036\/1444\/7880\/files\/chatbot-builder-react-1.png?v=1789397346","url":"https:\/\/kissmyskills.com\/ko\/products\/chatbot-builder-react","provider":"KissMySkills","version":"1.0","type":"link"}