파슬리 키우기

styled-components 라이브러리를 사용하던 중 리렌더링이 될 때마다 글자가 깜빡이는 현상이 발생하였다. 처음에는 다운로드 받은 폰트 파일이 잘못되어 발생하는 오류인 줄 알았는데 이와 같은 걸 FOUT(Flash Of Unstyled Font) 현상이라고 한단다!FOUT 현상이 발생하는 궁극적인 이유는 styled-components 설정 때문이다. styled-components는 새로운 스타일을 렌더링해야 할 때 안의 태그를 변경한다. 다시 말하면, 스타일이 변경될 때마다 폰트를 다시 요청한다는 것이다. @font-face { font-family: 'Pretendard'; src: url('@/assets/fonts/Pretendard-Medium.woff2') format('wof..

React Router에서 Path Parameter로 동적 라우팅을 처리하면 계속 다음과 같은 에러가 발생하며 페이지가 제대로 표시되지 않았다.Refused to execute script from 'http://localhost:3000/path/main.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. 어디선가 경로 설정을 잘못해서 생긴 문제라는 건 직감할 수 있었지만, 서치를 해도 너무 다양한 상황이 존재해 정확한 해결 방법을 파악하기 어려웠다.output: { publicPath: '/', ...} 나의 경우 webpack.config.js에 publicPath를..

Webpack으로 React 개발 환경을 구축하고 타입스크립트를 설정하는 과정에서 다음과 같은 에러가 발생했다.Typescript emitted no output 도무지 무슨 에러인지 감도 안 잡혔는데, 관련된 깃허브 이슈를 보고 실마리를 얻을 수 있었다. https://github.com/TypeStrong/ts-loader/issues/1602 ts-loader doesn't work when ts-config noEmit is set to true · Issue #1602 · TypeStrong/ts-loaderTypeScript: v5.0.2 Webpack: v5.76.3 Expected Behaviour When bundling a ESM module with noEmit, Webpack is ..

Webpack으로 React 개발 환경을 구축하면서 다음과 같은 에러를 맞닥뜨리게 되었다.ReferenceError: __dirname is not defined 해당 문제는 package.json에 type: "module" 설정을 추가하여 CommonJS 모듈이 아닌 ES6 모듈을 사용하게 되는 경우 발생한다.ES6 모듈에는 __dirname 변수가 존재하지 않기 때문에 별도로 정의가 필요하다.import path from 'path';import { fileURLToPath } from 'url';const __dirname = path.dirname(fileURLToPath(import.meta.url)); 위와 같이 정의하고 __dirname 변수를 사용하면 정상적으로 경로를 불러오는 것을 확인..