GeekNews Frontend Weekly Deep Dive - 2026-07-20

#geeknews #frontend #weekly #deepdive

1. 당신이 안 보는 사이 프론트엔드에 무슨 일이 있었나

핵심 내용 요약: 2008년 이후 프론트엔드가 jQuery, 선언적 프레임워크, 번들러, 고속 툴링, 서버 렌더링, 타입·스타일 도구를 거치며 왜 지금의 복잡한 형태가 됐는지 한 개의 버튼 예시로 설명합니다. 각 도구는 이전 세대의 실제 문제를 해결했지만 새 추상화와 비용을 만들었고, 최근 흐름은 signals, 서버 중심 HTML, hydration 절감, TypeScript와 네이티브 CSS 강화로 수렴합니다. 오래 떠나 있던 개발자에게 현대 프론트엔드의 맥락과 트레이드오프를 빠르게 복원해 주는 글입니다.

GeekNews 상세 페이지: https://news.hada.io/topic?id=31587
원문 링크: https://davidpoblador.com/deep-dives/what-happened-to-the-frontend/

2. Show GN: 고전 아케이드 게임의 웹 플레이 & Live kit을 이용한 네트워크 플레이

핵심 내용 요약: MAME ROM을 웹에서 실행하고 1P·2P 네트워크 플레이까지 지원하려는 프로젝트로, 프론트엔드는 React, Vite, Tailwind CSS를 사용합니다. 초기에는 각 브라우저에 에뮬레이터를 띄우고 키 입력만 동기화했지만 로딩 시간과 게임 상태 차이 때문에 실패했고, 이후 화면을 LiveKit으로 전송하고 입력은 웹소켓으로 주고받는 구조로 바꿔 동기화 문제를 해결했습니다. 트래픽 비용은 커졌지만 브라우저 기반 고전 게임 협업 플레이의 실용적인 구현 절충을 보여줍니다.

GeekNews 상세 페이지: https://news.hada.io/topic?id=31575
원문 링크: https://playarcade.to

3. 역진행(Regressive) JPEG

핵심 내용 요약: 점진적 JPEG의 스캔 구조를 응용해 다운로드가 진행될수록 이미지 품질이 좋아지는 대신 서로 다른 이미지가 차례로 덮어써지는 단일 JPEG를 만드는 실험입니다. 각 스캔이 채널과 DCT 주파수 범위를 지정한다는 점을 이용하며, 브라우저 디코더마다 처리 가능한 스캔 수와 렌더링 방식이 달라 Chrome과 Firefox에서 다른 한계가 나타납니다. 실용적인 동영상 포맷이라기보다 부분 렌더링과 이미지 디코딩 동작을 활용한 웹 표현 실험으로 볼 만합니다.