본문 바로가기

React7

react proxy 설정 방법 react에 proxy를 설정하는 방법으로는 두가지가 있다. 1. package.json에 "proxy":"~url"을 하는 방법 2. http-proxy-middleware를 설치하여 setupProxy.js를 설정하여 연결하는 방법 먼저 1번 package.json에 proxy를 설정하는 방법은 간단하다. 아래와 같이 proxy를 추가 해주면된다. 이 방법에는 단점들이 몇가지 있는데 1. localhost 즉 dev 에서만 프록시가 적용된다는 점. 2. commit할때 까먹고 proxy를 깜빡하고 지우지 않았다면 api주소가 노출되어 지웠다가 다시 올려야 되는 불상사가 일어날 수 있다. 두 번째 http-proxy-middleware를 설치하여 setupProxy.js를 설정하여 연결하는 방법은 먼저.. 2023. 10. 28.
react storybook 에러 npm run storybook 명령어 사용시 Module not found: Can't resolve '@testing-library/dom' in '~~\node_modules\@testing-library\user-event\dist' node_modules\@testing-library\user-event/dist/click.js 와 같은 에러가 발생했다.. 위 에러는 @testing-library/user-event 패키지에서 @testing-library/dom 모듈을 찾을 수 없어서 발생하는 에러로 먼저 @testing-library/dom 모듈을 설치해야한다. npm install --save-dev @testing-library/dom 다음으로는 @testing-library/user-e.. 2023. 3. 23.
react sourcemap 가리기 cra로 프로젝트를 만들고 aws amplify로 배포를 했는데 내가 작성한 코드가 그대로 보였다. 위와 같이 코드가 그대로 보여서 가리는 방법을 찾아봤다. "build": "GENERATE_SOURCEMAP=false react-scripts build", 위와 같은 코드를 package.json에 넣어준다. 그리고 나서 다시 배포 ㄱㄱ 배포가 끝나고 다시 확인해보면 없어져있는걸 확인할 수 있다. 2022. 4. 13.
Manifest: Line: 1, column:1 Syntax error. aws에서 amplify로 react 배포를 했을때 Manifest: Line: 1, column:1 Syntax error. 가 나왔다.. react 프로젝트 파일에 public/index.html에서 head태그 부분에 아래와 같이 수정하면 console창에 불편한 빨간줄이 없어진다. 2022. 4. 12.