React JS(2)
-
[React JS] Warning: Internal React error: Expected static flag was missing. 에러와 hook 호출의 규칙
Warning: Internal React error: Expected static flag was missing. Please notify the React team. 리액트 프로젝트를 진행하는 중에 이런 에러가 발생했다.아니 이게 뭐지?! 하면서 구글링을 했더니 나와 같은 문제를 겪은 사람들이 있었다.내가 작성한 코드 둥에 hook의 규칙을 위반하는 것이 있는 것이라고 한다. if (!isVisible) return null; 바로 컴포넌트 내에서 early return 하는 것이 문제가 된다고 하는데, 내 코드 중 이런 것이 있었다.만약 early return 을 hook까지 호출할 필요가 없지 않나? 라는 생각으로 early return 하는 부분 다음에 hook을 호출 하였던 것이었다. i..
2024.07.17 -
[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