토이 프로젝트 후기) Space And Coin

• 이번에는 리덕스를 사용하는 토이 프로젝트를 진행하기로 하였다.
• Open API역시 사용하기로 하였고, 재밌는 Open API를 찾아 다음과 같은 API를 사용하였다.
  🍨 업비트 시세 API, NASA 우주 사진 API, 카카오(다음) 검색 API
• Chart.js를 통해 그래프를 만들었다.
• 이 웹사이트에 사용된 폰트는 순천시청의 순천체B이다.
• 저번에는 vercel을 통해 배포하였지만, 이번에는 netlify를 통해 배포하였다.

사이트 기능 소개

• NASA APOD API 에서 랜덤으로 받은 사진과 그에 대한 설명이 출력된다.

• 암호화폐 시세를 업비트로부터 받아오고, 현재 시세를 북마크에 저장할 수 있다.
  (북마크 저장시 알림이 뜬다)

• 북마크 화면으로, 여러 기능을 구현했다.

• 저장한 암호화폐 시세들을 최신순으로 확인한다.
  (북마크 삭제 시 로딩하는 동안에 잠깐이지만, 상단에 삭제 알림이 나온다)

• 저장한 시세를 종류별로 나눠 그래프를 통해 확인한다.

• 북마크한 코인과 관련된 게시글을 볼 수 있다.

시행착오

• 카카오 번역 API 기능으로, 우주 사진의 대한 설명을 한글로 번역하는 버튼을 만들었지만, 번역 기능의 하루 이용 글자 수 제한으로 생각보다 기능에 제한이 많아 빼기로 결정하였다.
  (설명이 길었기에 횟수가 빠르게 소진되었다.)
• Chart.js를 사용하여 그래프를 만들었다.
• Chart.js를 사용하여 데이터로 그래프를 그리기 위해서 useRef와 useEffect를 사용했는데, 조금 이해도가 낮은 채로 사용한 것 같다.
• 그래프에 맞는 데이터 형식으로 기존의 데이터를 가공했어야 했다.
• axios와 useEffect를 이용하여 API를 가져오는 과정에서 메모리 누수가 있었고, 로딩 화면 구현과 useEffect cleanup function을 사용하였다.
• redux를 사용한 알림 모달창을 만들었지만, 미숙한 부분이 많았다. setTimeout으로 알림을 주기적으로 비우는 방식을 사용했는데, 알림이 많이 뜨면 중간에 알림이 한 번에 사라지는 등 조금 어색하였다.
• Font Awesome을 이용하여 아이콘을 만들어 사용자가 쉽게 접근할 수 있게 하였다.
• 모달창이 점점 사라지는 것을 구현하기 위해서 animation과 @keyframes을 사용하였다.

.fadeout-modal {
    animation: fadeout 3s;
    opacity: 0;
    ... 생략
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

• 모달창이 보이지 않게 되지만 컴포넌트는 남아있었기에, 상태로 알림들을 관리하고 주기적으로 비워줌으로써 다시 화면을 렌더링하여 화면을 처음의 상태로 유지하려고 하였다.
• netlify으로 배포하면서 배포한 뒤 추가한 환경변수가 적용이 안되는 문제가 있어, 재배포를 하였고 잘 적용이 되었다.
• 컴포넌트의 가운데 정렬을 위해서 margin: 0px auto 0px auto; 와 같은 CSS를 작성하였고, 효과적이었다.

링크

🥧 깃허브 : https://github.com/citron03/Space_And_Coin
🥧 배포 사이트 : https://space-and-coin.netlify.app/