왜 내 Next.js 대시보드가 항상 오래된 데이터를 보여줬을까 — 한 줄 해결책
Source: Dev.to
Overview
타임스탬프는 업데이트되고 있었고, AI 추천도 계속 들어오고 있었다. 모든 것이 살아 있는 듯 보였다.
하지만 센서 값은 20분째 움직이지 않았다.
그런 버그는 머릿속에 박히게 만든다. 앱의 절반은 완벽히 동작했기 때문에 문제는 명확하지 않았고, 어딘가 중간에 숨겨져 있었다.
SensorWatch AI는 Next.js 14, TypeScript, PostgreSQL, 그리고 OpenRouter를 통한 LLM 통합으로 만든 산업용 센서 모니터링 대시보드이다. 세 개의 산업용 센서를 시뮬레이션하고, 실시간 이상 탐지를 수행하며, 자연어로 유지보수 추천을 생성한다. 설계상으로는 괜찮았지만—문제가 발생했다.
Everything I tried that didn’t work
The AI hypothesis
OpenRouter의 무료 티어는 때때로 끔찍하게 느릴 수 있다. 나는 센서 시뮬레이션과 이상 분석 사이에 레이스 컨디션이 있을 것이라 의심해 AI 호출과 센서 시뮬레이션을 두 개의 독립적인 Promise.all 흐름으로 나눴다. 버그는 여전히 남아 있었다.
Front‑end guesses
useCallback이 의존성이 누락돼 재실행되지 않는 것이 아닌가 고민했다. 더 많은 console.log를 추가해도 아무것도 드러나지 않았다.
The breakthrough
console.log를 여기저기 흩뿌린 뒤, 데이터베이스가 매 요청마다 정확히 같은 데이터를 반환한다는 것을 발견했다—같은 값, 같은 타임스탬프. 센서는 여전히 새로운 읽값을 생성하고 있었지만, 데이터가 올바르게 가져와지지 않았다.
The cause
문제는 Prisma 쿼리의 한 줄에 있었다:
const readings = await prisma.sensorReading.findMany({
where: { sensorId: sensor.id },
orderBy: { createdAt: "asc" }, // ← wrong direction
take: 50,
});orderBy: { createdAt: "asc" }는 가장 오래된 50개의 레코드를 요청한다. 테이블에 수천 개의 행이 있다면, 가장 오래된 항목들은 절대 변하지 않으므로 매 요청마다 같은 오래된 데이터 조각이 반환된다. UI는 new Date()로 클라이언트 측에서 타임스탬프를 생성하고, AI 엔드포인트는 올바른 순서의 쿼리를 사용했기 때문에 살아 있는 것처럼 보였다.
The fix
const readings = await prisma.sensorReading.findMany({
where: { sensorId: sensor.id },
orderBy: { createdAt: "desc" }, // newest first
take: 50,
select: {
value: true,
isAnomaly: true,
createdAt: true,
},
});
// Reverse so the chart displays time left‑to‑right
const sortedReadings = readings.reverse();desc는 가장 최근 50개의 레코드를 가져오며, 시뮬레이션 사이클마다 변한다..reverse()는 차트가 시간 순서대로(왼쪽에 오래된, 오른쪽에 최신) 표시되도록 다시 정렬한다.
상태 카드 업데이트도 간단해진다:
currentValue: sortedReadings[sortedReadings.length - 1]?.value ?? null,
currentIsAnomaly: sortedReadings[sortedReadings.length - 1]?.isAnomaly ?? false,The lesson
무언가가 올바르게 표시되지 않을 때는 UI를 건드리기 전에 데이터를 검증하라.
나는 프론트엔드, AI 파이프라인, fetch 로직에서 증상을 쫓는 데 몇 시간을 보냈지만, 근본 원인은 하나의 잘못된 asc였다. API 응답 레벨에서 console.log 하나만 찍었더라면 매 요청마다 동일한 페이로드가 반환되는 것을 바로 확인하고 많은 시간을 절약했을 것이다.
먼저 데이터를 확인하고, 그 다음 코드를 확인하라.
SensorWatch AI는 오픈 소스 — github.com/RonaldGGA/sensorwatch-ai
Live demo: sensorwatch-ai.vercel.app