Loading the catalog…
Loading the catalog…
카드 확장 애니메이션 시리즈 — 애니메이션이 끝나고 실제 콘텐츠가 보일 때, 스크롤 위치가 이상하게 어긋나는 버그를 쫓다가 알게 된 것. 증상 전환 애니메이션이 끝나고 진짜 콘텐츠가 화면에 드러나는 순간, 스크롤이 0이 아닌 채로(전환 중에 스크롤해뒀던 값 그대로) 시작되는 문제가 있었다. 의도는 "콘텐츠가 드러나기 직전에 스크롤을 맨 위로 되돌려두는 것"이었는데, 실제로는 그렇게 안 됐다. 세 번의 시행착오 1차 시도 — 콘텐츠를 드러내는 함수 안에서 window.scrollTo(0, 0) 을 직접 호출. 실패. 스크롤이 순간이동하는 게 아니라 눈에 띄게 스르륵 올라가는 현상이 그대로 남았다. 2차 시도 — setState 가 이벤트 핸들러 안에서 항상 동기적으로 반영되는 건 아니라는 점을 고려해서, 상태값이 바뀐 걸 감지하는 useLayoutEffect 로 호출 위치를 옮김. 여전히 실패. 특정 항목부터는 문제가 재현되고 어떤 항목은 괜찮은 패턴까지 확인됐다. 3차 시도(진짜 원인) — 여기서 behavior: 'auto' 를 "즉시 이동"이라고 잘못 알고 있었다는 걸 깨달았다. 진짜 원인 Element.scrollIntoView() 와 window.scrollTo() 의 behavior 옵션은 세 가지 값을 받는다: smooth : 부드럽게 애니메이션 instant : 정말로 즉시, 한 번에 이동 auto : CSS의 scroll-behavior 속성 계산값을 그대로 따름 MDN 공식 문서가 이걸 명확히 규정하고 있다: "auto: scroll behavior is determined by the computed value of scroll-behavior. The default is auto." 즉 'auto' 는 "즉시 이동"이 아니라 "CSS에 위임한다" 는 뜻이다. 이 프로젝트의 전역 스타일시트에 scroll-behavior: smooth 가 걸려 있었기 때문에, behavior: 'auto' 를 넣어도 실제로는 여전히 부드럽게(smooth) 애니메이션되며 스크롤이 이동했던 것이다. 진짜로 CSS를 무시하고 즉시 이동시키려면 'instant' 를 명시해야 한다. // 이렇게 하면 여전히 CSS의 smooth 설정을 따라간다 element.scrollIntoView({ behavior: 'auto', block: 'center' }); // 진짜 즉시 이동하려면 element.scrollIntoView({ behavior: 'instant', block: 'center' }); 왜 어떤 항목에서는 문제가 안 보였나 한 항목에서는 증상이 재현되지 않았는데, 알고 보니 우연이었다 — 그 항목은 스크롤해야 할 거리 자체가 0에 가까웠다. 이동할 거리가 거의 없으니 behavior 값이 smooth 든 instant 든 눈에 보이는 차이가 안 났을 뿐이었다. "특정 케이스에서 문제가 없다"는 게 "그 케이스에서 코드가 맞게 동작했다"를 보장해주지 않는다는 걸 보여준 사례다. 한 가지 더 — "체감이 안 된다"가 "코드가 틀렸다"의 반대말은 아니다 이 버그를 추적하는 과정에서, 이전 단계에서 이미 behavior: 'auto' 를 넣어본 적이 있었다. 그때는 "체감상 큰 차이는 없다"는 반응이 나와서 그대로 넘어갔는데, 사실 그 수정 자체가 'auto' 가 기존 기본값과 똑같아서 아무 효과가 없었던 것 이었다. 나중에 전체 코드를 다시 점검하면서 "혹시 불필요한 코드가 있으면 지우자"는 취지로 살펴봤는데, 결론은 지울 게 없었다 — 방향(어떤 값을 넣어야 하는지에 대한 개념)은 전부 맞았고, 'instant' 라는 정확한 값 하나가 빠져 있었을 뿐이었다. 즉 "체감상 차이가 없다"는 관찰은 "코드가 의도대로 동작하고 있다"는 증거가 아니라, 단순히 "이번 케이스에선 값의 차이가 드러날 조건이 아니었다"일 수도 있다는 걸 유의할 필요가 있다. 출처 MDN, Element: scrollIntoView() method — behavior 옵션 정의: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView MDN, scroll-behavior (CSS 속성): https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
What RADAR observed and classified to build this opportunity. It is what the source published, not a verification that the offer is still active.
`scrollIntoView`의 `behavior: 'auto'`는 "즉시 이동"이 아니다. 카드 확장 애니메이션 시리즈 — 애니메이션이 끝나고 실제 콘텐츠가 보일 때, 스크롤 위치가 이상하게 어긋나는 버그를 쫓다가 알게 된 것. 증상 전환 애니메이션이 끝나고 진짜 콘텐츠가 화면에 드러나는 순간, 스크롤이 0이 아닌 채로(전환 중에 스크롤해뒀던 값 그대로) 시작되는 문제가 있었다. 의도는 "콘텐츠가 드러나기 직전에 스크롤을 맨 위로 되돌려두는 것"이었는데, 실제로는 그렇게 안 됐다. 세 번의 시행착오 1차 시도 — 콘텐츠를 드러내는 함수 안에서 window.scrollTo(0, 0) 을 직접 호출. 실패. 스크롤이 순간이동하는 게 아니라 눈에 띄게 스르륵 올라가는 현상이 그대로 남았다. 2차 시도 —…
Open source