그럼에도 불구하고

WEVOTE 프로젝트 리팩토링 중 mocking 시스템을 도입하기 위해 msw를 적용하는 과정에서 정상적으로 동작하지 않는 상황으로 시간을 소모했다. 서비스워커 미실행 이슈 (with webpack-dev-server) msw는 Web API의 Service Worker API를 사용한다. 공식문서에서 설명하듯 브라우저에서 사용할 때는 Mock Service Worker(mockServiceWorker.js)를 public 디렉토리에 설치하여 실행해야 한다. 나는 WEVOTE에 적용하기 전에 msw_test CRA 프로젝트를 만들어서 동작 방식을 이해하고 도입을 시도했다. public에 mockServiceWorker를 설치하여 실행했고, 정상적으로 동작하는 것을 확인했다. 문제의 발단 동작 방식을 가볍..

[Issue] React styled-components Font 깜빡임 (feat. GlobalStyle) 일종의 FOUC (Flash of unstyled content) 즉, style이 적용되기 전의 페이지가 보이는 이슈에 속한다고 볼 수 있습니다. [문제] CSS-in-JS 라이브러리인 styled-components 환경에서 createGlobalStyle 내에 폰트를 정의하면 render가 될 때마다 폰트를 재요청하게 됩니다. 이는 styled-components의 github issue에서도 논의가 되었던 문제이며, 폰트뿐만 아니라 background-image와 같이 리소스 요청이 필요한 부분에서 동일하게 발생되는 문제입니다. 해당 이슈에 대한 라이브러리 개발자의 입장을 요약하자면, 1...