Dev Diary 💻

Intro 안녕하세요. 이번시간에는 모바일 기기 (mobile device) 화면 잘림 현상에 대해 알아보겠습니다. 제 경우 react next project를 만들었습니다. pc local 개발자도구 테스트 시 화면 잘림 현상 없이 잘 나왔지만, 실제 핸드폰에는 border line이 살짝 잘린 현상이 나타나더라고요. 해당 문제를 해결하기 위해 구글링을 해봤습니다. 🤘 Why? 모바일 기기에서 화면 잘림 현상이 나타나는 원인은 여러가지 있을 수 있겠만, 대게는 모바일 기기 브라우저의 뷰포트와 관련된 문제라고 합니다. 모바일 브라우저는 페이지 렌더링 시 뷰퍼트의 크키에 맞게 자동 조정됩니다. 하지만 브라우저가 뷰포트의 크기를 올바르게 계산하지 못할 경우, 페이지가 제대로 나오지 않는 경우가 발생합니다. ..

Intro 안녕하세요. 이번시간에는 Next.js에서 Viewport(뷰포인트)를 설정하는 방법에 대해 알아보겠습니다. How to apply viewport in nextjs _document.js 파일을 사용하여 아래와 같이 전체 페이지에 meta 태그를 추가해주면 됩니다. import Document, { Html, Head, Main, NextScript } from 'next/document'; class MyDocument extends Document { render() { return ( ); } } export default MyDocument;