[ Virtual Scroll ] 데이터가 있는척, 사용자를 속여서 최적화하기

🎤 "무한 스크롤" 구현해 보셨나요?네, 아마 프론트엔드 개발자라면 응당 구현해봤을 것이라고 생각합니다.무한스크롤이란 스크롤형태의 페이징을 의미하며, 스크롤이 끝까지 닿거나, 닿으려하는 경계에 하나의 요소를 특정하고, 해당 요소가 사용자가 볼 수 있는 view 영역에 보이게 됐을 때, 이벤트를 트리깅하여 데이터를 추가로 불러오는 페이징 기법입니다. 말 그대로 데이터가 무한하다면 정말로 무한하게 데이터를 볼 수가 있는 구조입니다.하지만, 한가지 의문이 있습니다. "계속 무한하게 추가가 된다면 어떻게 될까?" 음... 아마 무한히 볼 수 있지 않을까? ...라고만 생각하셨다면, 지금이 바로 프론트엔드 세계로 한걸음 더 나아갈 수 있는 기회! 🏋🏻 "무한 스크롤"과 함께 "무한 과부화"이전 질문에 이..

✏️ 5종 마이그레이션을 하게 된 계기마이그레이션을 하고자 마음먹게 된 계기는 바로 2025년 12월에 발견된 "React2Shell" RCE(원격 코드 실행) 취약점이 발견되었고, CVSS 점수 9.8 / CRITICAL 레벨로 방치한다면 실제 서비스에서 재산 피해까지 번질 수 있는 취약점을 보완하기 위해서 작업을 시작하게 되었습니다. 추가적인 개선 사항으로 이전에 DX를 위해 도입했던 🔗openapi-generator-cli를 활용한 api 자동 생성 시스템이 호환 확장성을 위해 필요 이상의 코드까지 포함하여 방대하게 생성하고 있는 문제가 있어, 빌드시간이 지연되는 사이드 이팩트를 가지고 있었습니다. 이를 개선하고자 Orval 라이브러리를 찾아보게 되었고, 마이그레이션 작업에 추가했습니다. 그리고 ..

🌄내일이면 2026년이 시작됩니다.지난 2025년을 돌아보는 시간을 가지기 위해 2025년 회고 포스팅을 하게되었습니다.회고의 작성 방식은 2026년의 목표 설정과 과분히 받은 감사함을 되새기기 위한"KPT" + "Loved"방식으로 작성했습니다. 📃회고 작성 방식회고 작성 방식은 대표적으로 3가지가 존재합니다.5L (가장 대중적이고 부드러운 방식)팀원들과 감정과 사실을 두루 나누고 싶을 때 좋습니다.Liked (좋았던 점): 즐거웠거나 만족스러웠던 부분.Learned (배운 점): 새롭게 알게 된 기술, 프로세스, 통찰.Lacked (아쉬운 점): 부족했거나 더 잘할 수 있었던 부분.Longed for (바랐던 점): 다음에는 있었으면 하는 지원이나 환경.Loved (고마운 점): 동료에게 고마웠던..

🤔공부하게 된 계기최근 진행 중인 프로젝트들이 고도화됨에 따라 빌드 속도와 런타임 최적화에 대한 고민이 깊어지고 있었습니다.Next.js 16이 정식 출시되었습니다.단순히 버전 숫자가 올라간 것이 아니라, 프론트엔드 생태계의 판도를바꿀 Turbopack의 기본 채택과 React Compiler 지원이라는 거대한 변화가 포함되었습니다.이전 버전에서 느꼈던 "빌드 대기 시간의 지루함"과 "불필요한 리렌더링 최적화의 피로감"을 어떻게 해결했는지,그 내부 동작 원리와 변화를 분석해 보았습니다. 🚀 Turbopack: 이제는 선택이 아닌 필수그동안 'Canary' 상태였던 Rust 기반의 Turbopack이 드디어 Next.js 16의 기본 번들러로 자리 잡았습니다. 🪄 성능이 압도적인 이유?기존 Webpa..

🎉 네트워킹 중심의 컨퍼런스, 테오콘감사하게도 최근에 다녀온 구름톤에 참여할 수 있는 기회를 가지게 되어 다양한 개발자/디자이너/기획자분들과 다양한 경험과 사고하는 방식을 공유하며 정체되어있던 성장의 열쇠를 발견할 수 있었던 뜻 깊은 경험을 한 적이 있습니다. 그래서 저는 개발자가 개발만 해서는 키울 수 없는 "좋은 개발자"의 소양이 존재한다고 생각합니다.다녀오고 느낀 것을 간단히 서술하자면, 서로의 경험을 공유함으로서 생각의 확장성과 방향성이 풍부해지고, 소통의 영역을 넓힐 수 있게 되어 커뮤니케이션에 반드시 필요한 소프트 스킬 향상에 큰 도움이 된다는 것을 느꼈습니다. 주니어 개발자에서 더 나아가 이제는 미드레벨 개발자로서 성장하기 위한 한 걸음 더 내딪은 것 같아, 뿌듯하고 즐거운 경험이었습니다...

✍🏻개요이번 프로젝트에서는 Kakao Map을 활용한 🔗로컬실록지리지 서비스를 🔗스카우트 플랫폼으로 이관 구현이 결정되어 dev서버에서 개발을 진행하면서 대량의 마커를 지도에 표시할 때 흔히 마주치는 문제로, 브라우저 성능 저하를 개선한 경험을 바탕으로 포스팅했습니다. 마커의 개수는 약 2000개로 마커를 렌더링할 때 발생하는 성능 문제를 해결했습니다. 레거시 시스템( PHP )에서는 15.3fps로 버벅이던 지도를 최적화 하여 55.7fps( 약 3.6배 향상 )로 부드럽게 동작하게 되었습니다. 🔍 레거시 시스템에서는 왜 지도 이동 시 프레임 드랍이 심했을까? 위 스크린샷은 전달 받은 PHP파일에서 직접 찾은 코드입니다.kakao maps api에서 CustomOverlay매서드를 활용하여 c..