react에서 뒤로가기 버튼을 감지하는 작업을 해야할 때가 있다. 과연 어떤 방법을 사용해야 할까? 세팅 본인은 react-router-dom v6 을 사용하고 있다. v6에는 history를 제공해주는 useHistory가 사라져서 따로 패키지를 받아야 한다. yarn add history 작업 시작 // common/history.ts import { createBrowserHistory } from "history"; const history = createBrowserHistory(); export default history; 필요할 때마다 createBrowserHistory를 사용해서 history를 만들어도 되지만 그렇게되면 두번 일을 한다는 느낌이 있어서 따로 만들었다. history는 ..

0. 사건의 발단 평화로운 어느 날... 나는 내가 만든 프로젝트를 Github에 배포하기 위해서 작업을 진행했다. 분명 로컬에서는 문제없던 프로젝트인데 배포분에서는 원하던 페이지가 나오는 것이 아닌 메인 페이지가 나왔다... 1. 문제 이유 Github는 도메인/페이지 방식이 아닌 도메인/프로젝트명/페이지 방식이어서 라우터를 이동했을 경우 도메인/페이지로 이동되어서 이상한 페이지로 이동된 것이다. ex) https://seojaewan.github.io/react-sns-login/ React Project! seojaewan.github.io = 구글 페이지 이동 => https://seojaewan.github.io/Google?type=Setting/ seojaewan.github.io 뒤에 있던..

0. 사건의 발단 평화로운 어느날.... cra(create-react-app)이 아닌 webpack으로 만든 프로젝트에서 react-router-dom을 사용하니 이동한 페이지에서 새로고침을 했을 때 404 에러가 나타났다... 1. 문제 이유 브라우저가 React 서버에게 "/경로"에 GET을 보내지만 실제 서버에서는 "/경로"에 대한 정보가 없기 때문이다. 이런 오류를 connect-history-api-fallback 현상이라고 한다. SPA는 보통 웹 브라우저에서 액세스할 수 있는 하나의 색인 파일(index.html)만 사용한다. 그래서 특정 경로에서 새로고침 등을 했을 경우 서버가 해당 파일을 찾을 수 없어 발생한 문제이다. 2. 해결 방법 historyApiFallback: true 추가하..