순수 JavaScript로 만드는 대표기업 서비스

input 이벤트로 사용자가 타이핑할 때마다
현재 입력값을 콘솔에 출력하는 코드를 만들어줘.
event.target.value를 사용한 예시로.

Google처럼 debounce + fetch로 자동완성 검색창을 만들어줘.
- 250ms debounce
- /api/search?q=... 호출
- 결과 5개를 ul/li로 표시
- 이전 요청은 AbortController로 취소

Google 수준의 검색 자동완성 시스템을 설계해줘.
포함: LRU 캐싱 / 결과 하이라이트 / 키보드 ↑↓ 네비게이션 /
접근성(aria-live, role='combobox') / 모바일 가상 키보드 대응 /
오프라인 폴백.

<img loading='lazy'>를 어떻게 쓰는지
예시 코드와 동작 원리를 알려줘.

IntersectionObserver로 무한 스크롤을 만들어줘.
페이지 끝 200px 전에 다음 페이지를 fetch.
중복 호출 방지 + 로딩 인디케이터 포함.

10만 개 아이템도 부드러운 가상 스크롤(virtual list)을 설계해줘.
포함: visible window 계산 / item recycling /
resize 대응 / 키보드 PageDown 점프 / 접근성.

contentEditable 속성이 뭔지 알려줘.
div에 적용하는 예시 + textarea와의 차이를 비교해줘.

Selection API로 현재 커서 위치를 가져오고
선택 영역을 굵게 처리하는 함수를 만들어줘.
range.surroundContents 활용.

Notion 같은 블록 에디터의 핵심 자료 구조를 설계해줘.
포함: 블록 트리 / undo/redo (Command 패턴) /
협업 충돌 해결(CRDT 개념) / 마크다운 단축키 /
드래그로 블록 순서 변경.

WebSocket이 HTTP와 어떻게 다른지
비유 + 다이어그램 + 코드 예시로 설명해줘.
new WebSocket(url) 기본 사용법도.

Slack 같은 실시간 채팅 클라이언트를 만들어줘.
메시지 송수신 + 끊겼을 때 자동 재연결 +
오프라인 큐(전송 대기) + 타이핑 인디케이터.

1만 명 동시 접속 채팅의 클라이언트 아키텍처를 설계해줘.
포함: 채널별 구독 관리 / 메시지 순서 보장 /
back-pressure / 메모리 관리(메시지 가지치기) /
네트워크 품질에 따른 quality-of-service.

HTML <audio> 태그의 기본 사용법과
play/pause/volume을 JS로 제어하는 예시를 보여줘.

Web Audio API로 오디오 비주얼라이저를 만들어줘.
AnalyserNode로 주파수 데이터를 받아
Canvas에 막대 그래프로 그려줘. requestAnimationFrame 사용.

Spotify 수준의 오디오 플레이어를 설계해줘.
포함: 게이플리스 재생 / 크로스페이드 /
3밴드 EQ / MediaSession으로 잠금화면 제어 /
Service Worker로 오프라인 캐시.

// 대표기업 JS 기법 5가지 — 한 파일 데모

// 1. Google: debounce 자동완성
function debounce(fn, ms = 250) {
  let t;
  return (...a) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); };
}
const search = debounce(async (q) => {
  const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
  console.log(await res.json());
}, 250);

// 2. Instagram: IntersectionObserver 무한 스크롤
const sentinel = document.querySelector('#sentinel');
const io = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) loadNextPage();
}, { rootMargin: '200px' });
if (sentinel) io.observe(sentinel);

// 3. Notion: contentEditable + Selection API
function applyBold() {
  const sel = window.getSelection();
  if (!sel?.rangeCount) return;
  const range = sel.getRangeAt(0);
  const strong = document.createElement('strong');
  range.surroundContents(strong);
}

// 4. Slack: WebSocket + 자동 재연결
function connect(url, onMessage) {
  let ws, retry = 0;
  function open() {
    ws = new WebSocket(url);
    ws.onmessage = (e) => onMessage(JSON.parse(e.data));
    ws.onclose = () => setTimeout(open, Math.min(1000 * 2 ** retry++, 30000));
  }
  open();
  return { send: (m) => ws?.readyState === 1 && ws.send(JSON.stringify(m)) };
}

// 5. Spotify: Web Audio + Canvas 시각화
async function visualize(audioEl, canvas) {
  const ctx = new AudioContext();
  const src = ctx.createMediaElementSource(audioEl);
  const analyser = ctx.createAnalyser();
  src.connect(analyser); analyser.connect(ctx.destination);
  const data = new Uint8Array(analyser.frequencyBinCount);
  const c = canvas.getContext('2d');
  (function frame() {
    analyser.getByteFrequencyData(data);
    c.clearRect(0, 0, canvas.width, canvas.height);
    data.forEach((v, i) => c.fillRect(i * 2, canvas.height - v, 2, v));
    requestAnimationFrame(frame);
  })();
}

// 💡 이 5가지 패턴만 알면 대부분의 인터랙티브 JS UI를 만들 수 있습니다.