react 썸네일형 리스트형 빗썸 open API로 코인 리스트 만들기 [코인 리스트 패칭 최적화]..2 import { useQuery } from "@tanstack/react-query";import { fetchTickerData } from "../api";import useCoinList from "./useCoinList";import { useMemo } from "react";interface Ticker { coinCode: string; price: string; changeRate: number; tradeVolume: string;}export default function useCoinTicker() { const { markets } = useCoinList(); // markets 전체 대신 coinCode 목록으로만 변경 확인. queryKey에 추가하여 marke.. 더보기 빗썸 open API로 코인 리스트 만들기 [코인 리스트 패칭 최적화]..1 사이드바에 코인 리스트를 달았다. 각기 다른 API를 사용하여1. 코인 리스트를 받아온다. 2. 각 코인의 현재가, 변동률, 거래금액(TICKER API)를 받아와3. 코인 리스트 순서에 맞게 정렬한다. 패칭의 조건은 아래와 같다. 1. coinList의 경우 리스트 정렬이 바뀔때2. 부가적인 Ticker 정보의 경우 1분이 지날때 그런데 문제는 불필요한 패칭이 일어난다는 점. 1. 1분이 지나지 않았는데도, 사이드바를 여닫을 때마다 & 정렬 변경 시마다 coinList와 coinTicker api 둘 다 새로 패칭됨2. 또한 첫 렌더링 시 ui 가 정말정말 느리다는 점!..이들을 해결해 보겠다. 아래는 기존 코드이다. import { create } from "zustand";import { f.. 더보기 터미널 명령어로 github 업로드 레포지토리 다운: cd ..(json.pakag가 있는 곳에 가서 ) git checkout -b main git pull main 새 브런치 파서 변경사항 레포에 올리기 : git checkout -b feature/react-css //feature 에 react-css 라는 브런치 생성 git add . //변경사항 모드 추가 git commit -m "feat: ~" 커밋메세지 추가 git push origin feature/react-css // 현재 작업 중인 로컬 브랜치인 "feature/react-css"를 원격 저장소(origin)로 푸시(push) 더보기 container/presenter pattern 관련 간단한 정리 contaier/presenter로 구조를 나누는 방법 1. app.js에서 최종적으로 모든 파일이 합쳐져서 보인다. pages/../index.js 에 container 컴포넌트를 import 하여 주소로 찾아간다. 2. 폴더는 크게 4가지로 나눈다. container.js - 기능 구현 파트 presenter.js - UI (return) 파트 styles.js - style 파트 queries.js - 쿼리 파트 import를 통해 하나로 합친다. export? export default? 언제 사용해야 하는가? export로 내보내는 함수, 변수 : 하나만 지정하여 import가능. export default 사용 중인 컴포넌트 함수 : 한 파일에 하나만 사용 가능. default는 하나만 가능하.. 더보기 for문 대신 react map으로 게시물 리스트 구현하기 -1 for 대신 Map 실무에서는 for문 대신 map을 사용한다. 유지보수 측면에서 훨씬 이득이기 때문. classMate.map((el) => (el +"어린이")) classMate.map((el)=>el+"어린이") 화살표 함수 내 소괄호 생략 가능 classMate.map((el)=>({name: el.name +"어린이"})) classMate.map((el)=>{name:el.name +"어린이"} 객체를 사용할 경우 ()=>{} 이런 형태가 되기 때문에 생략 불가능! 화살표 함수가 함수의 중괄호를 가르키는 꼴이 됨 //올바른 map 예제 const SOUL_FOOD = [ { number: 1, name: "돼지국밥" }, { number: 2, name: "찜닭" }, { number: 3,.. 더보기 이전 1 다음
