stop-mocking-fetch 피드백 반영

May/article/stop-mocking-fetch.md

@@ -6,22 +6,6 @@
 
 ---
 
-## ❗️tl;dr - 옮긴이
-
-**Fetch 모킹의 문제점**
-
-1. **백엔드 재구현:** fetch를 모킹하면 테스트 곳곳에서 백엔드의 기능을 재구현해야 한다. 이는 중복 작업을 초래하고 테스트의 복잡성을 증가시킨다.
-2. **테스트와 서버 코드의 분리:** 클라이언트와 서버 사이의 상호작용을 모킹함으로써 실제 서버의 동작과 테스트가 분리되어, 테스트가 실제 환경을 제대로 반영하지 못할 수 있다.
-3. **구현 세부사항으로부터의 격리:** 모킹은 구현 세부사항으로부터 테스트를 격리시키지만, 이로 인해 실제 사용 시 발생할 수 있는 문제를 놓칠 위험이 있다.
-
-**MSW 사용의 필요성**
-
-1. **실제 서버 행동 모사:** msw(Mock Service Worker)는 실제 서버의 동작을 모사하여 요청을 처리함으로써, 테스트가 실제와 더 가까운 환경에서 이루어질 수 있도록 한다.
-2. **테스트의 격리와 재사용성:** msw를 사용하면 테스트 중에 서버 핸들러를 쉽게 추가하거나 제거할 수 있어, 각 테스트의 독립성을 유지하면서도 필요에 따라 서버 응답을 조정할 수 있다.
-3. **개발 환경에서의 유용성:** msw는 개발 중에도 브라우저에서 동일한 서버 핸들러를 사용할 수 있어, 개발 과정에서도 일관된 테스트와 디버깅 환경을 제공한다.
-
----
-
 ## “fetch” 모킹은 그만!
 
 ```jsx
@@ -182,10 +166,6 @@ test('clicking "confirm" submits payment', async () => {
 - 엔드포인트가 고장 났을 때
 - 인터넷 연결이 느리거나 존재하지 않을 때
 
-_(엔드포인트(endpoint)는 네트워크 상에서 통신을 위해 데이터가 전송되거나 받아지는 지점을 말합니다. 특히 웹 개발에서는 엔드포인트가 웹 서버에서 특정 URL을 통해 접근할 수 있는 서버의 특정 기능이나 자원을 나타내는 용어로 사용됩니다. 예를 들어, API(Application Programming Interface) 서버는 다양한 엔드포인트를 제공하여 외부 프로그램이 데이터를 조회하거나 변경할 수 있도록 합니다._
-
-_API 엔드포인트는 보통 특정 URL 경로와 연결되며, HTTP 요청 메소드(GET, POST, PUT, DELETE 등)를 통해 특정 작업을 수행합니다. 각 엔드포인트는 특정 작업에 대한 접점 역할을 하며, 예를 들어 사용자 정보를 얻기 위한 엔드포인트, 물품 목록을 조회하기 위한 엔드포인트 등 다양하게 구성될 수 있습니다. - 옮긴이)_
-
 [Mirage](https://miragejs.com/)에 대해 들어보셨을 수 있는데, 많은 부분에서 비슷한 일을 합니다. 그러나 (현재로서는) mirage는 클라이언트에서 서비스 워커를 사용하지 않으며, msw를 설치했는지 여부에 관계없이 네트워크 탭이 동일하게 작동한다는 점이 마음에 듭니다. 그 차이점에 대해 더 알아보세요.
 
 ```jsx
@@ -270,12 +250,6 @@ fetch 모킹보다 이 방법이 더 만족스러운 이유는 다음과 같습
 
 우선, 중요하고 테스트에 특유한 요소들만 코로케이션하는 것이 좋습니다. 모든 설정을 각 테스트마다 중복해서 가질 필요는 없습니다. 유일한 부분만 필요합니다. 그래서 "성공 경로"에 해당하는 것들은 일반적으로 설정 파일에 포함시켜 테스트 자체에서는 제거하는 것이 더 낫습니다. 그렇지 않으면 너무 많은 잡음이 생겨 실제로 무엇이 테스트되고 있는지 분리하기 어렵습니다.
 
