프로젝트를 진행하면서 개발자 도구를 확인하니 위와 같은 오류가 있었다. 화면이 렌더링되지 않는 것 같은 치명적인 문제는 없었지만 오류가 나왔으니 해결을 하려고 코드를 확인했다. 확인해보니 state의 업데이트를 useEffect에서 하는 것이 아닌 if문을 사용해서 조건부로 컴포넌트 내부에서 실행해서 발생한 문제였다. 문제를 해결하기 위해서 해당 조건문을 useEffect 내에서 실행하니 오류는 사라졌다. 예상하기론 if문을 사용하더라도 같은 조건인 상황에 여러번 리렌더링이 발생하면 그때마다 state가 변경되기 때문에 문제가 된다고 알려주는 것 같다!

React를 사용해서 개발하다가 터미널을 열었을 때 제목과 같은 오류가 발생했다. Assign object to a variable before exporting as module default warning 기능상 문제가 되는 부분은 없었지만 무엇이 문제인지 알아봤다. 확인을 해보니 나의 export 습관에서 비롯된 문제였다. export default { value: "123", key: "toto" } 다음과 같이 export 를 할 때 default에 객체로 바로 반환해서 발생한 문제였다. 해결하는 방법도 간단했는데, const object = { value : "123", key: "toto", } export default object 다음과 같이 변수로 명칭을 정해주고 export를 하면 문..

현재 프로젝트에서 백엔드 작업이 딜레이가 되어 msw로 테스트를 진행하려고 했는데, 오류가 발생했다. 오류 내용은 제목과 같은 [MSW] Failed to register the Service Worker: Failed to register a ServiceWorker for scope 설정을 전부 하고 실행을 시켰는데 정상적으로 msw가 실행되지 않았다. 그래서 다시 처음부터 설정을 해봤는데, 내가 놓친것이 있었다. msw는 프로젝트 내에 mockServiceWorker.js 파일이 있어야 정상적으로 작동하는데, 이것은 내가 직접 만드는 것이 아닌 명령어를 통해서 생성하는 것이다. npx msw init 폴더 를 통해서 public 폴더에 mockServiceWorker를 생성하니 정상적으로 msw가 ..

0. 사건의 발단 평화로운 어느날... 내가 만든 프로젝트를 Github에 배포를 해서 테스트를 진행했는데, 지난번 경로를 인식 못하는 문제 외 페이지에서 새로고침 시 404 에러가 나왔다.... 1. 문제 이유 github pages는 SPA를 지원하지 않기 때문에, URL이 https://도메인 으로 지정되어있다. 그래서 https://도메인/프로젝트명/라우터명 에서 새로고침을 할 경우 Github는 /프로젝트명/라우터명을 모르기 때문에 404 에러와 함께 404.html 페이지를 리턴한다. 2. 해결 방법 편법이지만, 404.html을 사용한다. 빌드를 하고 결과물의 index.html 파일을 404.html 파일로 복사해서 같이 빌드해주면 된다. "scripts": { ... "deploy": "..

0. 사건의 발단 평화로운 어느 날... 나는 내가 만든 프로젝트를 Github에 배포하기 위해서 작업을 진행했다. 분명 로컬에서는 문제없던 프로젝트인데 배포분에서는 원하던 페이지가 나오는 것이 아닌 메인 페이지가 나왔다... 1. 문제 이유 Github는 도메인/페이지 방식이 아닌 도메인/프로젝트명/페이지 방식이어서 라우터를 이동했을 경우 도메인/페이지로 이동되어서 이상한 페이지로 이동된 것이다. ex) https://seojaewan.github.io/react-sns-login/ React Project! seojaewan.github.io = 구글 페이지 이동 => https://seojaewan.github.io/Google?type=Setting/ seojaewan.github.io 뒤에 있던..

0. 사건의 발단 평화로운 어느날, Custom Webpack을 사용해서 만든 프로젝트에 styled-component를 사용할때 발생하였다.... 나는 분명 yarn add styled-component를 입력하고 package.json에 제대로 입력되어있는 것까지 확인하였는데, 왜 모듈이 없다고 나오는 것일까?! 1. 바로 해결 Holy!! yarn add styled-components 를 사용해서 설치해야하는 것이였다!?