그럼에도 불구하고

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를 설치하여 실행했고, 정상적으로 동작하는 것을 확인했다. 문제의 발단 동작 방식을 가볍..

해당 포스트는 React(v17.0.1) 기준입니다. 오늘은 리액트 프로젝트 설정에 대해 알아보겠습니다. 프로젝트를 시작하는 방법보다는 configuration에 대한 내용이 중점입니다. 0. create-react-app(CRA)을 이용한 자동 설정? - 리액트를 처음 시작하는 분들은 대부분 CRA(create-react-app)을 통해 프로젝트를 시작합니다. create-react-app은 React SPA(single page application)를 만드는 것을 도와주는 공식적인 방법이고, webpack이나 babel 등 프로젝트에 필요한 설정들을 직접 구성할 필요없이 자동으로 설정해줍니다. 올인원 솔루션을 지향하는 Rome이라는 통합 툴체인도 등장하고 있지만, 아직은 베타버전... npx cre..

[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...