nextJs 4

바이낸스 api 호출하여 시가총액 50 차트 보여주기

이전 포스팅은 하나의 차트를 보여주는 역할이었는데 홈으로 들어왔을때 차트를 시가총액 순위로 코인을 나열해준다사용자가 사이트를 들어왔을때 처음 마주하는 화면인데 문제가 있었다그것은 바로 코인 데이터가 일정하지 않고 실시간이 아닌 1분 단위로 데이터를 받아오는 coingecko 를 사용하기 때문인데 이러면홈과 차트에서의 데이터가 달라 ux적 경험을 망친다고 생각이 들어 binaceApi로 api를 바꾸기로 결심했다 허나 해당 홈을 보면 데이터는 실시간으로 변동하지만 이미지를 불러오지 못해 깜빡거림 현상이 발생한다해당 호출을 막기 위해이렇게 임의로 써봤지만 그래도 404로 도배가 되었다왜 이런가 궁금해서 원인을 찾아본 결과 coin.image가 존재하지 않아서 undefined거나 잘못된 URL이라면,..

nextJs 2025.10.16

nextJs로 투자 차트 불러오기

토스 증권 같은 ui를 만들어서 사용자가 편하게 쓸 수 있도록 전시간에 만들어보았다. 하지만 차트가 이상하게 나오는 이슈가 있었고해결을 하려다 원인 인지를 못하고 공식문서를 찾던 중 https://www.tradingview.com/widget-docs/widgets/charts/advanced-chart/ Advanced Chart: Widget Code & Settings — TradingViewAdvanced Real-Time Chart Here's a free and powerful chart for you to easily embed in any website. Make it yours with a ton of different customization options.www.tradingview..

nextJs 2025.09.22

바이낸스 api로 차트 만들기

전 블로그에 바이낸스 api로 트레이딩뷰에서 제공하는lightweight-charts를 활용해 차트를 만들어보겠다 우선 활용을 위한 돔을 만들어준다.const chartContainerRef = useRef(null);const chartInstance = useRef(null);const seriesInstance = useRef | null>(null);그 후 fetch를 사용중이기 때문에 useEffect를 호출해 데이터 가공 및 차트를 만들어준다.그리고 이제 렌더링 된 화면을 보자그런데 차트가 뭔가 이상하다 다음시간에 디버깅을 해보자...

nextJs 2025.09.22

nextJs의 ErrorHandling

https://nextjs-ko.org/docs/app/building-your-application/routing/error-handling Error Handling – Nextjs 한글 문서Learn how to display expected errors and handle uncaught exceptions.nextjs-ko.org nextJs 프로젝트를 시작 하기 전 해당 글을 읽으며 이해가 안된 부분이 있었다. 'use client' // Error boundaries must be Client Components export default function GlobalError({ error, reset,}: { error: Error & { digest?: string } reset:..

nextJs 2025.09.16