모바일에서는 url 주소 창, 네비게이션 바의 높이를 뷰 포트(스크린)높이에 포함 시켜 pc에서처럼 화면에 꽉 차지 않고 실제 화면보다 크게 잡혀서 스크롤이 생긴다.  window.innerHeight 로 현재 뷰 포트 크기 가져와서 재정의 하기 next.js 에서는 최상위에 위치한 _app.js에서 적용하기//_app.jsfunction setScreenSize() { let vh = window.innerHeight * 0.01; document.documentElement.style.setProperty("--vh", `${vh}px`);}useEffect(() => { setScreenSize();}); css 적용하기/* 필요한 곳에 적용 */height: calc(var(--v..

태그는 텍스트에 사용된 여백과 줄 바꿈이 모두 그대로 브라우저 화면에 나타낸다. Lorem Ipsum is simply dummy text of the printing and typesetting industry.   태그는 내부에 있는 글을 그대로 보여주기 때문에 긴 글을 일 경우 줄 바꿈이 안되고 영역을 넘어간다.그래서 pre 태그에 white-space: pre-wrap css 를 추가해줘야 자동으로 줄 바꿈이 이루어진다. Lorem Ipsum is simply dummy text of the printing and typese..

Next.js 에서 새로 고침 하면 아래와 같은 오류가 발생했다.Hydration failed because the initial UI does not match what was rendered on the server Next.js 공식 문서에 따르면 오류가 발생한 이유로는“ 텍스트 내용이 서버에서 렌더링 된 HTML과 일치하지 않습니다. "렌더 시점에 대한 이유로 발생한 거 같다. 여러 해결 방법 중 useEffect를 활용해서 해결했다. import { useState, useEffect } from 'react' export default function App() { const [mounted, setMounted] = useState(false) useEffect(() => { se..