Next에서 MSW

MSW를 사용하는 이유..

현재 우리 회사에는 FE 개발자인 Dominick(나), BE 개발자이신 Kevin 이렇게 두명이 있다. 거기에 이 두명이서 관리하는 프로젝트가 5개가 있다.
여기서 이번에 프로젝트를 진행하기로 했는데 해당 프로젝트는 다음과 같다.

• 외주를 통해 PHP로 개발된 협회 페이지 리뉴얼
  • 나와 Kevin은 둘 다 PHP 코드에 대해 익숙하지 않다.
  • 우리 프로젝트의 대부분은 typeScript로 이뤄져 있다.
  • Angular를 학습하기에 리소스가 충분하지 않은 상황이다.

위와 같은 상황으로 인해 우리는 typeScript를 사용하여 NextJs로 프로젝트를 진행하기로 했다.
먼저 협회에서 사용하는 기능에 대해 파악을 전체적으로 진행했고, 파일 구조를 잡았다. 이제 개발에 들어가려고 하는데, 다른 프로젝트에서 서버단에서 오류가 나면서 BE 개발이 지연되는 상황에 쳐했다. 나는 해당 부분을 ClubStudy에서 프로젝트를 진행하면서 겪었고, 그 문제를 해결하기 위해 MSW를 협회 사이트에 적용시키려 했다.

하지만 인간은 망각의 동물이라 했나.... ClubStudy를 진행할 때 Next -> React로 마이그레이션한 이유를 까먹고있었다.

Next 안녕
https://velog.io/@0_right/TIL-23.03.13

저때는 나도 개발을 시작한지 초창기였고, 리서칭이나 해결하는 방법이 무식했던 것 같다. 이번에는 달라졌다는 것을 느낄 수 있게 한번 해결해보려고 했다.

문제점

• NEXT는 CORS에러 해결을 위해 rewrite()이라는 기능을 이용해서 API 주소를 숨겨서 해결할 수 있는데, 나도 해당 기능을 사용하고 있었다.

• 해당 기능을 통해서 우리의 코드를 보면 아래의 순서대로 이뤄진다.

   1. <FE url>/api/v1/rfidGet 호출
   2. Next reWrite()
   3. <BE url>/api/v1/rfidGet 호출
   4. FE에 <BE url>/api/v1/rfidGet return
   4. 브라우저에 <BE url>/api/v1/rfidGet return

• 같은 API를 호출하더라도 환경에 따라서 브라우저 환경에서는 로 로컬 환경에서는 로 호출하기에 위와같은 에러가 발생했다.

• 해당 부분을 해결한 다른 분의 코드를 참조했다.

  // MockRestClient는 RESTful API 작업을 Mocking하기 위한 Client
  const MockRestClient = (() => {
      // 환경(서버/클라이언트)에 따라 적절한 URL을 반환하는 함수
      const resolveURL = (url: string): string => {
          if (typeof window === "undefined") {
              // 노드 환경이면 서버 URL을 붙여서 반환한다.
              return `${서버주소}${url}`;
          }
          // 클라이언트 환경이면 그대로 반환한다.
          return url;
      };
  
      // 주어진 URL이 FULL URL인지 확인하는 함수
      const isExternalUrl = (url: string): boolean => {
          return url.match(/^(https|http)/g) !== null;
      };
  
      // Mocking API URL을 정재하여 반환하는 함수
      const getMockApiUrl = (url: string): string => {
          // 외부 URL이면 그대로 반환하고 아니면 Mocking API URL로 변환하여 반환한다.
          return isExternalUrl(url) ? url : resolveURL(url);
      };
  
      // Mocking API를 위한 Client
      const _mockRestClient: IMockRestClient = {
          get: (url, resolver) => rest.get(getMockApiUrl(url), resolver),
          post: (url, resolver) => rest.post(getMockApiUrl(url), resolver),
          put: (url, resolver) => rest.put(getMockApiUrl(url), resolver),
          patch: (url, resolver) => rest.patch(getMockApiUrl(url), resolver),
          delete: (url, resolver) => rest.delete(getMockApiUrl(url), resolver),
          options: (url, resolver) => rest.options(getMockApiUrl(url), resolver),
      };
  
      return _mockRestClient;
  })();

  • local 환경일 때는 을 반환하고, 브라우저 환겨일 경우에는 을 반환하도록 설정했다.
  • 해당 부분을 해결한 뒤 현재는 프로젝트가 잘 마무리 되어서 현재 LIVE 되었다!!