밝을희 클태

Next.js 14 App router사이트를 검색했을 때 노출 결과를 사이트의 특성에 맞게 자세하게 노출되게 하고, 사이트의 브라우저 탭에는 간결하게 사이트 이름을 보여주고 싶었다. 방법은 사이트 방문자가 일반 사용자인지 크롤러 봇인지 구분해서 metadata를 주면 된다.import { headers } from 'next/headers';import { userAgent } from 'next/server';export async function generateMetadata({}) { const { isBot } = userAgent({ headers: headers() }); const title = isBot ? 'KEYNUT - 커스텀 키보드등 다양한 전자기기 중고거래는 키넛' : 'KE..

프로젝트의 대부분의 media query를 사용해서 반응형을 구현했다. 하지만 상품 상세 페이지의 경우 모바일일 때는 이미지 슬라이더를 터치 슬라이더로 구현을 하고 싶었고 PC의 경우 버튼을 클릭해서 이미지를 넘기게 하고 싶었다. 그래서 클라이언트의 userAgent를 확인해 모바일인지 아닌지 체크를 했고 결과는 내가 원하는 데로 잘 동작을 했다.export function isMobile() { if (typeof window !== 'undefined') { if (navigator.maxTouchPoints >= 1) { const isMobile = /Macintosh|iPad|Mobi|Android|iPhone|iPod|BlackBerry|IEMobile|Opera Mini..