TypeScriptSTUDY _ 7장 . 비동기 호출 [ 7.4 API 모킹 ]

zeroha·2024년 12월 18일

우아한 타입스크립트 with 리액트 우아한 테크

TypeScriptStudy

목록 보기

23/32

7.4 API 모킹

프론트엔드 개발이 서버 개발보다 먼저 이루어지거나 서버와 프론트엔드 개발이 동시에 이루어지는 경우가 더 많음.

이러한 상황에 프론트엔드 개발을 어떻게 진행? : 모킹 Mocking 활용하기~

: 가짜 모듈을 활용하는 것.
: 모킹은 테스트할 때, 개발 할 때 다 사용 가능
: dev 서버 불안정 or AWS 등에 문제 생겼을 때 서버의 영향 받지 않고 개발 가능.
: 이외에도 이슈 발생 시, charles 등의 도구 활용 -> 응답 값을 그대로 복사하여 이슈 발생 상황을 재현하는 데 도움이 됨.
: 다양한 예외 케이스의응답을 편하게 테스트 가능

.
.
.

1. JSON 파일 불러오기

간단한 조회만 필요한 경우 .json 파일을 만들거나 자바스크립트 파일 안에 JSON 형식의 정보를 저장, export해주는 방식을 사용

이후, GET 요청에 파일 경로를 삽입 -> 조회 응답으로 원하는 값 받을 수 있음.

별도의 환결설정 필요 x -> 쉽게 구현 가능.
but, 실제 API URL로 요청하는 것이 아니기 때문에 추후에 요청 경로 바꿔야 함.

2. NextApiHandler 활용하기

Next.js 사용할 때 NextApiHandler 활용가능.

: 하나의 파일 안에 하나의 핸들러를 default export로 구현
-> 파일의 경로가 요청 경로가 됨.

: 핸들러를 정의하는 건 간단 -> 응답하고자 하는 값을 정의하고 핸들러 안에서 요청에 대한 응답 정의하기.( 중간과정이 필요 x )

3. API 핸들러에 분기 추가하기

요청 경로를 수정하지 않고 평소에 개발할 때 필요한 경우에만 실제 요청을 보내고 그 외에는 목업을 사용하여 개발하고 싶다면

API 요청을 훅 또는 별도 함수로 선언해준 다음 조건에 따라 목업 함수를 내보내거나 실제 요청 함수를 내보낼 수 있다.

but! 모든 API요청 함수에 if 분기문을 추가해야하므로 번거로울 수 있음.

4. axios-mock-adapter로 모킹하기

서비스 함수에 분기문이 추가되는 것을 바라지 않는다면 라이브러리 사용하기

axios-mock-adapter는 Axios 요청을 가로채서 요청에 대한 응답 값을 대신 반환.
먼저 MockAdapter 객체 생성, 해당 객체 사용 -> 모킹하기
-> mock API의 주소가 필요 x

단순히 응답 바디만 모킹 but 상태 코드, 응답 지연 시간 등 추가로 설정 가능.

다양한 HTTP 상태 코드에 대한 목업 정의 가능
API별로 지연 시간 다르게 설정 가능.

-> 이렇게 응답 처리하는 부분을 별도 함수로 구현하면 여러 mock함수에서 사용 가능.

어 근데!
axios-mock-adaptert사용시 GET뿐만 아니라, POST PUT DELETE 등 다른 HTTP 메서드에 대한 목업 작성 가능, 또한 networkError, timeoutError 등을 메서드로 제공하기 때문에 다음처럼 임의로 에러 발생시키기 가능

5. 목업 사용 여부 제어하기

로컬에서 목업 사용 &
dev / 운영 환경에서는 사용하지 않으려면 ?

-> 간단한 설정을 해주면 됨.
: 플래그 사용 -> 목업으로 개발할 때와 개발하지 않을 때 구분 가능.

- 프로덕션에서 사용하는 코드와 목업을 위한 코드를 분리할 필요 x
- 프론트엔드 코드 작성하고 요청 보낼 때 실제 엔드 포인트 쓰기 가능.
	-> 유지보수할 때도 작성해둔 목업 사용 가능.
    -> dev 서버에 문제가 생기더라도 로컬에서 진행되는 프론트엔드 개발에는 영향 x

axios-mock-adapter 사용하는 경우
: API 요청을 중간에 가로채는 것이기 때문에 실제로 API 요청을 주고받지 않는다.
API 요청의 흐름을 파악하고 싶다면
: react-query-devtools 혹은 redux test tool과 같이 별도의 도구 사용해야 함.
목업을 사용할 때 네트워크 요청을 확인하고 싶은 경우
: 네트워크에 보낸 요청을 변경해주는 Cypress같은 도구의 웹훅 사용하기