05 · 라이브코딩 · 설계 토론

상태 모델링 — 여기서 절반이 갈린다 🔥 핵심

라이브코딩에서 가장 먼저 보는 건 화려한 알고리즘이 아니라 상태를 어떻게 표현하는가입니다. Bool과 옵셔널을 늘어놓으면 실제로는 일어날 수 없는 조합이 타입상 표현 가능해집니다.

// ❌ 8가지 조합 중 4가지가 말이 안 됨
struct State {
  var isLoading = false
  var items: [Item] = []
  var error: Error?
}

// ✅ 유효한 상태만 표현 가능
enum ViewState {
  case idle
  case loading
  case loaded([Item])
  case empty
  case failed(Error)
}

단골 과제 ① — 검색 화면 🔥 핵심

"입력하면 검색되는 화면을 만들어보세요"는 가장 흔한 과제입니다. 쉬워 보이지만 채점 포인트가 네 개 숨어 있습니다.

// TCA — .cancellable(id:) 하나로 "이전 요청 취소"가 해결된다
case let .searchQueryChanged(query):
  state.query = query
  guard !query.isEmpty else {
    state.results = []
    return .cancel(id: CancelID.search)
  }
  return .run { send in
    try await clock.sleep(for: .milliseconds(300))        // debounce
    await send(.searchResponse(Result { try await client.search(query) }))
  }
  .cancellable(id: CancelID.search, cancelInFlight: true) // ← 핵심

채점 포인트	빠뜨리면
debounce	글자마다 요청 → 서버 부하·요금
이전 요청 취소	늦은 응답이 최신 결과를 덮어씀
빈 쿼리 처리	전체 목록을 불필요하게 요청
상태 4종 표현	로딩·빈 결과·에러가 구분 안 됨

단골 과제 ② — 이미지 캐시 🔥 핵심

"이미지 캐시를 만들어보세요"에서 진짜로 보는 건 메모리·디스크 2단 구조가 아니라 같은 URL이 동시에 여러 번 요청될 때의 처리입니다.

actor ImageCache {
  private enum Entry {
    case loading(Task<UIImage, Error>)
    case ready(UIImage)
  }
  private var cache: [URL: Entry] = [:]

  func image(for url: URL) async throws -> UIImage {
    if let entry = cache[url] {
      switch entry {
      case .ready(let img):    return img
      case .loading(let task): return try await task.value   // 남의 작업에 편승
      }
    }
    let task = Task { try await download(url) }
    cache[url] = .loading(task)
    do {
      let img = try await task.value
      cache[url] = .ready(img)
      return img
    } catch {
      cache[url] = nil          // 실패는 캐시하지 않는다
      throw error
    }
  }
}

이미지 메모리 — 파일 크기가 아니다

캐시 용량을 계산할 때 파일 크기로 세면 크게 어긋납니다. 화면에 올라간 이미지가 쓰는 메모리는 디코딩된 비트맵 크기입니다.

let options: [CFString: Any] = [
  kCGImageSourceCreateThumbnailFromImageAlways: true,
  kCGImageSourceThumbnailMaxPixelSize: maxPixelSize,   // 표시 크기 × scale
  kCGImageSourceShouldCacheImmediately: true           // 미리 디코딩 → 스크롤 hitch 방지
]

설계 토론 뼈대 🧩 롱테일

"이 화면을 처음부터 설계한다면?"에는 말하는 순서가 곧 점수입니다. 코드부터 시작하면 방향을 잃고, 아래 순서대로 가면 빠뜨리는 게 없습니다.

순서	말할 것	빠뜨리기 쉬운 것
①	상태 모델링 (enum)	빈 결과와 초기 상태 구분
②	레이어 분리	각 층을 어떻게 테스트할지
③	모듈 경계 · Interface 의존	화면 이동을 Factory로 주입
④	비동기 정책	취소 · 중복 요청 합치기
⑤	캐싱 정책	데이터 종류마다 유효기간이 다름
⑥	관측 · 실패 처리	실패했을 때 사용자가 뭘 보나

최종 점검 — 라이브코딩 중 소리 내어 말할 것

타이밍	말할 문장
시작 직후	"먼저 상태부터 정의하겠습니다. 불가능한 조합이 안 생기게 enum으로 가겠습니다."
비동기 붙일 때	"이 요청은 화면을 나가면 취소돼야 해서 취소 가능하게 만들겠습니다."
막혔을 때	"지금 A와 B 중 고민 중인데, A로 가겠습니다. 이유는 …입니다."
시간이 부족할 때	"여기는 실제로는 ○○ 처리가 더 필요한데, 지금은 뼈대부터 세우겠습니다."

출처 · 참고자료