현재 프로젝트에서 백엔드 작업이 딜레이가 되어 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가 ..

cra 환경에서 패키지를 만들어서 npm에 배포를 하다가 문제가 발생했다. 해결하기 위해서 이곳 저곳 찾아봤는데, babel 문제로 파악되었다. { "presets": ["@babel/preset-env", "@babel/preset-react"] } 해당 내용을 package.json에 넣어주니 배포가 되었다. 배포한 패키지를 다운받아서 테스트를 해보니 이번에는 React is not defined가 나왔다. 다시 한번 찾아보니 preset-react에 추가적인 옵션을 줘야 했다. presets: [ "@babel/preset-env", ["@babel/preset-react", {"runtime": "automatic"}] ] runtime 옵션을 주니 이번엔 배포가 되고 다운 받아도 문제 없이 실행..

React와 같이 사용하는 css 라이브러리로 styled-components를 자주 사용한다. 그런데, 공통 스타일을 관리하려고 theme를 만들면 필요할 때마다 import를 해야한다는 불편함이 있었다. 또한 dark 테마와 같이 전체적인 스타일이 변경되야 하는 경우 처리하기가 매우 까다로웠다. 하지만 styled-components에서는 context API를 통해 theme를 관리할 수 있는데, ThemeProvider이다. ThemeProvider ThemeProvider는 context를 통해서 하위 컴포넌트에서 theme 속성을 전달하는 역할을 한다. 그래서 일관적인 theme를 유지할 수 있다. import { ThemeProvider } from 'styled-components'; co..

swiper는 React 환경에서 뿐만 아니라 슬라이드를 사용하는 환경이면 생각나는 것이다. 아주 간단하게 슬라이드를 만들어주기 때문이다. autoplay, navigation, 등등 필요한 왠만한 모든 것이 다 있다. 그런데, 작업을 하다가 한 가지 문제가 있었다. autoplay로 설정된 슬라이드가 시작과 끝 부분은 정상적인 속도이지만 화면의 정면으로 가까워지면 점차 느려지는 것이다. 애석하게도 swiper는 이것을 해결하는 옵션을 가지고 있지 않은 것으로 보였다. 애매하게 말하는 이유는 내가 검색 키워드를 몰라서 찾지 못하는 것일 수 있다. 하지만 분명 이런 이동이 불편해지는 상황이 올 것이다. 그래도 다행인 것은 swiper의 css 설정이 어렵지 않은 것이였다. 해결하기 위해서 swiper에서 ..

form 형식의 페이지에 상태를 관리하는 것은 생각보다 귀찮은 작업이다. form에 개수에 맞춰서 state를 만들어주고, reset이 필요한 경우 state의 개수만큼 값을 초기화해야 한다. 불편한 점은 이것만이 아니다. 값의 검증, 또는 onChange 이벤트 시에도 상태의 수만큼 만들어줘야한다. 결국 유사한 코드가 반복되는 상황이 발생하는 것이다. 이것을 비교적 간단하게 처리해주는 커스텀 훅이 useForm이다. useForm? 앞서 말한 것처럼 쉽게 form을 관리할 수 있는 커스텀 훅이다. npm install react-hook-form 다음과 같은 방법으로 설치할 수 있다. 굳이 useForm을 사용해야 하는 이유를 먼저 설명하자면, 값의 변경, submit, 조회, 오류 검출 등의 기능을 ..

redux는 이미 많은 개발자가 사용하는 상태 관리 라이브러리이다. React의 상태 관리 라이브러리는 한 가지 고려할 점이 있는데, 일반적인 상태와 같이 새로고침 시 상태가 사라진다. 이것을 해결하기 위해서 local 또는 session 을 사용해서 reducer를 저장해서 새로고침 시 데이터를 redux에 가져올 수 있다. 다음과 같은 기능을 redux-persist가 제공해준다. 설치 yarn add @reduxjs/toolkit react-redux redux-persist reduxjs/toolkit과 react-redux는 redux를 사용하기 위해서 설치했고 redux-persist는 따로 설치해야 한다. 만약 타입스크립트를 사용한다면, yarn add -D @types/redux-persi..

Compound Component? Compound Components는 그룹 컴포넌트의 동작과 상태를 포함하고 있지만 렌더링 제어를 외부 사용자에게 제공하는 패턴이라고 할 수 있다. 여기서 핵심은 상태와 동작을 포함하고 있다는 것이다. HTML의 select 태그와 option 태그를 생각하면 이해하기 쉬울 것이다. Volvo Mercedes Audi select 태그는 option 태그와 함께 드롭다운 기능을 수행합니다. UI의 상태 관리를 select가 수행하고 option 은 select가 작동하는 방식에 대해서 구성이 됩니다. React의 Compound Component는 Prop Drilling을 방지하는 데 도움이 되는 선언적 UI 구성 요소를 구성하는데 사용된다. 이러한 Compound ..

// src/context/counter.js const CounterContext = React.createContext() function CounterProvider({step = 1, initialCount = 0, ...props}) { const [state, dispatch] = React.useReducer( (state, action) => { const change = action.step ?? step switch (action.type) { case 'increment': { return {...state, count: state.count + change} } case 'decrement': { return {...state, count: state.count - change} }..