MSW 사용, 테스트 환경 세팅, TextEncoder is not defined 트러블 슈팅 기록

1️⃣ 왜 MSW를 도입했는가?API 이슈와 MSW 도입의 필요성문제없이 개발하던 중, 어느 순간 API 요청이 먹통이 되는 상황이 발생했습니다. 알고 보니 백엔드 측에서 HTTP를 HTTPS로 변경하는 과정에서 설정이 잘못되어, 그 설정을 하는 동안 클라이언트 측의 프론트엔드 개발자들은 개발이 잠시 중단되는 상황이 발생했습니다. 이러한 상황을 겪으면서, 만약 MSW(Mock Service Worker)를 설정해두었다면 막힘없이 개발을 계속 진행할 수 있었을 텐데라는 생각이 들었습니다.그래서 백엔드의 의존을 덜어낼 수 있는 안정적인 Mock 환경을 세팅을 시작하게 되었습니다.2️⃣ MSW 세팅 시작1. 기본적인 세팅MSW의 공식 문서에 따라 기본적인 세팅을 진행했습니다. Mock Service Worke..

• format_list_bulleted 개발관련/Front End
• · 2024. 7. 21.
• textsms

React + Typescript + Webpack (esbuild-loader) 설정

1. React와 TypeScript 설치먼저, React와 TypeScript를 설치하겠습니다. TypeScript 의존성은 .ts 파일을 컴파일하는 데 사용됩니다.npm i react react-domnpm i -D typescript2. Webpack 설치다음으로, Webpack을 설치합니다. Webpack은 모듈 번들러로, 개발 중과 빌드 과정에서 유용하게 사용됩니다.npm install -D webpack webpack-cli webpack-dev-server3. 로더 설치CSS 스타일을 적용하기 위해 style-loader와 css-loader를 설치합니다. 또한, 빠른 번들링을 위해 esbuild-loader를 사용할 것입니다.npm i -D style-loader css-loader esb..

• format_list_bulleted 개발관련/우아한 테크코스 6기
• · 2024. 7. 15.
• textsms

[JS] Dual Package 사용하기

이 글에서는 듀얼 패키지를 사용해야 하는 이유, 그로 인해 발생할 수 있는 위험성, 그리고 그 위험을 관리하는 방법에 대해 살펴보겠습니다.1️⃣ 듀얼 패키지를 사용해야 하는 이유Node.js에서 패키지를 관리하고 모듈화하는 방법은 지속적으로 발전해 왔습니다. 이전에는 CommonJS 모듈 시스템이 주로 사용되었지만, 최근에는 ES 모듈의 지원이 추가되면서 개발자들에게 더 많은 유연성과 선택지를 제공하고 있습니다.ES6의 지원 초창기에는 Node.js가 CommonJS 진입점을 실행하는 동안 빌드 도구(예: 번들러)가 ES 모듈 진입점을 사용할 수 있도록 했습니다. 즉 Babel과 같은 트랜스파일러를 사용하여거나나 다른 도구들이 ES 모듈 파일을 사용할 수 있었습니다.현재 Node.js는 ES 모듈 진입점..

• format_list_bulleted 카테고리 없음
• · 2024. 6. 24.
• textsms

[기술서적] 업무에 활용하는 Node.js

1️⃣ 이 책을 선택한 이유는?최근에 진행된 특강에서 Node.js를 메인으로 서버 개발을 하는 개발자를 만났고, 그 경험은 나에게 큰 영향을 주었다. 프론트엔드 개발자로서 백엔드 기술에 대한 이해는 선택이 아닌 필수가 되어가고 있다고 생각한다. 그리고 Node.js는 그 중심에서 매우 중요한 역할을 차지한다고 생각한다(프론트엔드 개발자라서 그렇게 생각하는 것일지도!). 그리고 다가오는 백엔드 개발자의 소통이 필요한 프로젝트에서 효율적인 소통을 위해, Node.js에 대한 기술을 이해하는게 중요하다 생각했고, 이 책을 결정했다.2️⃣ 책을 읽으며 느낀 점들접근성이 좋은 설명이지만, 추가적인 학습이 필요하다고 생각된다."업무에 활용하는 Node.js"는 초보자도 부담 없이 접근할 수 있도록 쓰여졌다. 쉬운..

• format_list_bulleted 개발관련/기술 서적
• · 2024. 6. 23.
• textsms

[React-query] refetch와 invalidate의 차이

1. refetch와 invalidate의 차이React Query에서 데이터 쿼리를 관리하는 두 가지 주요 방법은 refetch와 invalidate입니다. 이 둘은 쿼리 데이터를 갱신하는 방식에서 중요한 차이를 보입니다.refetch는 강제로 데이터를 다시 가져오는 동작을 수행합니다. 즉, 호출되면 조건과 상관없이 데이터를 서버로부터 새로 불러옵니다.반면, invalidate는 쿼리 데이터를 "stale"으로 표시하고, 이 쿼리를 관찰하는 컴포넌트가 마운트될 때 데이터를 다시 가져오도록 합니다. 이렇게 하면 불필요한 네트워크 요청을 줄일 수 있습니다.2. refetch의 특징refetch는 사용자가 명시적으로 쿼리를 다시 실행하고자 할 때 유용합니다. 예를 들어, 사용자가 데이터를 최신 상태로 갱신하..

• format_list_bulleted 개발관련/React
• · 2024. 6. 7.
• textsms

[한글 번역] Stop mocking fetch - Kent C. Dodds

“fetch” 모킹은 그만!이 글은 아래 원글 ‘Stop mocking fetch - Kent C. Dodds’ 의 내용을 번역한 글입니다.원글⬇️ Stop mocking fetchStay up to date Stay up to date All rights reserved © Kent C. Dodds 2024kentcdodds.com ❗️tl;dr - 옮긴이Fetch 모킹의 문제점중복되는 백엔드 구현: fetch를 모킹하면 테스트 곳곳에서 백엔드의 기능을 재구현해야 한다. 이는 중복 작업을 초래하고 테스트의 복잡성을 증가시킨다.테스트와 서버 코드의 분리: 클라이언트와 서버 사이의 상호작용을 모킹함으로써 실제 서버의 동작과 테스트가 분리되어, 테스트가 실제 환경을 제대로 반영하지 못할 수 있다.구현 세부사..

• format_list_bulleted 개발관련/Front End
• · 2024. 5. 31.
• textsms