Question 1

AI의 환각 현상으로 잘못 만든 UI 컴포넌트가 렌더링될 위험을 방지하는 방안은 무엇인가요?

Accepted Answer

LLM이 생성한 데이터로 UI를 구성할 때, 모델이 **존재하지 않는 컴포넌트 타입·잘못된 스키마·악의적 콘텐츠**를 내놓을 수 있습니다. **LLM 출력은 사용자 입력과 동일한 신뢰 수준으로 다뤄야 합니다.**

## 1. 구조화 출력 강제 (첫 번째 방어선)

자유 텍스트를 파싱하지 말고, 모델이 **스키마를 따르도록 강제**합니다.

- **Tool use / Function calling** — 모델이 정의된 도구 스키마에 맞춰 인자를 채움
- **JSON mode / Structured output** — 응답 형식을 JSON 스키마로 제약

## 2. 런타임 스키마 검증 (zod) — 필수

모델이 스키마를 따른다고 **믿지 말고 검증**하세요.

```ts
import { z } from 'zod';

const ComponentSchema = z.discriminatedUnion('type', [
  z.object({ type: z.literal('text'), co

Question 2

길게 대화할 때 토큰 소모를 줄이는 프런트엔드 컨텍스트 관리 전략은 무엇인가요?

Accepted Answer

LLM API는 **매 요청마다 전체 대화 이력을 다시 보냅니다.** 대화가 길어지면 입력 토큰이 선형(사실상 누적하면 제곱)으로 증가해 비용과 지연이 함께 늘어납니다.

```
1턴: [Q1]                        → 100 토큰
2턴: [Q1, A1, Q2]                → 500 토큰
10턴: [Q1..A9, Q10]              → 8,000 토큰   ← 매번 전부 재전송
```

## 1. 슬라이딩 윈도우 — 가장 단순

최근 N턴만 유지합니다.

```ts
const recent = messages.slice(-MAX_TURNS * 2);
const payload = [systemPrompt, ...recent];
```

간단하지만 **초반 맥락이 통째로 사라집니다.** 사용자가 "아까 말한 그거"라고 하면 실패합니다.

## 2. 요약 압축 (Summarization)

오래된 대화를 요약본으로 대체합니다.

```
[시스템

Question 3

Fetch API를 사용하여 스트리밍 응답을 처리할 때 ReadableStream을 어떻게 다루나요?

Accepted Answer

`fetch`의 `response.body`는 **`ReadableStream<Uint8Array>`**입니다. 전체 응답을 기다리지 않고 도착하는 청크를 순차 처리할 수 있습니다.

## 기본 형태

```ts
const res = await fetch('/api/chat', { method: 'POST', body, signal });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
if (!res.body) throw new Error('스트림 미지원');

const reader = res.body.getReader();
const decoder = new TextDecoder();

try {
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const chunk = decoder.decode(value, { strea

Question 4

스트리밍 도중 네트워크 연결이 끊겼을 때 자연스럽게 재연결하는 전략은 무엇일까요?

Accepted Answer

## 1. 끊김을 먼저 감지해야 합니다

스트리밍 중단은 여러 형태로 나타납니다.

| 상황 | 감지 방법 |
| --- | --- |
| 연결 끊김 | `reader.read()`가 `TypeError`로 reject |
| 서버가 조용히 종료 | `done: true`인데 `[DONE]` 신호 없음 → **정상 종료와 구분 필요** |
| 응답이 멈춤(stall) | 마지막 청크 이후 타임아웃 |
| 오프라인 전환 | `navigator.onLine`, `offline` 이벤트 |
| 탭 백그라운드 | `visibilitychange` |

**가장 놓치기 쉬운 것은 "조용한 종료"입니다.** 서버가 `[DONE]`을 보내지 않고 스트림이 끝나면 정상 완료처럼 보입니다. **종료 신호를 프로토콜에 반드시 넣으세요.**

```ts
let receivedDone = false;
// ... 루프 안에서 data === '[DONE]' 이면 receivedDone = true
if

AI 프론트엔드

01AI의 환각 현상으로 잘못 만든 UI 컴포넌트가 렌더링될 위험을 방지하는 방안은 무엇인가요?어려움안전성

02길게 대화할 때 토큰 소모를 줄이는 프런트엔드 컨텍스트 관리 전략은 무엇인가요?어려움컨텍스트 관리

03Fetch API를 사용하여 스트리밍 응답을 처리할 때 ReadableStream을 어떻게 다루나요?어려움스트리밍

04스트리밍 도중 네트워크 연결이 끊겼을 때 자연스럽게 재연결하는 전략은 무엇일까요?어려움스트리밍