코인잼 리팩토링 하기 -1부-

뚝딱뚝딱 리팩토링

 

코인잼을 만들고있는데 기초적인 토대는 구현을했다.

 

전반적인 코드 퀄리티를 높이기위해 리팩토링을 하였다.

업데이트 내용

- Axios 공통 인스턴스 + 데이터 페칭 분리, 설정
- Atomic 디자인으로 파일구조 변경

 

첫번째 Axios 공통 인스턴스 만들기.

현재 Axios 요청을 3군데에서 한다. 

1. 시총 TOP 코인들 불러오기

2. 코인 검색하기

3. 최근 핫 코인 불러오기

 

이러다보니 중복되는 내용이 생겼기때문에 모듈화를 진행하였다.

 

import axios from 'axios'
const createAxiosInstance = () => {
  return axios.create()
}
export const withAxios = async (request) => {
  return await createAxiosInstance().request({
    ...request,
  })
}

우선 공통 인스턴스를 만들었다.

 

 

export const API_ROUTES = {
  COINS:
    'https://api.coingecko.com/api/v3/coins/markets?vs_currency=krw&order=market_cap_desc&per_page=20&page=1&sparkline=true',
  TRENDING: 'https://api.coingecko.com/api/v3/search/trending',
  FIND: (id) => `https://api.coingecko.com/api/v3/coins/${id}?localization=false&sparkline=true`,
}

페칭 Routes를 통합하였고

 

각 요청별로 파일을 따로 만들어 주었다.

import { withAxios } from '../utils/withAxios'
import { API_ROUTES } from '../constants/Routes'

export const getCoins = async () => {
  return await withAxios({
    url: API_ROUTES.COINS,
    method: 'GET',
  })
}

import { withAxios } from '../utils/withAxios'
import { API_ROUTES } from '../constants/Routes'

export const getFindCoin = (coinId) => {
  return withAxios({
    url: API_ROUTES.FIND(coinId),
    method: 'GET',
  })
}

import { withAxios } from '../utils/withAxios'
import { API_ROUTES } from '../constants/Routes'

export const getTrending = async () => {
  return await withAxios({
    url: API_ROUTES.TRENDING,
    method: 'GET',
  })
}

 

---

두번째  Atomic 디자인으로 컴포넌트들 분리

 

변경된 파일구조

분리 기준은

atom은 최소한의 기능을 가진 쪼매니들

molecules는 입력을 받기위한 input류

Templates에는 바로 띡 붙일수있는류들로 구성했다.

 

---

세번째

만들어둔  Atomic 디자인을 통해 중복되는 코드를 줄임, 데이터 페칭 변경

 

  const url = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=krw&order=market_cap_desc&per_page=20&page=1&sparkline=true`

  useEffect(() => {
    axios
      .get(url)
      .then((response) => {
        setCoins(response.data)
        console.log(response.data)
      })
      .catch(() => {
        alert('코인게코의 서버가 불안정합니다.')
      })
  }, [url])

 

▼ 변경후

  useEffect(() => {
    getCoins()
      .then((response) => {
        setCoins(response.data)
        console.log(response.data)
      })
      .catch(() => {
        alert('코인게코의 서버가 불안정합니다.')
      })
  }, [])

 

---

  const params = useParams();
  const url = `https://api.coingecko.com/api/v3/coins/${params.coinId}?localization=false&sparkline=true`;
  useEffect(() => {
    axios.get(url).then((response) => {
      setCoin(response.data);
    });
  }, [url]);

▼ 변경후

  const params = useParams()
  useEffect(() => {
    getFindCoin(params.coinId).then((response) => {
      setCoin(response.data)
    })
  }, [params])

 

 

다른 Home, SignIn, SignUp도 비슷하게 작업했다. 

 

그리고 Atomic디자인을 사용하면서 (구)Components 파일들을 삭제했다.