const response = await fetch('/api/huge-data')
const data = await response.json()

// 이 코드가 실행되는 시점에는 이미 전체 응답이 도착한 상태다
const data = await response.json()

// 첫 번째 아이템을 화면에 표시하려면 전체 응답을 기다려야 한다
renderFirstItem(data[0])

const jsonString = await response.text()
console.log('문자열 크기:', jsonString.length / 1024 / 1024, 'MB')

const before = performance.memory?.usedJSHeapSize
const data = JSON.parse(jsonString)
const after = performance.memory?.usedJSHeapSize

console.log('파싱으로 인한 메모리 증가:', (after - before) / 1024 / 1024, 'MB')

console.time('parse')
const data = JSON.parse(hugeJsonString) // 메인 스레드 블로킹
console.timeEnd('parse')
// parse: 847ms

try {
  const response = await fetch('/api/huge-data')
  const data = await response.json()
} catch (error) {
  // 네트워크 오류 - 이미 받은 데이터도 모두 손실
  console.error('전체 요청 실패:', error)
}

{"id":1,"name":"Alice","email":"alice@example.com"}
{"id":2,"name":"Bob","email":"bob@example.com"}
{"id":3,"name":"Charlie","email":"charlie@example.com"}

[
  {"id":1,"name":"Alice","email":"alice@example.com"},
  {"id":2,"name":"Bob","email":"bob@example.com"},
  {"id":3,"name":"Charlie","email":"charlie@example.com"}
]

app.get('/api/users', async (req, res) => {
  res.setHeader('Content-Type', 'application/x-ndjson')

  const users = await getUsersFromDB()

  for (const user of users) {
    res.write(JSON.stringify(user) + '\n')
  }

  res.end()
})

const { Transform } = require('stream')

const toNDJSON = new Transform({
  objectMode: true,
  transform(chunk, encoding, callback) {
    callback(null, JSON.stringify(chunk) + '\n')
  }
})

app.get('/api/users', (req, res) => {
  res.setHeader('Content-Type', 'application/x-ndjson')
  res.setHeader('Transfer-Encoding', 'chunked')

  const cursor = db.collection('users').find().stream()

  cursor
    .pipe(toNDJSON)
    .pipe(res)
    .on('error', (err) => {
      console.error('스트리밍 에러:', err)
      res.end()
    })
})

const { Readable } = require('stream')

app.get('/api/users', async (req, res) => {
  res.setHeader('Content-Type', 'application/x-ndjson')

  const users = await getUsersFromDB()
  let index = 0

  const readable = new Readable({
    read() {
      if (index < users.length) {
        const chunk = JSON.stringify(users[index]) + '\n'
        this.push(chunk)
        index++
      } else {
        this.push(null)
      }
    }
  })

  readable.pipe(res)
})

