서버사이드 렌더링을 지원하는 Next.js와 같은 프레임워크에서는 캐싱이 필수적입니다. 캐싱을 하지 않으면 동일한 요청이 반복 실행되어 비효율적인 네트워크 사용과 과도한 서버 부하가 발생하기 때문입니다. Next.js는 기본적으로 fetch 요청을 캐싱하지만, 특정 조건에서는 자동으로 캐싱이 해제될 수 있습니다. 특히 cookies() 함수를 사용하면 fetch 요청이 no-store로 설정되는 문제가 발생하여 의도치 않게 캐싱이 비활성화(Opt-out)되고, 이로 인해 서버 부하가 증가할 수 있습니다. 또한, Next.js 14와 15 버전에서는 캐싱 기본 정책이 완전히 달라졌습니다. 이 글을 통해 두 버전에서 캐싱 방식이 어떻게 달라졌는지 함께 살펴보겠습니다. Next.js 14의 기본 fetch 캐싱 동작 Next.js 14에서는 fetch 요청 시 기본적으로 force-cache가 적용됩니다. 즉, 명시적으로 캐싱을 비활성화하지 않으면 Next.js가 요청을 캐싱하여 응답 …

기존의 SPA(Single Page Application) 방식에서는 클라이언트가 API를 호출하여 데이터를 가져오는 반면, Next.js는 서버에서 미리 데이터를 가져와 렌더링할 수 있습니다. 캐싱을 제대로 활용하지 않으면, 사용자가 페이지를 방문할 때마다 서버가 동일한 요청을 반복해서 처리해야 합니다. 이로 인해 서버 부하가 증가하고, 특히 트래픽이 많은 서비스라면 서버 리소스 사용량이 급격히 증가할 수 있습니다. Next.js에서는 강력한 캐싱 기능을 제공하여 성능을 더욱더 극대화할 수 있습니다. 이번 글에서는 Next.js의 캐싱 방식과 활용법을 좀 더 이해하기 쉽게 간략히 설명해보도록 하겠습니다. 1. 캐싱이란? 캐싱(Caching)은 자주 사용하는 데이터를 미리 저장해 두었다가, 다음에 같은 요청이 들어오면 다시 계산하거나 가져오지 않고 빠르게 제공하는 기술입니다. 2. Next.js에서 제공하는 캐싱 방식 Mechanism What Where Purpose Durati…

프론트엔드 개발을 하다 보면 z-index 때문에 겪는 문제를 피하기 어렵습니다. 특히 프로젝트 규모가 커질수록 z-index는 예상치 못한 충돌을 일으키며, 가독성을 떨어뜨리곤 합니다. 예를 들어, 특정 UI 요소가 다른 요소에 의해 가려지거나, 의도한 대로 화면에 표시되지 않는 문제를 종종 경험하게 됩니다. 이 글에서는 CSS 변수를 활용하여 이러한 z-index 문제를 체계적으로 관리하는 방법을 공유해 보고자 합니다. Floating UI 대부분의 프로젝트에는 여러 개의 floating UI가 존재합니다. 예를 들어, Header, Drawer, Dialog(Modal), Tooltip, Dropdown Menu 등을 생각해볼 수 있습니다. 이러한 UI들은 동시에 여러 개가 겹칠 수 있으며, 이들의 레이어 순서를 명확히 정의하지 않으면 화면에서 엉뚱한 위치에 겹쳐 보이거나 클릭이 되지 않는 문제가 발생할 수 있습니다. Header UI Drawer UI Dialog UI…

TL;DR; TypeScript와 ESLint는 “의도적으로 무시”하는 코드에 대해 다른 접근 방식을 가집니다. TypeScript는 언더스코어(_) 접두사로 시작하는 변수를 자동으로 무시하지만, ESLint의 no-unused-vars 규칙은 기본적으로 더 엄격하므로, 언더스코어로 시작하는 변수도 사용되지 않은 것으로 간주하여 오류를 발생시킵니다. 개발자는 ESLint 설정을 통해 “의도적으로 무시”하는 코드에 대해 TypeScript와 유사한 동작을 구현하거나 더 세밀한 제어를 할 수 있습니다. “의도적으로 무시”하는 코드 아래 예시와 같은 코드를 작성해본 경험이 있으신가요? 우리는 가끔 “의도적으로 무시” 하는 것으로 간주하는 코드를 작성해야 할 때가 있습니다. 루프 인덱스 무시: _index는 사용되지 않지만, entries() 메서드의 반환 값을 구조 분해하기 위해 필요 콜백 함수에서 매개변수 무시: _item은 사용되지 않지만, index에 접근하기 위해 선언 구조 분…

Astro는 애플리케이션을 구축이 아닌 콘텐츠에 중점을 두고 설계된 정적 사이트 빌더입니다. 따라서 블로그, 포트폴리오, 이벤트용 마케팅 성격의 사이트 개발에 매우 적합한 프레임워크 입니다. Astro 컴포넌트에 대해 먼저 간략히 알아보고, 어떻게 여러 프레임워크(React, Preact,Svelte, Vue, SolidJS)를 하나의 프로젝트에서 혼합해서 사용할 수 있는지 알아보도록 하겠습니다. Astro 컴포넌트 Astro 컴포넌트는 모든 Astro 프로젝트의 기본 구성 요소입니다. 이는 클라이언트 측 런타임이 없는 HTML 전용 템플릿 컴포넌트로 .astro 파일 확장자 사용합니다. Astro 컴포넌트에 대해 알아야 할 가장 중요한 점은 클라이언트에서 렌더링되지 않는다는 것입니다. HTML로 렌더링되며, 컴포넌트 스크립트는 브라우저로 전송되는 최종 페이지에서 모두 제거됩니다. 구성(스크립트 + 템플릿) .astro 파일은 스크립트와 템플릿으로 구성됩니다. src/compone…