밝을희 클태

상품 페이지에서 사용자가 상품 이미지를 클릭하면, PhotoSwipe 라이브러리를 통해 큰 사이즈의 이미지가 원본 크기로 표시된다. 네트워크 속도가 빠를 때는 문제가 없지만, 개발자 도구에서 네트워크를 느린 4G로 제한한 경우, PhotoSwipe가 초기화되고 이미지를 표시하기까지 지나치게 오랜 시간이 걸린다. 일반적인 상황에서는 PhotoSwipe이 빠르게 뜨지만, 느린 네트워크에서는 사용자가 이미지를 클릭한 후 아무 반응 없이 기다리는 시간이 길어지면서 사이트가 제대로 작동하지 않는 것처럼 보일 수 있다. PhotoSwipe가 뜨고 나서 이미지를 로딩하는 화면을 보여주면 사용자는 이미지가 로딩 중이라는 것을 인지할 수 있다. 그러나 현재는 이미지 클릭 후 PhotoSwipe 자체가 뜨기까지 긴 시간이..

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..