Skip to main content

React에서 MSW 2.0 적용, 동적 경로 및 쿼리스트링을 받을 경우 핸들러 파일 수정하기



Mock Service Worker(MSW)는 웹 개발 및 테스트 환경에서 네트워크 요청을 모킹(mocking)하고, 가짜 응답을 제공하여 서버와의 상호작용을 시뮬레이션하는 도구입니다. 이 도구는 특히 API 호출을 테스트할 때 매우 유용하며, 서버가 실제로 존재하지 않거나 서버에 접근할 수 없는 경우에도 클라이언트 애플리케이션을 개발하고 디버깅할 수 있게 해줍니다.

`Error: error:0308010C:digital envelope routines::unsupported` 오류 해결하기



최신 노드 버전을 사용하면서 과거에 작업했던 프로젝트를 실행하거나 빌드할 경우 아래와 같은 오류가 발생할 수 있습니다.

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/syki66/Desktop/test/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/syki66/Desktop/test/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/syki66/Desktop/test/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/syki66/Desktop/test/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/syki66/Desktop/test/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/syki66/Desktop/test/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/syki66/Desktop/test/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/syki66/Desktop/test/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/syki66/Desktop/test/node_modules/react-scripts/scripts/build.js:19
  throw err;
  ^

아래 방법 중 하나를 적용하면, 오류 해결이 가능합니다.

React에서 Firestore를 사용하여 DB 제어하기



Firebase의 Firestore는 유연하고 확장 가능한 NoSQL 기반의 데이터베이스이며, Collection, Document, Field로 구성되어 있고, 프론트엔드 코드만을 사용하여 빠르게 백엔드를 기능을 구현할 수 있습니다.

하지만 직접 백엔드를 구현하는 것에 비해 요금이 비싸고, 쿼리도 빈약하며, 기능의 커스텀에 제약이 많습니다.

위즈윅(WYSIWYG) 에디터, react-quill 사용하기



WYSIWYG(What You See Is What You Get)은 작성중인 문서와 출력될 결과를 동일하게 보여주어 문서 작성을 직관적이고 쉽게 할 수 있게 해줍니다.

리액트에서 WYSIWYG 에디터로 TOAST UI Editor, React Draft Wysiwyg, react-quill 등이 있습니다. 데모 페이지에 들어가 사용해본 결과 react-quill이 가장 사용성이 좋다 느껴져서 사용하게 되었습니다.