CRYPTO TRACKER

전에 우리는 ReactJS에서 CoinTracker를 만들어본적있다. 그것의 연장선상

Route를 위해 다음과 같이 폴더와 파일을 만들어준다.

Reset CSS

코딩을 하다보면 우리가 지정하지 않아도 홈페이지에 기본으로 지정되어있는 CSS가 있는데 우리는 이걸 일일히 찾아서 고치는게 너무나도 번거롭다.

그래서 나온게 Reset CSS인데 이 모든 기본값들을 전부 초기화시켜주는 기능이다.

전역 스타일을 처리하는 특수 Styled Component를 생성하는 helper 함수인
createGlobalStyle 함수를 만들어준다.

import { createGlobalStyle } from "styled-components";
const GlobalStyle = createGlobalStyle``

그리고 저 백틱 사이에 무엇을 넣어주냐면

https://github.com/zacanger/styled-reset/blob/master/src/index.ts

에 입력되어 있는 html부터 table까지 복사해서 넣어준다.

const GlobalStyle = createGlobalStyle`


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
  display: block;
}
/* HTML5 hidden-attribute fix for newer browsers */
*[hidden] {
    display: none;
}
body {
  line-height: 1;
}
menu, ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
`;

이렇게 말이다.

구글 폰트 사이트에 들어가서 마음에 드는 폰트도 임포트해주자

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Source+Sans+Pro:wght@300&display=swap');

그다음 밑에다가

*{
  box-sizing : border-box;
}
body {
  font-family: 'Source Sans Pro', sans-serif;
}
a{
  text-decoration: none;
}

기본값 몇개를 더 추가해주면 된다

다음은 Theme를 세팅해보자.
theme.ts로 가면 bgColor, textColor, btnColor가 있다.

https://flatuicolors.com/palette/gb

아래 사이트에서 원하는 색을 골라 설정해보자.

아 btnColor 대신 accentColor로 수정하자 그러면 오류가 뜨겠지?

그럼 styled.d.ts 파일로 가서 이름을 수정해주면 된다.

마지막으로 return 부분에

 <>
      <GlobalStyle />
      <Router />
    </>

로 넣어줄건데 저 Router는 routes 폴더에 있는 Router.tsx를 가져온거다.

fragment

그리고 <> </> 이게 뭐냐면 의미 없이 감싸는 요소로
<div>를 사용하지 않아도 되고, HTML의 DOM 구조에도 문제가 없는 유령 div다.

그리고 이번에 fetch를 다시하면서 새롭게 배운 내용인데

  useEffect(() => {
    (async () => {
      fetch("https://api.coinpaprika.com/v1/coins");
    })();
  }, []);

useEffect에서 js (async ()=>{ ~} ) ();
다음과 같이 코드를 쓰면 바로 excute된다.

근데 이거 api에서 가져오는 coin array의 수가 어마무시하게 많다

100개 까지만 가져오기위해 setCoins(json.slice(0, 100)); 라고 제한했다.

코인 로고 가져오기

              <Link to={`/:coinId`}>
                <img
                  src={`https://coinicons-api.vercel.app/${coin.symbol.toLowerCase()}`}
                />
                {coin.name} &rarr;
              </Link>

<Link>에는 여러가지 사용법이 있는데
그중에는 behinde the seen으로 데이터를 보내는 방법도 있다.