async function fetchNDJSON(url, onData) {
  const response = await fetch(url)

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`)
  }

  const reader = response.body.getReader()
  const decoder = new TextDecoder()

  let buffer = ''

  while (true) {
    const { done, value } = await reader.read()

    if (done) break

    // stream: true 옵션이 중요하다
    // 멀티바이트 문자가 청크 경계에서 잘릴 수 있기 때문
    buffer += decoder.decode(value, { stream: true })

    const lines = buffer.split('\n')
    // 마지막 줄은 아직 완성되지 않았을 수 있으므로 버퍼에 유지
    buffer = lines.pop()

    for (const line of lines) {
      if (line.trim()) {
        try {
          const data = JSON.parse(line)
          onData(data)
        } catch (e) {
          console.error('파싱 에러:', line, e)
        }
      }
    }
  }

  // 마지막 줄 처리
  if (buffer.trim()) {
    try {
      const data = JSON.parse(buffer)
      onData(data)
    } catch (e) {
      console.error('파싱 에러:', buffer, e)
    }
  }
}

import ndjsonStream from 'can-ndjson-stream'

async function fetchWithNDJSONStream(url, onData) {
  const response = await fetch(url)
  const reader = ndjsonStream(response.body).getReader()

  while (true) {
    const { done, value } = await reader.read()

    if (done) break

    onData(value)
  }
}

const { parser } = require('stream-json')
const { streamArray } = require('stream-json/streamers/StreamArray')
const fs = require('fs')

fs.createReadStream('huge-data.json')
  .pipe(parser())
  .pipe(streamArray())
  .on('data', ({ key, value }) => {
    // key는 배열 인덱스, value는 각 요소
    console.log(`[${key}]`, value)
  })
  .on('end', () => {
    console.log('파싱 완료')
  })
  .on('error', (err) => {
    console.error('파싱 에러:', err)
  })

const { streamObject } = require('stream-json/streamers/StreamObject')

fs.createReadStream('config.json')
  .pipe(parser())
  .pipe(streamObject())
  .on('data', ({ key, value }) => {
    console.log(`${key}:`, value)
  })

const { pick } = require('stream-json/filters/Pick')
const { streamArray } = require('stream-json/streamers/StreamArray')

// { "metadata": {...}, "items": [...] } 구조에서 items만 추출
fs.createReadStream('data.json')
  .pipe(parser())
  .pipe(pick({ filter: 'items' }))
  .pipe(streamArray())
  .on('data', ({ key, value }) => {
    processItem(value)
  })

const https = require('https')
const { parser } = require('stream-json')
const { streamArray } = require('stream-json/streamers/StreamArray')

https.get('https://api.example.com/data', (res) => {
  res
    .pipe(parser())
    .pipe(streamArray())
    .on('data', ({ key, value }) => {
      processItem(value)
    })
    .on('end', () => {
      console.log('완료')
    })
})

const { batch } = require('stream-json/utils/Batch')

fs.createReadStream('huge-array.json')
  .pipe(parser())
  .pipe(streamArray())
  .pipe(batch({ batchSize: 100 }))
  .on('data', (items) => {
    // 100개씩 묶어서 처리
    bulkInsert(items.map((item) => item.value))
  })

import { JSONParser } from '@streamparser/json'

const parser = new JSONParser()

parser.onValue = ({ value, key, parent, stack }) => {
  // stack.length로 현재 깊이를 알 수 있다
  if (stack.length === 1 && Array.isArray(parent)) {
    // 최상위 배열의 요소
    processItem(value)
  }
}

parser.onEnd = () => {
  console.log('파싱 완료')
}

parser.onError = (err) => {
  console.error('파싱 에러:', err)
}

// 데이터를 조각씩 입력
parser.write('{"items": [')
parser.write('{"id": 1},')
parser.write('{"id": 2}')
parser.write(']}')

import { JSONParser } from '@streamparser/json'

async function fetchAndParse(url, onItem) {
  const parser = new JSONParser({ paths: ['$.items.*'] })

  parser.onValue = ({ value }) => {
    onItem(value)
  }

  const response = await fetch(url)
  const reader = response.body.getReader()

  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    parser.write(value)
  }

  parser.end()
}

import { JSONParser } from '@streamparser/json-whatwg'

async function fetchAndStream(url, onItem) {
  const response = await fetch(url)

  const parser = new JSONParser({ paths: ['$.*'] })

  const reader = response.body
    .pipeThrough(parser)
    .getReader()

  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    onItem(value.value)
  }
}

// Oboe.js 기본 사용법 (참고용)
oboe('/api/data')
  .node('users[*]', (user) => {
    appendUserToList(user)
    return oboe.drop // 메모리에서 제거
  })
  .done(() => console.log('완료'))
  .fail((error) => console.error(error))

// json-worker.js
self.onmessage = async (e) => {
  const { url } = e.data

  try {
    const response = await fetch(url)
    const text = await response.text()

    // 파싱을 Worker에서 수행
    const data = JSON.parse(text)

    self.postMessage({ success: true, data })
  } catch (error) {
    self.postMessage({ success: false, error: error.message })
  }
}

// main.js
const worker = new Worker('json-worker.js')

worker.onmessage = (e) => {
  if (e.data.success) {
    renderData(e.data.data)
  } else {
    showError(e.data.error)
  }
}

worker.postMessage({ url: '/api/huge-data' })

// json-worker.js
self.onmessage = async (e) => {
  const { url, chunkSize = 100 } = e.data

  const response = await fetch(url)
  const data = await response.json()

  // 배열이라면 청크 단위로 전송
  if (Array.isArray(data)) {
    for (let i = 0; i < data.length; i += chunkSize) {
      const chunk = data.slice(i, i + chunkSize)
      self.postMessage({
        type: 'chunk',
        data: chunk,
        progress: Math.min(i + chunkSize, data.length) / data.length
      })
    }
    self.postMessage({ type: 'done' })
  } else {
    self.postMessage({ type: 'data', data })
  }
}

// json-worker.js
self.onmessage = async (e) => {
  const response = await fetch(e.data.url)
  const buffer = await response.arrayBuffer()

  // 소유권 이전 - 복사 없이 전달
  self.postMessage(buffer, [buffer])
}

// main.js
worker.onmessage = (e) => {
  const decoder = new TextDecoder()
  const text = decoder.decode(e.data)
  const data = JSON.parse(text)
  renderData(data)
}

// 서버: 가상화된 NDJSON 스트림
app.get('/api/logs', async (req, res) => {
  res.setHeader('Content-Type', 'application/x-ndjson')

  const { startDate, endDate, level } = req.query

  // 커서 기반 스트리밍
  const cursor = db.collection('logs')
    .find({
      timestamp: { $gte: startDate, $lte: endDate },
      level: level || { $exists: true }
    })
    .sort({ timestamp: -1 })
    .stream()

  cursor.on('data', (doc) => {
    res.write(JSON.stringify({
      id: doc._id,
      timestamp: doc.timestamp,
      level: doc.level,
      message: doc.message.substring(0, 200) // 요약만 전송
    }) + '\n')
  })

  cursor.on('end', () => res.end())
  cursor.on('error', (err) => {
    console.error(err)
    res.end()
  })
})

// 상세 정보는 별도 API
app.get('/api/logs/:id', async (req, res) => {
  const log = await db.collection('logs').findOne({ _id: req.params.id })
  res.json(log)
})

// 1단계: 지역별로 분할된 NDJSON
// /api/stores/region/seoul.ndjson
// /api/stores/region/busan.ndjson

// 2단계: 현재 뷰포트 기준 우선 로딩
async function loadStoresForMap(map) {
  const bounds = map.getBounds()
  const center = map.getCenter()

  // 현재 보이는 영역의 데이터 먼저 로드
  const visibleStores = await fetch(
    `/api/stores/bounds?${new URLSearchParams({
      north: bounds.north,
      south: bounds.south,
      east: bounds.east,
      west: bounds.west
    })}`
  ).then(r => r.json())

  // 마커 즉시 표시
  addMarkersToMap(visibleStores)

  // 나머지 데이터는 백그라운드에서 스트리밍
  const nearbyRegions = getNearbyRegions(center)

  for (const region of nearbyRegions) {
    await fetchNDJSON(
      `/api/stores/region/${region}.ndjson`,
      (store) => {
        if (!isInBounds(store, bounds)) {
          // 아직 화면에 안 보이면 버퍼에만 저장
          storeBuffer.push(store)
        } else {
          addMarkerToMap(store)
        }
      }
    )
  }
}

// 지도 이동 시 버퍼에서 마커 추가
map.on('moveend', () => {
  const bounds = map.getBounds()
  const newlyVisible = storeBuffer.filter(s => isInBounds(s, bounds))
  addMarkersToMap(newlyVisible)
})

const { parse } = require('csv-parse')
const { Transform } = require('stream')

app.post('/api/csv-to-json', (req, res) => {
  res.setHeader('Content-Type', 'application/x-ndjson')

  const csvParser = parse({
    columns: true,
    skip_empty_lines: true
  })

  const toNdjson = new Transform({
    objectMode: true,
    transform(record, encoding, callback) {
      // CSV 레코드를 JSON으로 변환
      const jsonLine = JSON.stringify(record) + '\n'
      callback(null, jsonLine)
    }
  })

  req
    .pipe(csvParser)
    .pipe(toNdjson)
    .pipe(res)

  csvParser.on('error', (err) => {
    console.error('CSV 파싱 에러:', err)
    res.end()
  })
})

// 클라이언트에서 스트리밍 업로드 + 스트리밍 다운로드
async function convertCsvToJson(file, onRecord) {
  const response = await fetch('/api/csv-to-json', {
    method: 'POST',
    body: file,
    headers: {
      'Content-Type': 'text/csv'
    }
  })

  const reader = response.body.getReader()
  const decoder = new TextDecoder()
  let buffer = ''
  let count = 0

  while (true) {
    const { done, value } = await reader.read()
    if (done) break

    buffer += decoder.decode(value, { stream: true })
    const lines = buffer.split('\n')
    buffer = lines.pop()

    for (const line of lines) {
      if (line.trim()) {
        onRecord(JSON.parse(line))
        count++
      }
    }
  }

  return { totalRecords: count }
}

// 예: 100개 중 50개를 처리한 후 에러 발생
oboe('/api/data')
  .node('items[*]', (item) => {
    insertToDB(item) // 50개가 이미 삽입됨
  })
  .fail((error) => {
    // 이미 삽입된 50개는 어떻게 할 것인가?
  })

// 잘못된 예
oboe('/api/data')
  .node('items[*]', async (item) => {
    await processAsync(item) // 순서 보장 안됨
  })

// 잘못된 예
const decoder = new TextDecoder()
buffer += decoder.decode(value) // stream 옵션 누락

// 올바른 예
buffer += decoder.decode(value, { stream: true })

// 잘못된 예
while (true) {
  const { done, value } = await reader.read()
  if (done) break

  buffer += decoder.decode(value, { stream: true })
  const lines = buffer.split('\n')
  buffer = lines.pop()

  for (const line of lines) {
    onData(JSON.parse(line))
  }
}
// 루프 종료 후 buffer에 마지막 줄이 남아있음!

// 올바른 예
while (true) {
  // ... 동일
}

// 루프 종료 후 버퍼 처리
if (buffer.trim()) {
  onData(JSON.parse(buffer))
}

// Express에서 확실한 스트리밍을 위한 설정
app.get('/api/stream', (req, res) => {
  res.setHeader('Content-Type', 'application/x-ndjson')
  res.setHeader('Cache-Control', 'no-cache')
  res.setHeader('X-Accel-Buffering', 'no') // Nginx용
  res.flushHeaders() // 헤더 즉시 전송

  // ... 데이터 전송
})

async function fetchWithCleanup(url, onData, signal) {
  const response = await fetch(url, { signal })
  const reader = response.body.getReader()

  try {
    while (true) {
      const { done, value } = await reader.read()
      if (done) break
      // ... 처리
    }
  } finally {
    // 항상 reader 해제
    reader.releaseLock()
  }
}

function createDebugStream(url, onData) {
  const startTime = performance.now()
  let chunkCount = 0
  let totalBytes = 0
  let itemCount = 0

  return fetchNDJSON(url, (item) => {
    itemCount++

    if (itemCount % 1000 === 0) {
      const elapsed = performance.now() - startTime
      console.log(`[Stream Debug]
        경과 시간: ${(elapsed / 1000).toFixed(2)}s
        받은 청크: ${chunkCount}
        처리된 아이템: ${itemCount}
        처리 속도: ${(itemCount / elapsed * 1000).toFixed(0)} items/sec
      `)
    }

    onData(item)
  }, {
    onProgress: (progress) => {
      chunkCount++
      totalBytes = progress.receivedBytes
    }
  })
}

데이터 크기가 10MB 미만인가?
├─ Yes → JSON.parse()로 충분하다
└─ No → 서버 API를 수정할 수 있는가?
         ├─ Yes → NDJSON 사용 (가장 추천)
         └─ No → 실행 환경은?
                  ├─ Node.js → stream-json
                  ├─ 브라우저 → @streamparser/json
                  └─ UI 블로킹만 해결하면 됨 → Web Worker