#5.0-1. CRYPTO TRACKER - Setup & styles

본 포스팅은 노마드코더 ReactJs 마스터 클래스를 수강한 뒤 작성되었습니다.

github 링크 - Crypto-Tracker

#5.0 Setup

(1) coinpaprika라는 API를 사용함

-> 암호화폐에 대한 多 정보를 줌
ex) 코인들에 관한 정보, 코인 가격...

https://coinpaprika.com/ko/

(2) React Query 패키지 사용

-> 편리한 방식으로 데이터 fetch 가능

https://tech.kakaopay.com/post/react-query-1/

프로젝트 생성을 위한 단계

(1) npx create-react-app my-app --template typescript
(2) npm install styled-components
(3) npm install @types/styled-components
(4) npm i react-router-dom@5.3.0
(5) npm i react-query
(6) npm i --save-dev @types/react-router-dom

화면 구성 설명

/ -> All coins 모든 화폐를 보여주기
/:id -> /btx -> Coin Deatil 코인 상세정보 보여주기

+) Nested Router : 하나의 스크린 내에 또 다른 Router를 가지는 것 (ex. /btc/information)

Switch (Router.tsx)

Switch : 한 번에 하나의 Route를 렌더링할 수 있는 방법

#5.1 Styles

Reset CSS 파일을 가지고, 기존 초기 세팅을 모두 지운다.

(0) font 설정

https://fonts.google.com/
해당 사이트로 가서, 원하는 폰트 선택후 import 구문 가져오기

(1) createGlobalStyle

: 하나의 컴포넌트를 만들어주는데, 렌더링 될때, 그 컴포넌트는 전역 영역에 스타일들을 올려줌
https://github.com/zacanger/styled-reset/blob/master/src/index.ts

Fragment : 일종의 유령 컴포넌트
-> 우리에게 부모 없이 서로 붙어있는 多것들을 return할 수 있게 해줌

return  (
  <>
    <GlobalStyle />
    <Router />;
  </>
)

App.tsx에 다음과 같이 작성하여 사용한다.

import { createGlobalStyle } from 'styled-components';
import Router from './Router';

const GlobalStyle = createGlobalStyle`
  body {
    color:red;
  }
`;

function App() {
  return  (
    <>
      <GlobalStyle />
      <Router />;
    </>
  )
}

export default App;

이렇게 하면, GolbalStyle안에 有는 스타일대로 우리의 파일 모든 곳에 다 적용이 되는거야.
이 경우에는 모든 글자가 red가 되겠지!!

BUT! 우리는 초기 세팅을 하고 싶은거니까 아래 내용을 복사해서 붙여넣을거야.

❗ ❗ 이걸 넣는거지!

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 { createGlobalStyle } from 'styled-components';
import Router from './Router';

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;
}
`;

function App() {
  return  (
    <>
      <GlobalStyle />
      <Router />;
    </>
  )
}

export default App;