전반적으로 리덕스 관련 폴더와 일부 파일들을 제외하면 한눈에 보기 쉬운 구조로 되어 있는 것 같습니다. 특히 관련 컴포넌트들을 하나의 폴더에 모아 관리를 하면서 더 쉽게 구조를 파악할 수 있었습니다.
utils로 뽑아낼 수 있는 코드들 뽑아봤습니다.
기본적으로 api 관련 함수들은 굉장히 자주 쓰이기 때문에 미리 따로 설정을 했습니다.
axios를 이용해 기본 설정을 했습니다.
const client = axios.create()
client.defaults.baseURL = BASE_URL
// BASE_URL : <https://www.googleapis.com/books/v1/volumes>
axios를 이용해 리팩토링을 진행했습니다. url을 client.defaults.baseURL
를 이용해 구현했습니다.
export const fetchBooksAPI = (search, startIndex) => {
const { q, ...rest } = parse(search)
const input = stringifyUrl({
url: client.defaults.baseURL,
query: {
q: `${q}`,
startIndex,
projection: 'full',
...rest
}
})
return client.get(`${input}`)
}
상수로 뽑아낸 코드들을 모았습니다.
export const BASE_URL = '<https://www.googleapis.com/books/v1/volumes>'
export const FILTER_GAP = [0, 20, 20, 40]
export const SORT_GAP = [0, 20, 20]
export const BUTTON_GAP = [0, 10]
export const INIT_INDEX = 0
export const ROUTES = {
HOME: '/',
RESULT: '/result',
FILTERS: '/filters'
}
export const STATUS = {
Idle: 'idle',
Loading: 'loading',
Success: 'success',
Failure: 'failure'
}
export const FILTERINGS = [
['', '없음'],
['partial', '미리보기 가능'],
['full', '전체 공개'],
['ebooks', '전체 eBooks'],
['free-ebooks', '무료 eBooks'],
['paid-ebooks', '유료 eBooks']
]