암호화폐 순위 1위 부터 100위까지의 시세를 조회할 수 있는 사이트입니다.
coinpaprika API를 활용하여 제작하였습니다.
2022.11.01 ~ 2022.11.12
2023.01.25 ~ 2023.01.26
import { lightTheme, darkTheme } from "./theme";
function Root() {
const isDark = useRecoilValue(darkState);
return (
<ThemeProvider theme={isDark ? darkTheme : lightTheme}>
<GlobalStyle />
<Header />
<Outlet />
<ModeToggle />
</ThemeProvider>
);
}위 코드는 ThemeProvider 를 통해 하위 컴포넌트에 상태를 넘겨주는 코드입니다.
Styled Component 의 ThemeProvider 를 이용하여 다크모드와 라이트 모드를 구현하였습니다.
Recoil 를 사용하여 현재 다크모드인지, 라이트모드인지에 대한 상태관리를 하였습니다.
// styled.d.ts
import "styled-components";
declare module "styled-components" {
export interface DefaultTheme {
bgColor: string;
textColor: string;
accentColor: string;
containerColor: string;
containerFocusColor: string;
overviewBgColor: string;
}
}다크모드, 라이트 모드일 때 변화는 CSS 속성에 대한 내용을 styled-components 에서 prop 이라는 객체로 활용하게되는데,
Typescript 로 개발했기 때문에 이 prop 에 대한 타입 정의가 필요하였습니다.
위 styled.d.ts 파일을 생성하고 DefaultTheme 이라는 Interface를 생성하여 styled-components 에 추가함으로써 타입을 지정해줄 수 있었습니다.
media query 를 기반으로 만들어진 Hook 라이브러리인 react-responsive를 활용하여 구현하였습니다.
// 스타일 컴포넌트의 prop으로 받은 isMobile 값에 따라 모바일에 따른 CSS를 적용할지, PC에 따른 CSS를 적용할 것인지 설정
const Img = styled.img<IWithMediaQuery>`
width: ${({ isMobile }) => (isMobile ? "300px" : "400px")};
min-width: 150px;
animation: ${floating} 1.8s infinite ease-in-out alternate;
`;
function Home() {
// useMediaQuery Hook을 이용하여 모바일인지를 체크
const isMobile = useMediaQuery({
query: "(max-width:767px)",
});
//... 생략
// isMobile 값을 prop으로 각 스타일 컴포넌트로 넘김
return (
<>
<Container isMobile={isMobile}>
<Title isMobile={isMobile}>
암호화폐를 구매하기 전에,
<br />
먼저 자세한 시세를 조회해보세요!
<Btn onClick={onClick}>시세 조회 →</Btn>
</Title>
<Img isMobile={isMobile} src="/coin-tracker/homepage.png" />
</Container>
</>
);
}사용자가 클릭하여 들어온 암호화폐에 대한 설명, 순위, 공급량, 시가총액, 현재가격, 어제 대비 증감 정보를 한눈에 알 수 있도록 구현하였습니다.
현재 암호화폐의 시세 변동을 캔들 차트로 조회할 수 있도록 만들었습니다.
차트 라이브러리는 ApexChart 를 사용하였습니다.
현재 암호화폐의 순위와 시세의 증감 변동을 시기 별로 조회할 수 있습니다.
-
React와TypeScript를 사용하여 타입 안정성을 높이고,API등을 활용함에 있어 자동완성 기능을 사용할 수 있게 되어 효율적으로 코드를 작성할 수 있게 되었다. -
react-router-dom을 통해 route를 navigate하는 방법을 배우고,nested route를 구현할 수 있게 되었다.
특히react-router-dom v6의CreateBrowserRouter를 활용하는 방법을 배울 수 있고outlet컴포넌트를 통해 쉽게nested route를 구현할 수 있게 되었다. -
Styled-Components를 통해 컴포넌트 단위 별 CSS를 적용하는 방법을 알 수 있었다. -
React-Query를 통해 fetching한 데이터를 효율적으로 관리하고 캐싱하여 사용자가 데이터를 로드하는 시간을 줄일 수 있었다.