웹팩 (3) 썸네일형 리스트형 [React Router] 리액트 라우터의 URL 파라미터 사용 시 404 오류 해결 방법 (React Router v5, webpack과 함께 사용할 경우 publicPath설정) 문제 상황 상품 리스트 페이지 개발 중, 카테고리번호 별로 다른 상품리스트를 렌더링 하기 위해 리액트 라우터의 URL 파라미터를 사용했는데 같은 방식으로 파라미터를 사용하던 다른 프로젝트에선 볼 수 없었던 아래와 같은 404 오류가 떴다. /categories 까지는 오류 없이 페이지가 잘 나타났지만 /categories 뒤에 '/'와 함께 파라미터를 붙이거나 '/'만 붙여도 해당 오류가 발생했다 해결 방법 이전 프로젝트들에서는 마주친 적 없던 오류였고, 공식문서를 봐도 리액트 라우터의 URL 파라미터 사용법엔 문제가 없었기 때문에 프로젝트 자체의 환경설정 부분이 잘못되었을 확률이 높았다. 관련 키워드로 열심히 검색해본 결과 웹팩에서 사용하는 HtmlWebpackPlugin에 publicPath가 설정되.. [Webpack5] webpack-dev-server 변경 사항 바로 반영되지 않을 때, 개발모드에서 live reloading, Hot Module Replacement, 새로고침 안 될 때. (웹팩 watchOptions) 타입스크립트 공부를 위해 typescript + react + wepack 프로젝트 보일러 플레이팅 작업을 하던 중 평소처럼 설정한 웹팩이 평소와 다르게 동작하는 일이 일어났다. (도대체 왜 🤦🏻♀️) 웹팩 개발 서버에 작업 변경사항이 바로 적용되지 않는다 ? 문제 우리 webpack-dev-server는요... 개발 중 소스 코드의 변경 사항을 바로 적용해주어 변경될 때마다 매번 다시 웹팩 명령어를 실행하지 않아도 알아서 다 해주는! 아주 유용한 도구라죠... 그런데 가장 핵심인 이 기능이 동작하지 않는다. 개발자 도구를 열어보면, 콘솔에 [webpack-dev-server] Hot Module Replacement enabled. [webpack-dev-server] Live Reloading e.. [Webpack] file-loader와 url-loader 비교 차이점 정리 file-loader와 url-loader? 웹팩 설정 중 둘의 차이가 궁금해 알아보며 공부했던 내용을 정리해봅니다 file-loader The file-loader resolves import/require() on a file into a url and emits the file into the output directory. - 파일에 import/requrie 구문을 만들어주고, 파일을 output 폴더에 생성해주는 로더 → 파일 자체를 가져옴 url-loader A loader for webpack which transforms files into base64 URIs. ->The url-loader works like the file-loader, but can return a DataURL .. 이전 1 다음
