choijming21 님의 블로그

Next.js 애플리케이션 개발할 때 반응형 UI를 구현하기 위해 디바이스 타입을 감지하는 것은 중요한 작업입니다. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 모두 활용하는 Next.js에서는 이 두 환경에서 일관된 디바이스 감지 방법이 필요합니다!  이 글에서는 서버 컴포넌트에서 초기 디바이스 판별을 하고, 이를 클라이언트 컴포넌트로 전달하여 실시간으로 반응형 UI를 구현했던 방법을 설명드리겠습니다!🙆‍♀️     ✅ 서버 사이드에서 디바이스 감지하기 ✅먼저 서버 컴포넌트에서 userAgent를 기반으로 디바이스 타입을 감지하는 함수를 만듭니다. ☑️ userAgent()란?Next.js의 내장 기능으로 next/server 모듈에서 userAgent 함수를 제공합니다. 이 함..

안녕하세요! 오늘은 제가 프로젝트에서 마주친 반응형 이미지 렌더링 문제와 해결 방법에 대해 공유하려고 합니다.  1.  문제 발생❓제 프로젝트에서는 breakpoint가 768px로만 설정되어 있었지만, 이미지는 mobile, tablet, desktop 세 가지 디바이스 크기에 맞춰 렌더링해야 했습니다. 이런 요구사항을 어떻게 효율적으로 구현할지 고민하던 중 HTML의와 태그를 알게 되었습니다.   2.  해결 과정 📋HTML5에서 도입된 태그는 다양한 화면 크기와 해상도에 맞는 이미지를 제공하는 강력한 방법입니다. 이 태그는 태그와 함께 사용하여 미디어 쿼리에 따라 적절한 이미지를 자동으로 선택해 줍니다. import React from "react";import { DesktopViewCon..