브라우저는 이름에 대응하는 주소를 얻기 위해 DNS 리졸버에 묻습니다. 리졸버에 답이 없으면 권한 있는 이름 서버를 찾아 질의하고 결과를 일정 기간 캐시합니다.
데모는 이름에서 리졸버, 권한 서버, 주소 카드로 응답이 돌아오는 순서를 재생합니다. 캐시가 살아 있으면 권한 서버까지 매번 가지 않습니다.
언제 쓰나
도메인 연결 오류, DNS 전파, 첫 접속 지연을 조사할 때 조회 경로와 TTL을 확인합니다.
DNS 이름 해석
DNS resolution
도메인 이름을 접속 가능한 IP 주소로 바꾸는 조회 과정입니다.
···
<div class="n-demo"><div class="n-head"><strong>DNS LOOKUP</strong><span>LIVE TRACE</span></div><div class="n-stage"><div class="n-box" id="d0">app.test</div><span>→</span><div class="n-box" id="d1">resolver</div><span>→</span><div class="n-box" id="d2">authority</div><span>→</span><div class="n-box mono" id="d3">203.0.113.7</div></div><div class="n-foot">tap to step · auto replay</div></div>.n-demo{width:min(94vw,760px);height:min(88vh,324px);padding:clamp(9px,2.2vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(5px,1.3vmin,10px);font:600 clamp(12px,2.4vmin,16px)/1.3 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;overflow:hidden}.n-head,.n-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.n-head strong{color:var(--accent)}.n-head span,.n-foot{font-size:12px}.n-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(4px,1vmin,10px)}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.n-box{padding:clamp(5px,1.5vmin,11px);border:1px solid var(--line);border-radius:8px;background:var(--bg);text-align:center}.n-on{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.n-muted{color:var(--muted)}@media(max-width:400px){.n-head span{display:none}}.n-stage{flex-wrap:wrap}.n-box{min-width:19%}let step=0;function advance(){for(let i=0;i<4;i++)document.getElementById('d'+i).classList.toggle('n-on',i===step);step=(step+1)%4}
const clickTarget=document.querySelector('.n-demo');if(clickTarget&&typeof advance==='function'){advance();const timer=setInterval(advance,1050);clickTarget.addEventListener('pointerdown',()=>{clearInterval(timer);advance()})}