개발일지

Expo Router를 쓰다 보면 자연스럽게 Link 컴포넌트와 useRouter() 훅을 자주 보게 된다.겉보기엔 완전히 다른 방식처럼 보이지만, 실제 내부 구현을 따라가 보면 둘이 결국 같은 로직을 공유하고 있다는 사실을 확인할 수 있다.이 글에서는 그 흐름을 코드 레벨에서 직접 따라가 보면서 정리해보려고 한다.1. Link 컴포넌트의 내부로 들어가보자먼저 출발점은 Link 컴포넌트.👉 코드 위치expo-router/link/Link.tsx — 80번째 줄https://github.com/expo/router/blob/main/packages/expo-router/src/link/Link.tsx#L80여기서 중요한 부분은 useLinkToPathProps라는 훅을 호출한다는 점이다: 그럼 자연스럽게..

ssr 환경에서 동적라우팅을 하여 params 정보를 받아오고 있었습니다 기존에는 잘 몰라서 'use client'로 useParams() 훅을 사용했는데 ssr 환경에서 사용해보고 싶어졌습니다그런데 당시 밑에 에러를 주기 시작했어요Error: Route "/stock/[stockId]" used params.stockId. params should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at StockPage (src/app/stock/[stockId]/page.tsx:8:26) Error: Route "/stock/[stockId]" used `para..

rn 개발자는 아니지만 어찌저찌 회사에서 rn 개발까지 하게됐다 요구 사항은 녹음 기능 인데 기존엔 native-av 이런걸로 했나보다 근데 현재는 expo-audio 를 활용해 녹음 기능을 권장하는것으로 보인다하지만 audio 도입하고 기존에 잘 돼던 친구들이 갑자기 빌드 실패로 인해 돌아갔다 문제는 환경설정 이었다 바로 window 환경설정을 했다 해당 프로그램을 들어가서 환경 변수(N) 을 눌러주고여기서 수정한다음 터미널을 새로 시작하고 캐시를 지워주면 된다

이번 글은 IP 주소 클래스와 공인/사설 IP 개념을 한 번에 정리해보려고 합니다비전공자 분들도 “아 이게 그런 거였구나” 하실 수 있도록 쉽게 풀어볼게요. 글 중 오류가 있는 부분은 댓글로 말씀 부탁드려요!문제인터넷을 하다 보면 IP 주소라는 말이 많습니다근데 막상 보면 192.168.0.1, 10.0.0.1, 203.252.1.10 이런 숫자들만 덩그러니 있고대체 이게 뭔지, 어디서 쓰는 건지 헷갈리기 마련이에요.저도 처음에는“이 숫자들이 그냥 ip구나 하고 어떻게 생기는지 몰랐습니다…”사실 이 숫자 안에 주소 체계, 구역, 용도가 다 들어 있습니다.IP 주소란?인터넷 세상의 집 주소입니다 🏠IP 주소는 인터넷에 연결된 기기를 구분하기 위한 고유한 주소예요.예를 들어 192.168.0.1은 “192..

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

토스 증권 같은 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..

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

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:..

이번 글은 사이드 이펙트로 인하여 refetch에 관한 문제를 다뤄보려고 합니다문제이게 pull 받고 난 후 상황인디여refetch를 컴포넌트 본문에서 호출하다 보니, 리렌더링이 일어날 때마다 서버에 요청이 쏟아졌습니다. 이렇게 결과는버튼 하나만 눌러도 네트워크 탭에 수십 개의 요청이 찍히고,서버는 불필요한 트래픽으로 과부하가 걸렸습니다.화면도 계속 깜빡이면서 UX가 완전히 망가졌습니다.왜 이런 문제가 생길까?핵심은 React의 컴포넌트 렌더링 방식 때문입니다.React 컴포넌트는 상태나 props가 바뀌면 리렌더링 됩니다.리렌더링될 때마다 함수 본문이 다시 실행됩니다.그런데 그 안에서 refetch()를 호출하면?→ 렌더링 = 네트워크 요청 이 되게 됩니다즉, refetch는 조건부로 실행되어야 하는 ..

“React에서 컴포넌트의 생명주기는 크게 마운트(Mount), 업데이트(Update), **언마운트(Unmount)**의 세 가지 단계로 나뉘고, 이 생명주기 각각에 대응하는 작업을 함수형 컴포넌트에서는 Hooks를 통해 수행합니다.”1. 마운트(Mount) 단계이 단계에서는 컴포넌트가 DOM에 처음 렌더링됩니다.클래스 컴포넌트에서는 constructor → render → componentDidMount 순으로 실행됩니다.함수형 컴포넌트에서는 useEffect를 사용하고, 의존성 배열을 빈 배열([]) 로 설정하면 componentDidMount처럼 한 번만 실행됩니다.useEffect(() => { console.log("컴포넌트가 마운트되었습니다."); // 초기 데이터 요청 등}, []);2..