1. 들어가며웹 개발을 하다 보면 하나의 UI 컴포넌트로 여러 환경을 지원해야 하는 상황이 자주 발생합니다. 특히 모바일과 데스크톱을 동시에 고려해야 할 때가 그렇죠.이번 글에서는 입력 방식에 따라 자동으로 Tooltip 또는 Popover를 렌더링하는 적응형 컴포넌트를 구현한 경험을 공유하려고 합니다. 마우스가 있는 환경에서는 hover 기반 Tooltip을, 터치만 가능한 환경에서는 클릭 기반 Popover를 자동으로 선택하는 컴포넌트입니다.2. 문제 상황: Tooltip이 모바일에서 동작하지 않는다PWA로 모바일과 PC를 동시 지원하는 과정에서제 경우는 PWA(Progressive Web App)를 개발하면서 이 문제를 마주쳤습니다. PWA는 하나의 웹 코드로 모바일 앱처럼 설치도 가능하고, 데스크..

API Routes란?NextJS의 Page Router 방식에서는 API Routes(링크)를 사용해 Next 서버에 손쉽게 엔드포인트를 만들 수 있지만 api/ 폴더에 따로 파일을 만들어줘야 한다는 번거로움이 있었다. 하지만 App Router에서는 Server Actions(링크)이 추가되어 컴포넌트 내에서도 서버함수를 수행할 수 있도록 코드를 작성하는 편리성을 제공한다. API Routes 응답 캐싱 방법HTTP Cache-Control 헤더를 사용한 캐싱가장 일반적인 방법은 HTTP 헤더를 사용하여 캐시 제어를 하는 것이다. 브라우저나 CDN에서 응답을 캐시할 수 있도록 Cache-Control 헤더를 설정한다.서버 메모리 캐싱서버의 메모리에 데이터를 캐시하는 방법. 이를 통해 백엔드에서 동일한..