[Next.js] rewrites로 CORS 해결하기

요즘 좀 여유가 생겨서 부트캠프 최종 프로젝트로 만들었던 분양모음집을 약 7개월 만에 리팩토링하기로 했다. 예전부터 수정하고 싶었던 아파트 매매 실거래가 API를 현재 날짜에 따라 최신 데이터를 가져오는 부분부터 시작해 보기로 했다.

문제 상황

항목명(영문)	항목명(국문)	샘플 데이터	항목설명
serviceKey	인증키	인증키(URL Encode)	공공데이터포털에서 발급받은 인증키
pageNo	페이지번호	1	페이지번호
numOfRows	한 페이지 결과 수	10	한 페이지 결과 수
LAWD_CD	지역코드	11110	각 지역별 법정동코드 10자리 중 앞 5자리
DEAL_YMD	계약월	201512	실거래 자료의 계약년월(6자리)

• 국토교통부에서 제공하는 아파트매매 실거래 상세 자료 오픈 API의 Request Parameter다.
• 지역코드와 계약월을 현재 조회 중인 분양 공고와 오늘 날짜에 맞춰 동적으로 전달해야 한다.
• 계약월은 한 달 간의 데이터만 요청할 수 있기 때문에 오늘 날짜를 기준으로 지난 달의 데이터를 요청하기로 했다. (만약에 오늘이 2023년 11월 13일이라면 2023년 10월의 데이터를 요청)

// next.config.js
module.exports = {  
	async rewrites() {
      return [
        {
          source: '/api/APTRealPrice/:id',
          destination: `http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTradeDev?numOfRows=1000&LAWD_CD=:id&DEAL_YMD=202305&serviceKey=${SERVICE_KEY}`,
        },
      ];
    },
}

• API를 호출하는데 CORS 에러가 발생해서 요청 경로를 다른 목적지의 경로로 매핑해주는 Next.js의 rewrites 기능을 사용해서 에러를 해결했다.
• source의 엔드포인트로 실제 API를 호출하는데 지역코드와 계약월을 파라미터로 전달해야 했다.
• 지역코드를 전달하기 위해 source의 requset path에서 /:id를 전달받고 이를 destination에 &LAWD_CD=:id로 매핑해서 사용했다.
• 그런데 계약월의 경우에 source의 requset path에 여러 개의 파라미터를 전달할 수 있는지 확인이 되지 않아서 일단 &DEAL_YMD=202305와 같이 파라미터를 직접 전달하는 방식을 사용했다.
• 하지만 &DEAL_YMD=202305의 코드를 202306, 202307과 같이 매달 직접 수정하기가 너무 번거로웠기 때문에 언젠가 이 부분을 꼭 리팩토링해보겠다는 계획을 세웠었다.

해결 과정

source에 여러 개의 파라미터 전달하기

// next.config.js
module.exports = {  
	async rewrites() {
      return [
        {
          source: '/api/APTRealPrice/:id/:contractMonth',
          destination: `http://openapi.molit.go.kr/OpenAPI_ToolInstallPackage/service/rest/RTMSOBJSvc/getRTMSDataSvcAptTradeDev?numOfRows=1000&LAWD_CD=:id&DEAL_YMD=:contractMonth&serviceKey=${SERVICE_KEY}`,
        },
      ];
    },
}

• API를 호출할 때 기존에 받았던 /:id 파라미터 외에 계약월까지 함께 동적으로 전달하기 위해 source의 requset path에 /:contractMonth를 추가했다.
• destination에서 &DEAL_YMD=:contractMonth를 전달 받아 API를 호출할 때 request parameter로 사용한다.

사실 source에서 전달하는 변수는 path variable이라고 표현하는 게 맞지 않나 의문이 들지만 Next.js 공식 문서에서 parameter라고 표현하고 있기 때문에 이를 따른다.

API 호출할 때

const getAPTRealPriceList = async (id: string, contractMonth: string) => {
  const data = await axios
    .get(`/api/APTRealPrice/${id}/${contractMonth}`)
    .then((res) => res.data.response.body.items.item);
  return data;
};

const { data } = useQuery(
  'APTRealPriceList',
  () => getAPTRealPriceList(LAWD_CD, previousMonth)
);

• API를 호출할 때 엔드포인트에 지역코드와 계약월을 path variable로 전달한다.
• 결과적으로 사용자가 현재 조회 중인 분양 공고의 지역코드와 오늘 날짜를 기준으로 지난 달의 데이터를 불러오는 것을 확인할 수 있다.
  

Refernece

https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites#rewrite-parameters