Devcamp_MainPage

사파리 키패드로 인한 스크롤뷰

• 사파리에서 유명한 이슈라고 한다
• 키패드가 올라오면 없던 스크롤뷰가 생김
• ios에서 100vh는 주소창까지 포함된 값이 된다
• 키패드가 올라왔다 내려가면 없던 스크롤이 생긴다

해결

tsx파일

const handleResize = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`); 
};

useEffect(() => {
  handleResize();
  window.addEventListener("resize", handleResize);

  return () => window.removeEventListener("resize", handleResize);
}, []);

• 이 부분을 vh 사용한 css를 import한 tsx파일에 입력해준다

css파일

height: 100vh;
height: calc(var(--vh)*100);

• vh 밑에 이와같이 추가한다

Netlify새로고침 시 404에러

• 페이지를 새로고침하면 404에러가 뜨는 문제가 생겼다
• react에서 최초 접속할 때 url은 / 이다
• 화면을 넘겨 라우팅된 url이 /a 또는 /b가 되었을 때 새로고침 시 /와 달리 곧바로 내려줄 자원이 존재하지 않아 404 에러가 난다

해결

/* /index.html 200

• public 파일에 _redirects 파일을 추가하고 위와같이 입력해주어 해결하였다
• 어떠한 경로로 들어와도 200 상태코드를 내려주며 index.html 파일을 렌더링 한다는 의미이다

출처
스크롤뷰출처
404에러출처