모바일 웹 서비스를 개발하다 보면 예상치 못한 복병을 만나곤 합니다. 이번에는 카카오톡 인앱 브라우저(In-App Browser)에서의 파일 다운로드 이슈였습니다. 일반 브라우저에서는 멀쩡하던 기능이 왜 카톡에서만 침묵했는지, 그 원인과 해결 과정을 정리해 봅니다.

문제 상황 (The Problem)개발 중인 서비스에서 Vimeo에 호스팅된 비영구적 비디오 URL(Signed URL)을 재생해야 하는 상황이었습니다.Chrome (PC): 정상 재생됨.Safari (Mac/iOS) 및 Chrome (iOS): 영상이 재생되지 않고

🎬 iOS Safari (및 Chrome)에서 Vimeo 영상 재생이 안 되던 이유1\. 문제 상황PC 크롬에서는 Vimeo 영상이 정상적으로 재생됨.하지만 iPhone의 Safari와 Chrome에서는 영상이 나오지 않거나 재생되지 않음.로그인 등 다른 기능은 정상

Next.js App Router로 프로젝트를 진행하면서 shadcn/ui의 Carousel 컴포넌트를 사용할 때 겪은 혼란과 그 해결 과정을 공유합니다.이렇게 코드를 작성했더니 에러가 발생했습니다:첫 번째 의문: carousel.tsx에 이미 'use client'가

프론트엔드에서 FormData로 배열을 전송할 때, 같은 프로젝트 내에서도 다양한 방식이 혼재되어 있었습니다:특히 타임라인 API에서 deleteTimelines\[]를 deleteTimelines로 변경하니 제대로 작동했는데, 왜 그런지 궁금했습니다.FormData는

브라우저: Chrome 114 (MacBook Pro M2) 프로젝트: Next.js 14 + React-Konva 기반 Canvas 에디터 측정 코드: handleTransformEnd 이벤트마다 performance.now()로 처리 시간(ms) 로깅 반복 횟

문제 상황 unno 프로젝트에서 명함을 이미지로 저장할 때, 다음과 같은 경로로 Supabase Storage에 PNG 파일을 저장하도록 설계하였다. 즉, 하나의 slug에 대해 frontimg.png, backimg.png 같은 고정된 경로에 저장되는 구조다. 정상 케이스 최초 저장 시에는 문제없이 잘 작동한다. 문제 발생 같은 slug로 다시 ...

문제 상황 unno 프로젝트에서 사용자가 이미지를 업로드하면 해당 파일은 Supabase Storage에 저장된다. 이후 명함을 새로 만들 때도 기존에 업로드한 이미지들을 재사용할 수 있도록 DB에 저장된 이미지 URL을 기반으로 캔버스(Stage)에 추가하는 구조로

🚨 문제 상황 무료 Unsplash API는 1시간당 50회 호출 제한이 있어, 다음과 같은 UX 흐름에서 빠르게 한도에 도달하는 문제가 발생했다: 🔍 검색어 입력 시 → 실시간 API 호출 📜 스크롤 이동 시 → 무한스크롤 기반 추가 호출 ⛔ 디바운싱을 적용해도 TanStack Query의 fetchNextPage와 중첩되어 호출량이 급증, ...

Konva를 이용해 캔버스 기반의 편집기를 개발하며, HTML 요소와 Canvas 요소 간의 좌표 차이 때문에 발생했던 문제점들에 대해 작성해보려고 한다. 특히 사용자가 보는 위치와 실제 Canvas에서 인지하는 위치가 달라서 예상치 못한 결과를 자주 발생하였다. 따라

최근 작업하던 브랜치에서 파일명을 대문자에서 소문자로 바꾸는 단순한 변경을 진행했다:변경 전: Header.tsx변경 후: header.tsx그런데 갑자기 GitHub Pull Request(PR)에서 예상치 못한 충돌(conflict) 이 발생했다.로컬에서 git s

Next.js 14 프로젝트에서 Konva와 react-konva를 사용하는 법을 정리하려고 한다.특히 SSR(Server Side Rendering) 환경에서 Konva를 클라이언트 전용으로 설정하는 방법과 react-konva의 버전 호환 문제를 해결해야지 자유롭게

프로젝트 구상과 초기 기술 선택 처음 프로젝트를 구상할 때 React-DnD와 React-RnD를 이용해 명함 편집 도구를 구현하는 방식을 택했다. DOM 기반의 편집 방식이 React와의 친화성이 높고, 드래그 앤 드롭과 리사이징 기능을 쉽게 관리할 수 있을 것이라 생각했기 때문이다. 기획 변화와 UX 중심의 고민 하지만 상세하게 기획을 하다보니 조금씩...

개요 • 목표:사용자가 드래그 앤 드롭 방식으로 쉽게 명함을 제작하고, 제작된 명함을 공유하여 발생하는 다양한 유저 액션(조회, 다운로드, 클릭 등)을 추적해 통계로 제공하는 웹 서비스 구축 • 핵심 가치: • 사용 편의성이 높은 명함 제작 도구 제공 • 제작된 명함의

최근 Next.js 프로젝트를 진행하며 parallel 라우트를 사용한 모달 구현 방법을 적용해 보았다. 기존에 자주 사용했던 State + Portal 방식을 사용하는 모달과 비교하며 느낀 장점과 한계를 정리해보려고 한다.Parallel 라우트는 Next.js에서 제

Next.js의 새로운 기능 중 하나로, 클라이언트 컴포넌트 내부에서 서버로 직접 호출할 수 있는 서버 전용 함수1\. 클라이언트와의 긴밀한 통합클라이언트 컴포넌트 내에서 함수 호출만으로 서버 로직을 실행 가능별도의 API 엔드포인트를 구성할 필요 없이, UI와 밀접하

Next.js에서는 error.js 파일을 통해서 중첩된 라우트에서 발생하는 예기치 못한 런타임 오류를 처리 할 수 있음클라이언트 컴포넌트에서는 처리할 방법이 많기 때문에 서버에서 다루는 방법에 대해 작성해보자.error.tsx : 특정 경로(페이지)에서 발생한 에러를

마운트 상태 확인의 중요성 다크모드를 추가하고 나니 에러 발생 기존코드 하지만, 초기 렌더링 시 theme 값이 아직 제대로 설정되지 않거나, 서버와 클라이언트 간의 불일치로 인해 에러가 발생 원인 Next-themes는 브라우저에서 사용자의 설정이나 OS 테마

Next.js의 이미지 로딩 이슈와 해결 방법 최근 과제를 진행하면서 챔피언 리스트에서 특정 캐릭터의 상세 정보를 확인할 때 발생하는 이미지 로딩 지연 문제를 발견했습니다. 문제 상황 상세 페이지에 들어가면 챔피언의 스킬 정보와 함께 각각의 스킬 이미지가 표시되도록 만들었다. 그런데 일부 챔피언 상세 페이지에서는 스킬 이미지가 바로 로드되는 반면, 다른 ...

Next.js는 페이지 성능을 향상시키기 위해 자동으로 다양한 캐싱 전략을 제공 \- 빌드 시점 캐싱 (Full Route Cache) \- 요청 시 데이터 캐싱 (Data Cache)Next.js의 fetch API는 브라우저의 fetch API를 확장한 것이며, 캐