react 2

Netlify로 빌드한 웹사이트에 URL parameter를 붙여 접속하면 404가 뜰 때 해결법

react app gets 404 when fetching url parameter 이 글을 쓰게 만든 문제 상황 자체는 위 키워드와 같았다. 빌드한 리액트 프로젝트에 url 파라미터를 붙여서 접속하면 자꾸 404가 뜨는 것. 아래에서 자세히 쓸 거지만... 주요 원인이 클라이언트 사이트 라우팅 등과 관련된 것 때문이라는 걸 몰라서 더 헤맸다. 때문에 나와 같은 상황에 처한 누군가가 비슷한 키워드로 서치했을 때 원인을 바로 파악했으면 하는 마음에 내가 서치했던 키워드를 글 상단에 추가해 보았다. 문제 상황 나의 토이프로젝트인 사이퍼즈 성향 테스트는 카카오톡으로 테스트 결과를 공유하는 기능이 있었다. 즉 해당 버튼을 누르면 카카오톡으로 결과 페이지 url을 전송해서 다른 사람들로 하여금 접속할 수 있게 하..

React로 Full Height 화면을 만들었던 과정

브라우저 창에 꽉꽉 차는 화면.Height를 full로 하기 위한 여정을 기록한다.먼저 간단하게 전체 화면을 구성하는 컨테이너 div태그의 height를 100vh로 주었다.vh란, 뷰포트 높이에 따라 달라지는 단위이다. 1vh는 뷰포트 높이의 1%이므로, 100vh는 뷰포트의 100%, 즉 full 높이를 말한다고 볼 수 있다.이렇게 하니 정말 화면이 꽉꽉 차 보인다.하지만 모바일 화면으로 접속해 보니 이상했다.간격이 적용되지 않는 문제는 둘째치고, 화면이 묘하게 아래로 처져 있었다.찾아보니 모바일에서는 vh 계산을 할 때 상단에 위치한 url바와 하단의 네비게이션바의 높이까지 포함하여 계산한다고 한다. 그래서 조금씩 어긋나게 되는 것.구글링을 통해 해결방안을 구했다.먼저 url바와 네비게이션바의 높이..