\n\n\n\n\n\n\n```\n\n| 속성 | 다운로드 | 실행 시점 | 실행 순서 |\n|------|---------|-----------|----------|\n| 없음 | 동기(파싱 차단) | 즉시 | 순서 보장 |\n| async | 비동기 | 다운로드 완료 즉시 | 순서 미보장 |\n| defer | 비동기 | DOMContentLoaded 전 | 순서 보장 |\n\n- "}},{"@type":"Question","name":"URL을 입력하면 브라우저에서 어떤 일이 일어나나요?","acceptedAnswer":{"@type":"Answer","text":"URL 입력부터 화면 표시까지의 전체 과정입니다.\n\n1. **DNS 조회**: 도메인명 → IP 주소 변환\n - 브라우저 캐시 → OS 캐시 → 라우터 → ISP DNS 서버\n2. **TCP 연결**: 3-way handshake (SYN → SYN-ACK → ACK)\n3. **TLS 핸드셰이크** (HTTPS인 경우): 암호화 연결 수립\n4. **HTTP 요청**: GET / HTTP/1.1 전송\n5. **서버 응답**: HTML 문서 반환\n6. **HTML 파싱**: DOM 트리 구축\n7. **CSS 파싱**: CSSOM 트리 구축\n8. **JavaScript 실행**: DOM 조작, 이벤트 바인딩\n9. **렌더 트리 생성**: DOM + CSSOM 결합\n10. **Layout → Paint → Composite**: 화면에 최종 표시\n\n- 이 과정에서 다양한 최적화가 적용됩니다: DNS 프리페치, 프리커넥트, HTTP/2 멀티플렉싱 등\n- Service Worker가 있다면"}},{"@type":"Question","name":"Intersection Observer API란 무엇이고 어떻게 사용하나요?","acceptedAnswer":{"@type":"Answer","text":"**Intersection Observer API**는 대상 요소가 뷰포트(또는 특정 조상 요소)와 교차하는지를 비동기적으로 감시합니다.\n\n**기본 사용법:**\n```js\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n console.log('요소가 화면에 보임:', entry.target);\n }\n });\n}, {\n root: null, // null = 뷰포트 기준\n rootMargin: '0px', // 감지 영역 확장/축소\n threshold: 0.5 // 50% 이상 보일 때 콜백 (0~1, 배열 가능)\n});\n\nobserver.observe(document.querySelector('.target'));\n```\n\n**주요 활용 사례:**\n\n1. **이미지 La"}},{"@type":"Question","name":"requestIdleCallback과 우선순위 스케줄링을 설명해주세요.","acceptedAnswer":{"@type":"Answer","text":"requestIdleCallback(rIC)은 브라우저가 **유휴 상태일 때** 콜백을 실행합니다.\n\n```javascript\nrequestIdleCallback((deadline) => {\n // deadline.timeRemaining(): 남은 유휴 시간 (ms)\n while (deadline.timeRemaining() > 0 && tasks.length > 0) {\n performTask(tasks.shift());\n }\n if (tasks.length > 0) {\n requestIdleCallback(processRemainingTasks); // 다음 유휴 시간에 계속\n }\n}, { timeout: 2000 }); // 최대 2초 후에는 강제 실행\n```\n\n**스케줄링 우선순위:**\n1. 사용자 입력 이벤트 (최우선)\n2. requestAnimationFrame (렌더링 전)\n3. 렌더링/페인팅\n4. **requestIdleCallback** (유휴 "}},{"@type":"Question","name":"Performance API를 이용한 웹 성능 측정 방법을 설명해주세요.","acceptedAnswer":{"@type":"Answer","text":"Performance API는 정밀한 성능 데이터를 수집하는 브라우저 내장 API입니다.\n\n**사용자 정의 마킹:**\n```javascript\nperformance.mark('api-start');\nawait fetchData();\nperformance.mark('api-end');\nperformance.measure('API 호출', 'api-start', 'api-end');\n\nconst measure = performance.getEntriesByName('API 호출')[0];\nconsole.log(`API 소요 시간: ${measure.duration}ms`);\n```\n\n**네비게이션 타이밍:**\n```javascript\nconst nav = performance.getEntriesByType('navigation')[0];\nconsole.log('DNS 조회:', nav.domainLookupEnd - nav.domainLookupStart);\nconsole.log('TC"}},{"@type":"Question","name":"Service Worker와 PWA(Progressive Web App)를 설명해주세요.","acceptedAnswer":{"@type":"Answer","text":"**Service Worker:**\n브라우저와 네트워크 사이에서 동작하는 프록시 스크립트입니다. 메인 스레드와 별도로 실행됩니다.\n\n**라이프사이클:** install → activate → fetch 이벤트 처리\n```js\n// sw.js\nself.addEventListener('install', (e) => {\n e.waitUntil(\n caches.open('v1').then(cache => cache.addAll(['/index.html', '/style.css']))\n );\n});\n\nself.addEventListener('fetch', (e) => {\n e.respondWith(\n caches.match(e.request).then(cached => cached || fetch(e.request))\n );\n});\n```\n\n**PWA (Progressive Web App):**\n웹 기술로 네이티브 앱 수준의 경험을 제공합니다.\n\n**PWA 핵심 요소:**\n"}}]}