👨‍💻 사건

Axios Instance 분리를 하지않아 겪지 않아도될 에러를 겪었기때문에, 인스턴스 분리를 통해 BaseURL 을 설정하지않는 기본적인 실수를 배제하고자 진행하였다.

✅ 해결

1. lib/api 경로에 index.js 에는 Axios를 생성하고, BaseURL 을 설정한다.

import Axios from 'axios'

const axios = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
})

export default axios

2. lib/api 경로에 searchAPI.js 파일을 만들고 검색에 필요한 API 를 작성한다.

import axios from '.'

export const fetchSearchData = async (page, name, position) => {
  const response = await axios.get('/api/data', {
    params: {
      page: page,
      name: name,
      position: position,
    },
  })

  return response.data
}

3. Search 의 index 페이지에 인스턴스 분리를 한 API 를 불러오면서 잘 되는지 확인한다.

...
const responseData = await fetchSearchData(page, name, position)
...

💭 개선

• 이제 기본세팅이 되었으니, 세부사항을 설정해보도록 해야겠다.