FrontEnd4 gh-pages 배포 시 새로고침 404 Error가 뜨는 문제[React] 이전 문제 포스트 gh-pages 배포 시 빈 화면 나오는 문제 수정 [React]1. 문제 배경문제 발생 상황: gh-pages를 활용해 git hub page에 바로 배포를 하게 되면 빈 화면이 뜨는 문제기술 스택: "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1developer-b.co.kr 1. 문제 배경문제 발생 상황: gh-pages를 활용해 git hub page에 바로 배포 후 서브 경로에서 새로고침을 하거나 직접 입력으로 해당 페이지에 접근하면 404 에러가 발생하는 문제기술 스택: "react-dom": "^18.3.1", "react-ro.. 2024. 7. 29. gh-pages 배포 시 빈 화면 나오는 문제 수정 [React] 1. 문제 배경문제 발생 상황: gh-pages를 활용해 git hub page에 바로 배포를 하게 되면 빈 화면이 뜨는 문제기술 스택: "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.25.1", "gh-pages": "^6.1.1", 배경 이야기를 간단히 하자면, 이미 2번째 겪은 문제로 처음부터 create-react-app을 통해서 생성한 폴더에서 작업을 시작하지 않을 때마다 겪은 문제인데. 1번째 문제를 겪은 시점에서는 깔끔하게 프로젝트를 처음부터 새로 만드는 것으로 해결하고 넘어갈 수 있었지만, 이번에는 기존에 만들어둔 포트폴리오 프로젝트를 통째로 react 환경으로 리.. 2024. 7. 28. CSS display:flex가 가지는 한계...해결책은 Grid flex는 1차원 레이아웃을 벗어나기가 힘들다 기존 반응형 작업을 위해서 대부분의 작업을 display:flex를 이용해서 처리하는 케이스가 많았는데, 아쉬운 한계점이 하나 있었다. 그것은 바로 flex 속성이 1차원 레이아웃(행이 1개인 경우)는 유용하지만, 2차원이 되는 순간부터는 크기 조절하는데 불편함이 있다. 위와 같이 한줄에 동일한 크기의 박스를 3개를 두는 레이아웃을 잡는다고 가정해보면, 한 줄에서는 각 col에 flex:1; 이라는 속성을 부여함으로써 동일한 크기로 자동적으로 나뉘도록 설정할 수 있다. box 1 box 2 box 3 하지만 3 x 2의 배열을 하고 싶다면 어떻게 해야할까? 가장 명확한 방법은 .row를 두개로 쪼개는 방법이지만, 이 경우 프론트 처리하면서 반복문을 돌리는 과.. 2024. 2. 8. 모바일 웹에서 주소창 높이 만큼 화면이 가려지는 이슈 작업환경 Vue3 / Vite 사용언어 JS, CSS 브라우저 Safari, iOS 이슈상황 모바일 화면의 높이를 디바이스 화면크기와 동일하게 적용하는 과정에서 브라우저의 주소창 높이만큼 화면이 가려지는 이슈 일반적인 주소 입력창 높이 계산 방법 일반적으로 디바이스 화면에 꽉차게 적용하기 위해서 css를 활용해 100vh를 많이 사용하게 되는데, pc에서 브라우저를 통해 개발자 도구를 활용해 보면 문제가 없지만, 실제 모바일 디바이스로 확인 했을때 브라우저의 주소창 높이만큼 가려지게 된다. 구글링을 통한 해결 방법은 이러했다. 1. window.innerHeight로 UI를 제외한 화면 영역의 높이를 계산 2. 계산된 높이값을 CSS의 :root 변수로 전달 3. 높이를 지정할 element에 변수를 사.. 2024. 1. 29. 이전 1 다음
