🔷 axios 모듈분리

axios Creating an instance

npm: axios

create()함수는 사용자 정의 파라메터를 포함, 새로운 axios 인스턴스를 생성하는데 쓰인다

• src/api/index.js

import axios from 'axios'

function create(baseURL, options) {
  const instance = axios.create(Object.assign({ baseURL }, options))
  return instance
}

export const boards = create('<http://localhost:5001/boards/>')

• 다른 방식의 같은코드

• board.js

  import { boards } from '.'
  
  // 목록 조회
  export function getBoards(params) {
    return boards.get('/', { params })
  }
  // 상세 조회
  export function getBoardById(boadId) {
    return boards.get(`/${boadId}`)
  }
  // 생성
  export function createBoard(data) {
    return boards.post('/', data)
  }
  // 수정
  export function updateBoard(boadId, data) {
    return boards.put(`/${boadId}`, data)
  }
  // 삭제
  export function deleteBoard(boadId) {
    return boards.delete(`/${boadId}`)
  }
  

<aside> 🧑‍💻

GET 요청의 경우

boards.get(boardId)    // O
boards.get('',boardId) // X

POST 요청의 경우

boards.POST('', data) // O
boards.POST(data)     // X

</aside>

type casting 한 부분 제거

가상의 데이터를 사용하기 위해 board를 생성할 때, id값을 문자열→숫자로 타입 캐스팅했지만, 이제 가상 데이터를 사용하지 않으니 제거!

props: true로 변경

Number → String