🌐 Web

프록시와 리버스 프록시 — 방향이 뒤집히면 뭐가 달라지나

터널을 만들다가 깨달았다 Custom Tunnel…

2026.07.04·3분 읽기

AI가 '이 버튼 고쳐줘'를 알아듣게 하기 — 코드 로케이터를 MCP로 열다

react-code-locator 시리즈의 마지막 글. 지금까지는 사람이 화면에서 우클릭해 소스로 점프하는 이야기였다. 그런데 요즘은 코드를 고치는 주체가 사람만이 아니다. AI…

2026.07.02·5분 읽기

ngrok을 직접 만들었다 — 로컬 서버를 공개 URL로 여는 VSCode 확장

"지금 로컬에서 도는 거, 폰으로 좀 볼 수 있을까?" 개발하다 보면 자주 겪는다. 로컬(localhost:300…

클릭은 통과시키고, 글씨색은 배경에 맞추기 — 오버레이 위젯의 두 가지 트릭

시세 위젯 확장은 "아무 웹페이지 위에" 떠 있어야 한다. 그런데 남의 페이지 위에 뭘 덮으면 두 가지 문제가 생긴다. (1) 위젯이 아래 페이지의 클릭을 가로막고, (…

진짜 API를 그만 때리자 — MSW로 네트워크를 가로채 개발하기

YouTube Playlist Generator를 만들며 제일 크게 데인 건 API 할당량(quota) 이었다. YouTube Data API는 검색 한 번이 100 units…

열려있는데 죽어있다 — Manifest V3 Service Worker의 좀비 WebSocket 다루기

실시간 시세 크롬 확장을 만들면서 가장 오래 씨름한 건 "실시간 연결이 자꾸 조용히 죽는" 문제였다. Manifest V3(MV…

SPA 새로고침에도 터널이 안 풀리게 — URL·쿠키·리다이렉트로 세션 추적하기

터널에서 은근히 골치 아팠던 문제. 공개 URL은 https://server/abc12345/page 처럼 앞에 터널 ID(abc12345) 가 붙는다. 서버는 이 ID…

어느 웹페이지 위에든 실시간 시세를 띄우기 — 크롬 확장을 만든 이야기

…

이미지·폰트를 텍스트 채널로 나르기 — 바이너리를 WebSocket으로 터널링하기

터널을 처음 만들어 텍스트 페이지를 띄웠을 땐 잘 됐다. 그런데 이미지가 깨지고, 폰트가 안 나오고, CSS…

코드 수정 없이 원격 브라우저의 콘솔 로그 가져오기 — HTML 주입 + console 오버라이드

…

한 번 짜서 번들러 5개 지원하기 — unplugin으로 만든 유니버설 플러그인

react-code-locator를 만들 때 현실적인 고민이 하나 있었다. 요즘 React 프로젝트의 번들러는 제각각이다. Vite, Next.js(Webpack), Rollup…

위젯 10개에서 페이지가 버벅였다 — 강제 reflow를 유휴 시간으로 밀어내 95% 개선한 이야기

…

단방향 WebSocket을 양방향 요청/응답으로 — UUID와 Map으로 동시 요청 매칭하기

로컬 서버를 공개 URL로 여는 터널의 심장은 "바깥에서 온 HTTP 요청을, WebSocket…