목록React (6)
MAKE IT SIMPLE
동적 데이터셋 테이블, 어디까지 만들어봤니행/열/값을 사용자가 마음대로 끌어다 놓으면 알아서 피벗되고, 소계·합계·총계까지 끼워 넣는 테이블을 React로 만들면서 정리한 기록.1. 들어가며 — 단순해 보였던 요구사항"엑셀 피벗 같은 거 화면에서 보여주면 돼요."처음 받은 한 줄. 가볍게 시작했는데, 막상 펴 보니 정적 테이블과는 완전히 다른 영역이었다. 사용자는 같은 데이터셋을 가지고 어떨 땐 단순 목록으로 보고 싶고, 어떨 땐 부서×월로 묶어서 보고, 또 어떨 땐 거기에 소계와 총계까지 끼워서 보고 싶어 한다. 그리고 모든 모드가 같은 컴포넌트에서 매끄럽게 전환돼야 한다.이 글은 그 요구사항을 풀면서 만든 컴포넌트와 useCreateTableV2 훅의 설계·구현을 정리한 회고다. 일부 헬퍼는 재귀가..
LLM 이 뭘하고 있는지 사용자는 궁금해한다챗봇 기반 문서편집 AI 서비스를 개발하다 보면 LLM이 문서 및 자료를 분석하고, 사고 과정(thinking)을 거치고, 편집 명령을 생성하고, 최종 메시지를 작성하기까지 평균 10~30초가 걸린다. 그때 사용자가 원하는 건 단순한 로딩바가 아닌 "지금 AI가 뭘 하고 있는지" 아는 것이였다. 문서를 검색하는 중인지, 생각하는 중인지, 편집을 시작했는지. 그 과정이 실시간으로 보여야 했다.폴링 vs WebSocket vs SSE 비교폴링(Polling): 가장 단순하지만, LLM 응답의 특성과 맞지 않았다. 토큰 단위로 생성되는 텍스트를 0.5초마다 긁어오면 불필요한 요청이 대량 발생하고, 실시간 느낌도 살릴 수 없다.WebSocket: 양방향 통신이 가능하다..
// ProductDetail.jsxconst handleAddToCart = async (product) => { await cartAPI.add(product); eventBus.emit('cart:item-added', { product, timestamp: Date.now() });};// CartIcon.jsxuseEffect(() => { const handleItemAdded = ({ product }) => { showToast(`${product.name} 담김!`); // 또는 refetch cart count }; eventBus.on('cart:item-added', handleItemAdded); return () => eventBus.off('cart:i..
프론트엔드 프로젝트가 일정 규모를 넘기 시작하면, 기능보다 먼저 문제가 되는 것은 상태(state)다. UI 버그, 불필요한 리렌더링, 어디서 바뀌는지 알 수 없는 값들. 대부분 “상태를 어디서, 어떻게 관리할지”에 대한 기준 부재에서 시작된다 이 글에서는 실제로 자주 마주치는 문제 상황을 기준으로어떤 상태를 로컬로 두고, 언제 전역으로 끌어올리며, Context와 Recoil은 어디서 갈라지는지, URLSearchParams 은 언제 사용하면 좋은지를 단계적으로 정리한다.문제 상황 1: “분명 값은 바뀌었는데 UI가 안 바뀐다”증상API 응답은 정상콘솔 로그에는 최신 값그런데 화면은 이전 상태 그대로원인 분석React는 상태 변화 → 리렌더링이라는 단순한 규칙 위에서 동작한다. 문제는 다음 중 하나다...
emotion.js는 styled-components처럼 브라우저에서 열었을 때(처음) className을 임의로 생성(SSR)해주는데 이후 CSR로 화면을 렌더링하게 되면 이때 서버에서 받은 클래스명과 이후 클라이언트에서 작동하는 클래스 명이 달라지면서 스타일을 불러올수 없는 문제가 발생한다고 한다. 난 next도 emotion 도 둘다 초보였기 때무네.. 눈물의 구글링을 반복하다가 바벨 설정을 이렇게 해줬다. 1. 바벨 플러그인 설치 yarn add babel-plugin-module-resolver @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread 2. .babelrc 작성 { "presets": ["n..