Crypto tracker #1 Setup

목표!
암호화폐 추적 기능 만들기 :)

강의는 react-router-dom 5.3 버전을 사용했지만
나는 최신 router-dom 을 배우는 것이 더 낫다고 생각되어 6.4 버전으로 진행.
coinpaprika API 를 사용해서 만든다.

---

✅ Setup

• 코인 트래커 app 을 만들기 전 준비작업.

  • 1. React router-dom 설치
    • app 에 url 을 가지게 해준다. 따라 각기 다른 화면을 보여줄 수 있다
    • nested router 도 사용해준다. 한 스크린 내에 다른 router 를 가지기 위해
  • 2. React query 설치
  • 3. 메인페이지(/), 즉 코인을 리스트로 보여줄 'coins.tsx',
       내가 선택한 코인의 디테일 내용만 보여줄 'coin.tsx' 파일 두개로 기반 만들기
  • 4. react router-dom 을 사용해 router 관리해줄 'Router.tsx' 파일 생성

• router 기반 만들기

- Router.tsx

import { BrowserRouter, Routes, Route } from "react-router-dom";

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Coins />}></Route>
        <Route path="/:coinId" element={<Coin />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

• 이렇게 해줬으면, Router를 렌더링 시켜야하니 App.tsx 에 추가

- App.tsx

import Rotuer from "./Router";

function App() {
	return <Router />
}

• 그 다음!
• path="/:coinId" Router 에게 우리의 url 이 변수값을 가진다는걸 말했으니
  useParams 로 변수 값을 가져오자.

- Coin.tsx

function Coin() {
	const params = useParams(); <<<----
    ...

• 만약, 내가 '...localhost:3000/btc' 에 있을때
  console.log(params) 로그를 본다면 결과값으로 'btc'가 나와야함.
  
  
• 이렇게!
• object 에서 coinId 만 꺼내쓰자.

- Coin.tsx

function Coin() {
	const { coinId } = useParams(); <<<----
    ...

• 꺼내쓰긴 했는데, 타입스크립트가 useparams 빈 오브젝트아니냐? 며 불평을 한다.
• 그러니 타입스크립트에게 우리 url 내에 몇몇 파라미터들이 있다는걸 설명해주어야 한다.

- Coin.tsx

interface RouteParams {
  coinId: string;
}

function Coin() {
	const { coinId } = useParams() as unknown as RouteParams;
    ...

• unknown 을 작성한 이유?
  • 우선, unknown 없이 작성하니 아래와 같은 문구와 함께 계속 경고가 떴다;;

    "'Readonly<Params>' 형식을 'RouteParams' 형식으로 변환한 작업은 실수일 수 있습니다. 두 형식이 서로 충분히 겹치지 않기 때문입니다. 의도적으로 변환한 경우에는 먼저 'unknown'으로 식을 변환합니다.
    'coinId' 속성이 'Readonly<Params>' 형식에 없지만 'RouteParams' 형식에서 필수입니다.ts(2352)"

  • 왜 unknown 을 작성하라는걸까? 찾아보니,

unknown 은 Typescript의 탑 타입(Top Type)입니다. 따라서 Typescript에 있는 모든 타입을 포함하여 어느 값이든 가질 수 있습니다.
unknown 을 사용하는 것은 컴파일러에게 "이 변수는 어떤 타입이될지몰라 너가 추론해줘" 라고 이야기해주는 것과 같습니다.

✅ Styles Setup

• 1. css 초기화 작업
  • 전역 스타일을 처리하는 특수 Styled Component를 생성하는 helper 함수
    createGlobalStyle 를 사용
  • 스타일 컴포넌트를 만드는데, 렌더링 될 때 전역 스코프에 스타일들을 적용시켜준다.
  • https://github.com/zacanger/styled-reset/blob/master/src/index.ts

const globalStyle = crateGlobalStyle`
	  ...css reset...
`;

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

• fragment 안에 넣어준다.!
• 그리고 자주 사용될 background color, font color, btn color 를 가지고있을 theme 도 만들어주자

- theme.ts
  
import { DefaultTheme } from "styled-components";

export const theme: DefaultTheme = {
  bgColor: "#191e36",
  textColor: "#f5f6fa",
  accentColor: "#fcff9d",
};

• theme도 다 설정하였으니, 사용하자.

- index.tsx
  
import { ThemeProvider } from "styled-components";
import App from "./App";
import { theme } from "./theme";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
);

• 설정한 theme 은 themeprovider에 의해 주어졌고,
  그 안에 컴포넌트가 존재하므로
  즉, App 은 theme 에 접근할 수 있다는 말!
  예시로, 아래처럼 사용할 수 있다

const Title = styled.h1`
	color: ${props => props.theme.accentColor};
`;

• 기초 기반을 다졌으니, 이제 진짜 만들러 가보자!

---

• 참고글 : https://velog.io/@soryeongk/ReactRouterDomV6
• createGlobalStyle : https://styled-components.com/docs/api#createglobalstyle