전체 글 썸네일형 리스트형 빗썸 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.. 더보기 themeProvider 모든 컴포넌트를 감싸는 최상위 컴포넌트로 ThemeProvider 컴포넌트를 사용하며, 앞에서 정의한 색을 ThemeProvider 컴포넌트의 스타일드 컴포넌트를 이용할 때 theme를 전달받아 미리 정의된 색을 이용할 수 있습니다. 스타일드 컴포넌트의 ThemeProvider는 Context API를 활용해 애플리케이션 전체에서 스타일드 컴포넌트를 이용할 때 미리 정의한 값을 사용할 수 있도록 있도록 props로 전달합니다. https://velog.io/@cmk0905/Styled-Components-ThemeProvider theme 안에는 '객체' 형태로 넣어줘야 한다. 더 공부 !! + chirdren props + globalstyles.js 추가 https://bigstar-vlog.tist.. 더보기 터미널 명령어로 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 다음
