재연결 로직에 남아 있던 비동기 타이밍 이슈

스트리밍 연결에 문제가 생기면 기존 연결을 정리하고, 일정 시간이 지난 뒤 다시 연결하도록 처리하고 있었다. 그런데 새 연결이 정상적으로 만들어진 뒤에도 몇 초 후 다시 연결이 끊기는 경우가 발생했는데, 처음에는 다른 원인으로 생각했지만, 알고 보니 이전 연결에서 시작된 실패 처리 로직이 아직 끝나지 않은 상태였다.기존에는 generation으로 이전 작업을 걸러내고 있었다initialize()가 실행될 때마다 generation 값을 증가시키고, 각 초기화 작업에서는 자신이 시작된 시점의 값을 가지고 있었다.const myGeneration = ++initGeneration;실패 처리 로직에 진입할 때도 현재 작업이 최신인지 확인했다.if (myGeneration !== initGeneration) {..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 9. 13.

getBoundingClientRect 없이 위치 잡기

예전에는 CSS에 새로운 기능이 나오면 꽤 챙겨보는 편이었다. 이전에는 CSS로 까다로운 UI를 다룰 일이 많아서 그러기도 했던 것 같다. 요즘은 그런 관심이 많이 줄었다. 지금 하는 일에서 CSS를 깊게 만질 일이 없는 것도 있고, AI를 쓰기 시작하면서 모르는 속성이나 구현 방법이 있어도 AI를 활용해 바로 해결하는 일이 많아지다 보니, 하나의 속성을 따로 찾아보고 깊게 볼 일이 줄어든 것도 큰 것 같다. 그러다 최근 정말 오랜만에 Josh 블로그에 들어가 최근에 올라온 글들을 보다가 Getting Started with Anchor Positioning을 읽었다. Tooltip이나 dropdown처럼 어떤 요소를 기준으로 다른 요소를 띄우는 UI를 CSS에서 처리할 수 있게 해주는 기능이다. An..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 8. 30.

WebRTC는 정상인데 화면은 왜 검을까 — 블랙스크린 원인 좁혀가기

이전에 WebRTC 스트리밍 이슈에 대한 글을 작성했었다. 당시에는 WebRTC 연결이 실패한 뒤 RTCPeerConnection이 제대로 정리되지 않아 연결 객체가 쌓이는 문제와, connectionState가 connected여도 실제 영상 프레임은 멈출 수 있는 문제를 겪었다. 그래서 연결 상태만 확인하던 방식에서 벗어나 getStats()의 framesDecoded까지 함께 확인하도록 감지 범위를 넓혔다. 그 글에서 블랙스크린에 대한 내용도 짧게 다뤘다. WebRTC 연결과 ICE 상태는 정상이고 framesDecoded도 계속 증가하는데 실제 화면만 검게 보이는 경우였다.디코딩까지 정상이라면 이제는 스트림 자체가 아니라 영상의 내용과 화면 표시 상태를 따로 확인해야 하지 않을까 생각했다. 그래서..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 8. 16.

GraphQL 조회 로직과 Backfill

이번에 프론트엔드 기능을 작업하면서 백엔드 코드도 함께 수정하게 됐다. 백엔드에서 새로운 GraphQL Query를 추가해본 적은 있지만, 조회 로직과 페이지네이션, 기존 데이터 처리까지 한 흐름으로 다뤄본 것은 이번이 처음이었다. 구현은 클로드가 다 했지만, 백엔드는 아직 익숙하지 않다 보니 작업이 끝난 뒤 실제로 데이터가 어떤 흐름으로 조회되고 반영되는지 다시 확인해서 정리해보았다. Query이번 기능에서는 기존 조회와 별도로 새로운 기준으로 데이터를 가져오는 GraphQL Query를 추가했다. GraphQL에서 하나의 Query가 실제 데이터를 반환하기까지는 프로젝트 구조에 따라 몇 개의 계층을 거치는데, 현재 프로젝트에서는 대략 다음과 같은 형태였다.Schema→ Resolver→ Model→..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 8. 2.

텍스트 애니메이션에서 Recalculate Style 줄이기

내가 이전에 구현했던 어트랙트 화면의 텍스트 애니메이션이 실제로는 어느 정도 비용을 쓰고 있는지 궁금해져 DevTools Performance로 확인해 봤다. AnimatedText 컴포넌트에서 글자 단위로 className을 바꾸는 과정에서 Recalculate Style과 Layout 비용이 계속 발생하고 있었다. JS 로직은 그대로 두고, CSS의 transition 대상과 will-change만 수정했다.측정DevTools Performance로 어트랙트 화면을 녹화했다. 50초 정도 녹화했을 때 눈에 띈 부분은 다음과 같다.전체 시간 중 대부분은 Idle이었다.그런데 Animations 트랙은 거의 계속 차 있었다.Frames 영역에 8274ms짜리 긴 프레임이 있었다.Call tree에서 Re..

• format_list_bulleted 🗂 WIL/트러블슈팅
• · 2026. 7. 5.

uSpec으로 Figma 컴포넌트 스펙 문서 만들어보기

Uber 기술 블로그에서 uSpec이라는 도구를 소개하는 글을 읽었다. uSpec은 Figma 컴포넌트를 읽어서 디자인 스펙 문서를 만들어주는 도구다. Cursor 같은 AI agent와 Figma를 연결하고, 컴포넌트의 구조, variant, token, style, 접근성 정보를 읽어 스펙 문서로 정리한다. 디자인 스펙 문서는 컴포넌트를 구현할 때 자주 참고하지만, 항상 최신 상태라고 보기는 어렵다. 컴포넌트는 계속 바뀌고, 문서는 사람이 직접 관리하는 경우가 많기 때문이다.버튼 하나만 봐도 확인해야 할 값이 많다. size, variant, disabled 상태, padding, radius, color token, icon 위치, 접근성 label 같은 것들이다. 문서가 오래되면 다시 Figma를..

• format_list_bulleted 🗂 WIL
• · 2026. 6. 21.