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

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

🤔공부하게 된 계기재직중인 회사의 고객사 요청으로 운영중인 페스티벌 페이지를새로운 버전으로 만들어 달라는 요청이 있었다. 소개페이지에서 동적 animation을 추가해야 하는 과업이 있었는데 이전 버전의소개페이지에 접속하면 노트북의 펜이 미친 듯이 돌기 시작했고,내가 직접 개발한 소개페이지는 더 많은 animation이 추가 되었음에도불구하고 과부화 되어 펜이 돌거나 하진 않았다. 이러한 현상의 원인을 [ postioin, margin ] vs [ transform ] 라고 유추했다.내가 생각한 것은 "Layout 단계에서 지속적으로 재계산 되기 때문?" 이었다. 🖼️브라우저 렌더링 순서Parsing: HTML → DOM Tree, CSS → CSSOM TreeStyle: DOM Tree + CSSO..

🤔NextJS 쿠키?브라우저에 저장되는 일반적인 쿠키와 다를게 없지만NextJS는 SSR을 지원한다는 점에서cookie를 서버에서 확인할 수 있는 방법이제한적이기 때문에 CSR(React 등)만 활용하여개발하던 개발자들은 생각보다 더 난해한 문제를겪게 될 수 있다. 그런 개발자 중 한명이 필자였고 특히쿠키를 활용한 JWT 로그인 유지를 구현할 때interceptor를 통해 매번 토큰을 header에 넣어 요청하고accessToken이 만료된 경우에는 refreshToken을서버에 재발급요청하여 재생성된 토큰들을 쿠키에 저장하고저장된 쿠키를 통해서 이전 요청을 재요청하는 프로세스에서accessToken 쿠키가 undefined인 상태로 요청이 되는 이슈로꽤나 험난한 삽질과 많은 시간을 고민하게 되었다. ..

🤔서론과 계기회사에서 진행하는 프로젝트에서 useHookForm을활용 가능하도록 input 공용 컴포넌트를 만들다가tailwindcss를 통해 스타일을 지정하다"focus:", "hover:" 문득특정 문자열을 반드시 포함하는 타입을 만들면 어떨까?라는 생각과 함께 고민해보고 만들어보게 되었다. 어떻게 만들면 그게 가능할까 라고 고민하는 순간가장 먼저 템플릿 리터럴이 떠올랐고 단순하게 작성해봤는데다행이 해매지않고 원하는 결과를 얻었다. typescript로 고생하는 누군가에게 이 포스팅이 도움이 됐으면 좋겠다. 예제코드// interface 예제interface IHolder { inputPlaceholder?: `placeholder-${string}`;}// type 예제type TFocus = ..

🐻ZustandZustand가 가진 특징으로 가벼운 번들사이즈,폭넓은 확장 가능성, provider가 없는 구조,Flux패턴의 단방향 Pub/Sub 모델구조이다. 이러한 특징들로 요즘 대세 상태관리 라이브러리로각광받고있다. npm 공식 페이지에서 주간 다운로드 횟수를 보면놀라운 주간 다운로드 횟수를 갱신중이다. ※ 2024-09-22 주요 상태관리 라이브러리 주간 다운로드 횟수- Redux : 10,278,099 - Zustand : 4,243,907 - Redux-toolkit : 3,609,254 - Jotai : 1,177,983 - Recoil : 489,922 부동의 1위인 오리진 Redux를 제외한다면Redux의 본체라 해도 무방한 Redux-toolkit 조차도 뛰어넘은대세 상태관리 라이브..