IT/React

[Recoil] Duplicate atom key 에러 메시지 없애기 (Next.js, Vite)

Expectation Violation: Duplicate atom key "{아톰 키}". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement. 개발 환경에서 Recoil을 사용할 때 HMR 때문에 Recoil 관련 파일이 변경될 때마다 이러한 에러가 뜨곤 한다. 주로 Next.js나 Vite를 사용하면 이러한 에러를 볼 수 있는 것 같다. 이와 관련한 이슈가 계속되자 0.7.6 버전에서 이 에러를 띄우지 않게 하는 RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED라는 설정이 새로 추가되었다. 환경 변수에서 ..

[Vite/React] Vite HMR 에러 (feat. ContextAPI)

에러 메시지 [hmr] Failed to reload {파일 경로}. This could be due to syntax errors or importing non-existent modules. (see errors above) 모든 파일이 아닌 일부 파일에서 변경 사항이 발생할 때마다 이런 에러가 발생했다. 단순히 HMR 문제라서 새로고침하면 되긴 하지만 너무 불편했다. 원인을 찾아보니 Vite에서 ContextAPI 관련한 이슈가 있는 것 같다. React에서 Context와 Context의 Provider를 같은 파일 내에서 작성하면 해당 에러가 발생한다. 따라서, Context를 별도의 파일에서 작성 후, import해서 Provider를 사용하면 해결된다. 해당 이슈는 비교적 최근에 해결이 된 ..

[React Testing Library] SVG 파일을 인식하지 못하여 SyntaxError가 발생할 때

SVG가 포함된 컴포넌트를 render할 때 SVG파일을 인식하지 못해서 "SyntaxError: Unexpected token ' { it('snapshot', () => { const { container } = render(); expect(container).toMatchSnapshot(); }); }); // __snapshots__/index.test.tsx.snap exports[`App snapshot 1`] = ` `; 태그 이름이 파일명과 동일하게 설정되어 있다. 또한, svg 태그 내에 존재하는 path 태그나 g태그 등의 다른 자식 요소가 전혀 없다. 2. jest-transformer-svg 사용하기 ※ jest-svg-transformer는 jest 27까지만 지원하는 버전이다...

[styled-components] 폰트 깜빡임(FOUT) 해결하기

styled-components를 사용할 때, 리렌더링이 일어날 때 글자 폰트가 기본 폰트에서 적용된 폰트로 변경되는 과정이 그대로 보이는 경우가 있다. 이러한 현상을 FOUT(Flash Of Unstyled Font)라고 부른다. FOUT이 발생하면 폰트가 변경되는 과정에서 레이아웃이 살짝 어긋나면서 화면이 깜빡이는 것처럼 보이게 되는데, 이는 UX에 좋지 않은 영향을 준다. 이는 styled-components가 새로운 스타일이 렌더될 때마다 태그를 변경하면서 매번 폰트를 재요청하기 때문에 발생하는 문제다. 보통 styled-components를 사용한다면 createGlobalStyle로 글로벌 스타일을 관리할텐데, 만약 여기에서 font-face로 폰트를 설정했다면 이러한 문제가 발생한다. 이는 ..

[React] You are running create-react-app 4.0.3 which is behind the latest release (5.0.0)

$ npx create-react-app 프로젝트이름 create-react-app을 npx를 통해 설치할 때 아래와 같은 오류가 뜨는 경우가 있다. You are running `create-react-app` 4.0.2, which is behind the latest release (4.0.3). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instruction..