- 이번에는 리덕스를 사용하는 토이 프로젝트를 진행하기로 하였다.
- 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/
🙌🙌🙌🙌