발단 : api가 개발은 됐는데 서버이슈로 요청을 못받는 경우엔 어떡해야할까

<aside>

→ MSW, PostMan을 이용한 방법이 있지만 우리는 두 가지 상황을 고려해야 했다.

• 이미 연결 검증된 API들 이미 카카오 클라우드를 통해 배포된 서버를 통해 연결한 api가 연결되었는데 굳이 목 서버를 열어 빌드 크기를 늘릴 필요도 없고(프론트 배포 함)
• 추가로, 아직 나를 포함한 팀원들이 Next에 능숙한 편이 아닌 터에 새로운 기술을 배우면서 api 까지 미리 만든다? 적응하는 차에 api가 나올 것 같았다.
• MSW는 요청을 가로채 응답 상태, 오류 상태에 따른 시뮬레이션에 유리한데 우리는 단순 연결을 최대한 많이 미리 끝내는게 목표에 더 가까워서 MSW에 구미가 당기지도 않았음
• 따라서 우리가 필요한건 짧은 시일내에 실제 api가 왔을 때의 로직 구현 + 실제 api 적용 전후로의 거의 무방한 차이 이 두 가지가 중요 포인트 이기에 Next.js API Routing을 통한 Mock 데이터 응답을 선택하게 되었다.
• 추가로 언제 문제가 생겨도 mock api를 적용해 다른 기능을 곧바로 테스트 할 수 있으니, 편리성이나 접근성면에서도 우리 요구사항이랑 찰떡궁합이었다 </aside>

<aside>

Next JS의 app routing을 이용한 mock api를 적용시키기로했다. 전체적인 과정은 아래

1. 일단 우리팀이 api 요청하는 방식은 다음과 같음 특정 컴포넌트에서 넥스트 서버 / 로 api요청을 함 api routing 폴더로 요청이 감
2. api route를 통해 handler로 method에 맞는 요청이 가게되고, 해당 파일에선 실 서버로의 요청을 진행
3. 서버로의 요청에 대한 응답을 받은 경우 1→2→3 과정을 거꾸로 해 요청한 컴포넌트까지에게 전달함.
4. 우린 2→3에서의 과정에서 문제가 생긴거니까 이 과정을 생략한다 how?
5. api route에서 우리가 임의로 정한 응답을 주면 된다. 바로 알아보자.

</aside>

예시) 추천게시물 요청 mock api 적용

→ 보다시피 api 연결이 안되기에 mock데이터인 RECOMMEND_ARTICLES 와 카테고리의 경우 깡 text를 넣어 보여주고있음 아직 api를 통해 데이터를 받아오는 로직이 없는 상황

1. 가장 먼저 해당 컴포넌트가 렌더링 될 경우 데이터를 받아오도록 하는 로직을 넣자

• 다음과 같이 useEffect로 api폴더의 recommend로 요청해서 setState하는 함수를 추가
• 그리고 기존의 mockData가 default로 들어있던 state의 배열은 []로 변경
• 이에따라 line 46에선 문제가 발생 기존 같은 경우 mock데이터를 집어넣기에 놓쳤을 빈 배열 문제를 마주할 수 있게됨 → 빈 배열(결과가 없는경우)에 대한 처리로직을 생각.
• 그럼 이제 api 폴더로 가보자 원래의 경우 getRecommendPost 를 통해 api요청을 해 응답받아 처리했겠지만 지금은 api가 없다 우리가 mock데이터를 응답해주자

import { NextResponse } from 'next/server';

export async function GET(req: Request) {
  const data = await getRecommendPost(req);
  return NextResponse.json(data);
}

• mock데이터를 넣기 전 데이터가 어떤 형식으로 오는지 확인