타입스크립트

1\. index.tsx2\. app.tsxGlobalStyle\-Reset CSShttps://github.com/zacanger/styled-reset/blob/master/src/index.ts\-Source Sans Pro 폰트@import url('h

메인 페이지 Coins.tsx /상세 페이지 Coin.tsxCoins.tsx 코드 최초 렌더링 시 데이터 정보 fetch 해옴data 예시

Coins.tsxCoin.tsxuseParamsRouter.tsx에서 저장한 형식대로 url 파라미터 정보 사용가능Router.tsxCoin.tsx형태로 사용 가능

Coin.tsx에서 코인 정보와 가격 정보 받기api 사용 받아온 json -> type 변환 \*개별 타입 중 object인 경우 한번 더 변환 https://app.quicktype.io/?l=ts http://json2ts.com/ 1

Nested Route 설정 = 자식 Route들을 부모 element의 Outlet으로 위치 지정 http://localhost:3000/btc-bitcoin/price http://localhost:3000/btc-bitcoin/chart * Coin.tsx*

react-query 사용 이전 Coins.tsxreact-query 적용 이후 Coin.tsx api.ts 파일에 fetch함수 생성export async function fetchCoins() { return await (await fetch("https&#x3A

react-query 적용 이전 Coin.tsx react-query 적용 이후 Coin.tsx \-isLoading, data 중복 방지 -> isLoading : infoLoading / isLoading:tickersLoading \-useQuery 두 번째

useEffect(() => { (async () => { const infoData = await ( await fetch(https://api.coinpaprika.com/v1/coins/${coinId}) ).json(); const priceData = await ( await fe...

react-hook-form 적용 handleSubmit -첫번째 인자(필수): 데이터가 유효할 때 호출되는 함수 -두번째 인자(필수X): 데이터가 유효하지 않을 때 호출되는 함수 input 유효성 검사 - formState으로 에러메세지 출력 setError

전체 구조1.Nav (scroll)animation<Nav variants={navVariants} animate={navAnimation} initial={"top"}>2.메뉴 선택시 빨간 동그라미3.검색 아이콘 클릭시 라우터