방구석 개발자의 놀이터

분명 route 설정을 제대로 했는데 설정한 URL 경로로 갔을 때 cannot Get 에러를 목격 했다면 webpack의 mode가 development일 확률이 크다~!! 결론부터 말하자면, 2가지 방법이 있다. 1. webpack.config.js에서 아래와 같이 설정하면 된다. module.exports = { mode: "development", devServer: { historyApiFallback: true, } } 2. webpack serve에 옵션을 추가하면 된다. npx webpack serve --history-api-fallback 그렇다면 devServer의 historyApiFallback이 무엇을 의미하는지 알아보자. 먼저, React는 모두가 알다시피 SPA(Single ..

React 에서는 일반적으로 react-router-dom 패키지를 이용하여 페이지 전환을 하지만 jsp혹은 일반 html에서는 태그를 이용해서 페이지 전환을 한다. 1. 태그 - 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려버리게 됨 - 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링 2. Link 컴포넌트 - 페이지를 전환하면, 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경 - Link컴포넌트 자체는 태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장