늘 겸손하게

React로 웹 페이지를 개발하는 중에 다른 페이지로 전환이 되었을 때 스크롤의 위치가 맨 위로 초기화되어야 하지만 전환되기 이전 페이지와 비슷한 위치에 있는 문제가 발생하였습니다. 구글에 찾아보니 쉽게 해결책을 찾을 수 있었고 react-router 문서에도 해결책이 나와 있었습니다 영어로는 scroll-restoration이라고 부릅니다 https://v5.reactrouter.com/web/guides/scroll-restoration Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5..

recharts를 활용하여 그래프를 만들었지만 배포한 웹 페이지를 모바일로 접속했을때 굉장히 보기 안좋은 그래프가 그려졌습니다. 하필 그래프가 그려질 컨테이너도 반응형 컨테이너로 설정해두어 가로축이 짧아지면 그래프의 모든 부분이 같이 짧아져버려 굉장히 보기 안좋은 그래프가 그려집니다. 이 때문에 노트북이나 데스크탑으로 접속했을때는 볼만하지만 모바일로 접속했을때는 끔찍한 그래프가 그려지게 되었습니다. 가로축이 넓은 기기로 접속했을때 모바일 버전 그래서 recharts의 레이아웃을 가로로 배치하여 세로축에 카테고리가, 가로축에 데이터 숫자가 배치되도록 했습니다. rechart 가로 레이아웃 설정법 recharts layout은 디폴트로 horizontal이므로 layout="vertical"를 추가하고 카테..

문제 상황 npm start으로 웹 서버를 실행시켰는데 웹 브라우저에 아무것도 출력되지 않는 상황 문제 원인 서버를 실행시켰을때 기본주소는 localhost:3000/korea_crime_graph 였지만 내 코드의 BrowserRouter는 디폴트인 localhost:3000를 가리키고 있었다. 해결책 BrowserRouter의 속성중 basename 속성을 이용한다. 모든 경로에 대한 base URL을 basename 속성을 통해 설정해줄 수 있다. 그러니 basename="/korea_crime_graph"를 BrowserRouter 속성으로 추가하여 문제를 해결하였다.

React의 Route를 이용하여 개발을 하던 중에 맞닥뜨린 에러입니다. 문제 원인 react-router-dom 라이브러리가 v6으로 업데이트되면서 호환이 안되는 부분이 생겼다고합니다. https://reactrouter.com/docs/en/v6/getting-started/overview React Router | Quick Start Declarative routing for React apps at any scale reactrouter.com 해결 방법 1. 새로운 문법에 맞게 다시 작성 2. 이전 버전 사용 이전 버전 사용이 더 간편해서 저는 2번 방법으로 해결했습니다. 이전 버전으로 변경 아래 버전 중 1택 npm install react-router-dom@5.3.0 npm install..