목킹은 네트워크나 외부 결제처럼 통제가 어려운 의존성의 응답을 테스트가 정하도록 합니다. 성공과 오류 조건을 빠르게 재현할 수 있습니다.
데모는 앱의 연결이 실제 서비스 대신 가짜 응답으로 전환되는 과정을 보여줍니다. 목이 실제 계약과 어긋나면 테스트가 통과해도 운영에서 실패하므로 통합 테스트로 경계를 보완합니다.
언제 쓰나
외부 서비스 장애, 지연, 희귀 응답을 안정적으로 재현할 때 사용합니다.
목킹
Mocking
외부 의존성을 통제 가능한 대역으로 바꿔 특정 응답과 실패를 재현합니다.
···
<div class="stage"><div class="title">MOCKING</div><div class="canvas"><div class="mockflow"><div class="box">APP</div><div class="branch"><div class="line live" id="live">live API</div><div class="line fake" id="fake">mock 200</div></div><div class="box" id="response">response</div></div><div class="hint" id="hint">using live API</div></div></div>.stage{width:min(94vw,820px);height:min(88vh,330px);box-sizing:border-box;padding:clamp(9px,2.4vmin,18px);border:1px solid var(--line);border-radius:13px;background:var(--surface);display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:600 clamp(12px,2.5vmin,16px)/1.28 "Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;color:var(--fg);overflow:hidden}.title{color:var(--accent);letter-spacing:.035em;flex:none}.canvas{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,monospace}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:clamp(5px,1.4vmin,12px);text-align:center}.active{border-color:var(--accent)!important;color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 12%,var(--surface))!important}.canvas{flex-direction:column;gap:clamp(12px,4vmin,26px)}.mockflow{display:flex;align-items:center;gap:clamp(8px,4vmin,32px)}.mockflow .box{min-width:clamp(55px,15vmin,100px)}.branch{display:flex;flex-direction:column;gap:6px}.line{padding:5px 8px;border-left:3px solid var(--line);color:var(--muted);transition:color .3s,border-color .3s}.line.on{border-color:var(--accent);color:var(--accent)}.hint{color:var(--accent)}let mock=false;function swap(){mock=!mock;document.getElementById('live').classList.toggle('on',!mock);document.getElementById('fake').classList.toggle('on',mock);document.getElementById('response').textContent=mock?'200 · fixed':'variable';document.getElementById('hint').textContent=mock?'using controlled reply':'using live API'}swap();setInterval(swap,1500)