개발일지

안녕하시와요금일 한 금융 서비스 홈페이지를 크롬에서 북마크했더니서비스 로고가 아니라 특정 정치인 이미지가 보였다는 이슈가 있었습니다처음 내용을 봤을 때 저도 살짝 의아했어요북마크에 저장하는데 왜 사이트랑 상관없는 이미지가 나오지?보통 이런 일이 생기면 자연스럽게 이런 생각이 먼저 듭니다누가 사이트 코드에 이미지를 심은 건가?사이트 내부에서 뭔가 잘못 설정한 건가?혹시 해킹이나 보안 사고인가?저도 처음엔 이쪽으로 생각이 갔습니다근데 기사와 서비스 측 설명을 같이 보면서비스 내부에 이미지를 심었다기보다는브라우저가 북마크 UI에 보여줄 이미지를 고르는 과정에서 생긴 문제에 더 가까워 보였어요그래서 이번 글은 정치적인 해석보다는이번 일을 계기로 크롬 북마크와 대표 이미지가 어떻게 연결될 수 있는지를제가 이해한 ..

JavaScript를 처음 배우다 보면 다음과 같은 코드를 마주치게 된다.setTimeout(() => console.log("timeout"), 0);Promise.resolve().then(() => console.log("promise"));console.log("sync"); JavaScript는 싱글 스레드이며 기본적으로 동기적으로 실행된다고 배웠기 때문에처음 보면 이런 결과를 예상하게 된다.synctimeoutpromise 하지만 실제 실행 결과는 다음과 같다.syncpromisetimeout여기서 의문이 생긴다.setTimeout의 delay가 0인데 왜 Promise가 먼저 실행될까?이 동작을 이해하려면 JavaScript Event Loop 구조를 알아야 한다.JavaScript는 싱글 ..

포트폴리오 글을 정리하다가 문득 깨달았습니다.그동안 제가 쓴 글엔 JavaScript 자체를 정면으로 다룬 글이 없다는걸 알게됐습니당그래서 이번 글은Node.js를 처음 배울 때 가장 헷갈렸던 질문을 기준으로 정리해보려고 합니다."Node.js는 싱글 스레드인데, 왜 동시에 여러 일을 처리할까?""싱글 스레드면 느린 거 아닌가요?"처음 Node.js를 배울 때 제일 헷갈렸던 문장이 있습니다."JavaScript는 싱글 스레드다."그러면 자연스럽게 이런 생각이 따라옵니다.한 번에 한 작업만 할 수 있다?요청이 많아지면 바로 막히는 거 아닌가?그런데 왜 Node는 대규모 트래픽 처리 사례가 많지?저도 여기서 한동안 꼬였습니다.결론부터 말하면,문장이 틀린 게 아니라 해석이 반쪽짜리였던 것입니다.JS 실행은 싱..

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를 호출해 데이터 가공 및 차트를 만들어준다.그리고 이제 렌더링 된 화면을 보자그런데 차트가 뭔가 이상하다 다음시간에 디버깅을 해보자...