-_(코로케이션(Colocation)은 프로그래밍과 소프트웨어 개발에서 관련된 코드나 구성 요소를 물리적으로 또는 논리적으로 가까운 위치에 배치하는 방식을 말합니다. 이 개념은 여러 컨텍스트에서 다양하게 적용될 수 있지만, 주로 관련된 파일, 데이터, 함수 등을 서로 가까이 배치하여 개발의 효율성을 높이고, 유지보수를 용이하게 하며, 오류 발생 가능성을 줄이는 데 목적이 있습니다._
-
-_예를 들어, 웹 개발에서는 관련된 CSS, JavaScript, HTML 파일을 같은 디렉토리 내에 배치하거나, 컴포넌트 기반 아키텍처에서는 특정 컴포넌트의 로직과 스타일을 한 파일에 모아 관리할 수 있습니다. 이렇게 하면 개발자가 필요한 정보를 빠르게 찾고, 변경 사항을 적용하기 쉬워지며, 프로젝트의 구조를 더욱 명확하게 이해할 수 있습니다._
-
-_코로케이션은 코드의 가독성과 재사용성을 향상시키고, 개발 과정에서 의존성 관리를 용이하게 하며, 팀원 간의 협업을 더욱 효율적으로 만들어 줄 수 있습니다. 또한, 오류 발견과 디버깅 시간을 단축시키는 이점도 제공합니다. - 옮긴이)_
-
 그렇다면 엣지 케이스와 오류에 대해서는 어떨까요? 이 경우, MSW는 테스트 중에 추가적인 서버 핸들러를 런타임에 추가할 수 있는 기능을 제공하며, 서버를 원래의 핸들러로 재설정하여 (런타임 핸들러를 효과적으로 제거하여) 테스트 격리를 유지합니다. 예를 들어 다음과 같습니다:
 
 ```jsx

May/study/stop-mocking-fetch.md

@@ -0,0 +1,23 @@
+**Fetch 모킹의 문제점**
+
+1. **중복되는 백엔드 구현:** fetch를 모킹하면 테스트 곳곳에서 백엔드의 기능을 재구현해야 한다. 이는 중복 작업을 초래하고 테스트의 복잡성을 증가시킨다.
+2. **테스트와 서버 코드의 분리:** 클라이언트와 서버 사이의 상호작용을 모킹함으로써 실제 서버의 동작과 테스트가 분리되어, 테스트가 실제 환경을 제대로 반영하지 못할 수 있다.
+3. **구현 세부사항으로부터의 격리:** 모킹은 구현 세부사항으로부터 테스트를 격리시키지만, 이로 인해 실제 사용 시 발생할 수 있는 문제를 놓칠 위험이 있다.
+
+**MSW 사용의 필요성**
+
+1. **실제 서버 행동 모사:** msw(Mock Service Worker)는 실제 서버의 동작을 모사하여 요청을 처리함으로써, 테스트가 실제와 더 가까운 환경에서 이루어질 수 있도록 한다.
+2. **테스트의 격리와 재사용성:** msw를 사용하면 테스트 중에 서버 핸들러를 쉽게 추가하거나 제거할 수 있어, 각 테스트의 독립성을 유지하면서도 필요에 따라 서버 응답을 조정할 수 있다.
+3. **개발 환경에서의 유용성:** msw는 개발 중에도 브라우저에서 동일한 서버 핸들러를 사용할 수 있어, 개발 과정에서도 일관된 테스트와 디버깅 환경을 제공한다.
+
+**엔드 포인트?**
+_(엔드포인트(endpoint)는 네트워크 상에서 통신을 위해 데이터가 전송되거나 받아지는 지점을 말합니다. 특히 웹 개발에서는 엔드포인트가 웹 서버에서 특정 URL을 통해 접근할 수 있는 서버의 특정 기능이나 자원을 나타내는 용어로 사용됩니다. 예를 들어, API(Application Programming Interface) 서버는 다양한 엔드포인트를 제공하여 외부 프로그램이 데이터를 조회하거나 변경할 수 있도록 합니다._
+
+_API 엔드포인트는 보통 특정 URL 경로와 연결되며, HTTP 요청 메소드(GET, POST, PUT, DELETE 등)를 통해 특정 작업을 수행합니다. 각 엔드포인트는 특정 작업에 대한 접점 역할을 하며, 예를 들어 사용자 정보를 얻기 위한 엔드포인트, 물품 목록을 조회하기 위한 엔드포인트 등 다양하게 구성될 수 있습니다. - 옮긴이)_
+
+**코로케이션?**
+_(코로케이션(Colocation)은 프로그래밍과 소프트웨어 개발에서 관련된 코드나 구성 요소를 물리적으로 또는 논리적으로 가까운 위치에 배치하는 방식을 말합니다. 이 개념은 여러 컨텍스트에서 다양하게 적용될 수 있지만, 주로 관련된 파일, 데이터, 함수 등을 서로 가까이 배치하여 개발의 효율성을 높이고, 유지보수를 용이하게 하며, 오류 발생 가능성을 줄이는 데 목적이 있습니다._
+
+_예를 들어, 웹 개발에서는 관련된 CSS, JavaScript, HTML 파일을 같은 디렉토리 내에 배치하거나, 컴포넌트 기반 아키텍처에서는 특정 컴포넌트의 로직과 스타일을 한 파일에 모아 관리할 수 있습니다. 이렇게 하면 개발자가 필요한 정보를 빠르게 찾고, 변경 사항을 적용하기 쉬워지며, 프로젝트의 구조를 더욱 명확하게 이해할 수 있습니다._
+
+_코로케이션은 코드의 가독성과 재사용성을 향상시키고, 개발 과정에서 의존성 관리를 용이하게 하며, 팀원 간의 협업을 더욱 효율적으로 만들어 줄 수 있습니다. 또한, 오류 발견과 디버깅 시간을 단축시키는 이점도 제공합니다. - 옮긴이)_