webpack(2)
-
[React JS] React 로 MPA(Multi Page Application) 구현하기
React 프로젝트를 진행하던 중, 고객사에서 SPA 말고 MPA로 해달라는 요구가 들어왔다.하지만 당시 개발마감 일자까지 1달 밖에 남지 않은 촉박한 상황이었으며 이미 팀원들의 화면개발은 거의 다 완료된 상태였다. SPA를 MPA로 전환하기 위해서는 다른 프레임워크를 끼우는 방법이 있지만, 무언가를 새롭게 배워야하는 비용과 그때까지 작업하던 소스코드를 변경하는 비용은, 마감 일자가 1달 밖에 안남은 상황에서, 많은 부담이 되었다.팀원들이 작업한 소스코드를 최대한 유지하고 새롭게 무언가를 배우는 비용은 줄이되, SPA를 MPA로 전환하는 방법이 필요했다. 머리를 쥐어짜며 끙끙 앓고 있던 나에게 직장 선배가 아래 링크의 글을 보내주며 이 글을 참고하면 React를 MPA로 전환할 수 있겠다고 이야기 하였다..
2024.04.22 -
[React JS] webpack으로 build 시 html에 환경변수 넣는 법
살다보면 react 를 spa가 아닌 mpa로, 또 배포를 cra가 아닌 webpack으로 할 때가 있다. 더 나아가 html을 여러개로 쪼개는데 cra에서는 html에서 환경변수가 잘 먹혔는데 webpack에서는 안 먹히는 경우도 있다. 보통 CRA로 build할 시 public/index.html에는 환경변수를 이렇게 사용한다. cra로 즉, react-scripts로 build할 시 잘 적용이 되지만 webpack으로 build를 할 시 빌드 파일을 열어보면 그대로 나온다. 이미 new webpack.DefinePlugin()을 이용하여 html이 아닌 react 컴포넌트내에서는 환경변수가 잘 작동되는 것을 확인했었지만 html은 왜 안되는 것일까? 이럴 때 npm install interp..
2024.01.26