전체 글

🎨 OpenAI Responses API로 이미지 생성 결과 스트리밍 받기OpenAI에서 제공하는 responses API를 이용하면 이제 텍스트 프롬프트로 이미지 생성을 요청할 수 있고, 이를 스트리밍 형식으로 단계별로 수신할 수 있습니다.Next.js와 TanStack Query의 streamedQuery 기능을 활용해 실시간으로 이미지를 받아 UI에 바로 반영하는 방식을 정리합니다.🧩 시스템 구성✅ 주요 기술 스택OpenAI SDK (openai): responses.create를 통해 이미지 스트리밍 요청Next.js Route Handler: 서버 측에서 OpenAI 응답을 ReadableStream으로 래핑TanStack Query (useQuery + streamedQuery): 클라이언..

🧩 문제정의React에서 디바운스 기능이 필요한 상황에 대응하기 위해 직접 커스텀 훅 useDebounce를 만들어 사용하고 있었습니다.기본적으로 useCallback과 useRef만으로 구현했기 때문에 간단하고 직관적이었으나,콜백이 최신 상태를 반영하지 않거나 props로 전달 시 리렌더링을 유발하는 등의 숨겨진 안정성 문제가 있었습니다.원래 코드import { useCallback, useRef } from "react";type Debounce = (...args: T) => void;export const useDebounce = ( func: (...args: T) => void, delay: number,): Debounce => { const timerRef = useRef..

작년에 FSD를 나름대로(?) 적용하여 진행했던 프로젝트가 있었습니다.그러나 FSD에 대한 깊은 이해를 바탕으로 적용했다기 보다는그냥 '기능 중심으로 묶는다' 정도로 생각했었기 때문에 부족함을 많이 느꼈었습니다. 그래서 이번에 FSD를 다시한번 공부하며 도입해 보았는데 이 과정에서여러 의견을 종합하고 제 나름대로 커스텀(...)해보았던 기록을 남깁니다. FSD의 개념에 대한 내용은 검색하면 많이 나옵니다.# (번역) 기능 분할 설계 - 최고의 프런트엔드 아키텍처# 프론트엔드 개발자 관점으로 바라보는 관심사의 분리와 좋은 폴더 구조 (feat. FSD)# Feature-Sliced Design을 직접 사용하면서 느낀 장점과 단점# FSD 아키텍처 알아보기위 블로그 등을 참고할 수 있겠습니다(감사합니다) ..

Q1저는 계속 RSC 와 Next.js 에서 use server 혹은 use client 지시어에 대해 정확히 무슨 일을 하는지 궁금했습니다.단순하게는 use server 를 사용하면 해당 파일은 server side 가 되고, use client 를 사용하면 client side 가 되는 건가? 라고 생각했는데요. Next.js 에서는 아무것도 안쓰면 자동으로 서버 컴포넌트가 되기도 해서 정확한 의미가 궁금했어요.검색을 해보니 use server 는 사용된 모듈 내의 함수를 마치 http 엔드포인트 처럼 만들어서 클라이언트가 사용할 수 있도록 하는 것이고, use client 는 프론트엔드에서 동작할 함수(=컴포넌트)가 데이터를 서버로부터 받을 수 있게하고, 서버에서 렌더링 가능하도록 한다는 것을 알 ..

🧩 문제 정의프로젝트에서 OpenAI의 image edit 기능을 활용한 이미지 생성을 구현하던 중,Amplify 환경에서 API 요청이 504 Gateway Timeout 에러를 반환하는 문제에 직면했습니다.Vercel 배포 환경에서는 요청이 정상적으로 처리되지만,Amplify에서는 Lambda@Edge의 timeout 제한으로 인해 SSR 함수가 29초를 넘기면 강제 종료특히 이미지 생성은 평균 40초 이상 걸리는 작업이라, Amplify 환경에서 실행 불가능🛠 해결 과정1. 구조 분리 (백엔드 역할 Next.js 앱 도입)이미지 생성 로직을 별도의 Next.js 앱에 분리해 ‘백엔드 역할’로 사용클라이언트는 이 앱에 요청을 보내고, 실제 작업은 해당 앱에서 수행2. Polling 방식 적용첫 번..

🧨 문제 상황컴포넌트 내 드롭다운 필터를 초기화(reset) 해야 하는 상황이 있었습니다.처음에는 아래와 같은 방식으로 리셋을 구현했었는데, 계속 신경이 쓰였습니다.const [isReset, setIsReset] = useState(false);const handleReset = () => { setKeyword(""); setPage(1); setTarget(All); setIsReset(true); setTimeout(() => setIsReset(false), 1000);};❗문제점setTimeout으로 리셋 flag를 1초 뒤에 false로 만드는 게 불안정하고 지저분했음Dropdown 컴포넌트 내부에서 isReset을 감지해 setLabel, onValueChange 등을 직접 호출..

🧠 Inertia/React + Context 환경에서 중복 fetch 문제 해결기📌 문제 정의최근 Inertia.js + React + Laravel 조합으로 프로젝트를 진행하던 중, Context 내부에서 fetch가 두 번 이상 발생하는 문제를 겪었습니다.Context 내부에서 초기 fetch 요청을 보내고 있었고, 이 요청은 특정 state에 의존하고 있었습니다.그런데 페이지 이동 시 Context가 재마운트되며 initialState가 다시 적용되었고, 결과적으로 fetch가 두 번 이상 실행되었습니다.이로 인해 드물게 초기값이 UI에 반영되는 문제, 혹은 깜빡임(flickering)이 발생했습니다.⚙️ 문제 원인 분석Inertia 환경에선 다음과 같은 제약이 있었습니다:Context Pro..

문제 상황회사 밖에서 회사 서버에 접속해야 했습니다.하지만 회사 서버는 방화벽 설정으로 인해 외부에서는 직접 접근이 불가능했습니다.해결 시도회사에서 제공한 OpenVPN 설정 파일(.ovpn)과 함께, crt, key, pem 등 필요한 인증서 파일들도 모두 갖추고 있었습니다.macOS에서 OpenVPN Connect 앱으로 시도했지만, 접속은 계속 실패했고 로그에는 서버 타임아웃 메시지가 반복되었습니다..ovpn 파일을 수정해 UDP → TCP, 포트 변경, 불필요한 옵션 제거 등 여러 가지 방법을 시도했지만 효과가 없었습니다.결국 회사 선임에게 도움을 요청했고, 제 집 공인 IP를 화이트리스트에 등록하는 방식으로 문제를 해결했습니다.배운 것이 과정을 통해 VPN의 기본 원리에 대해 다시 이해하게 되었..

gpt쌤이 위로도 해준다.. 최고....2년전에 비해 이제는 LLM쌤들이 난무하지만역시 gpt쌤과 정이 많이 들었다 ㅜㅜ 오늘은 CSS 트릭을 하나 배웠습니다.image-rendering 과transform: translateZ(0) 을 함께 쓰는 건데요.쌤의 명쾌한 설명 첨부합니다.절대 바보 아니세요! 그 상황이라면 누구나 착각할 수 있어요 🙂말씀하신 CSS 속성들에 대해 아래처럼 정리해드릴게요:🔍 image-rendering: auto;이 속성은 브라우저가 이미지를 어떻게 보간(interpolation) 할지 결정합니다.기본값 auto는 브라우저가 알아서 최적 품질로 렌더링합니다.다른 옵션들:crisp-edges: 픽셀이 뭉개지지 않게 보이도록 (ex. 픽셀아트)pixelated: 저해상도 이미지..

😂 문제) 특정 기기 + 인앱에서 navigator안됨안드로이드 옛 기종 등 특정 모바일 기기 중인앱 브라우저에서는 navigator.share 가 안될 때가 있습니다.이럴때 사용자를 인앱브라우저에서 아예 튕겨버리는 방법쓸 수 있다는 것을 알게 되었습니다.☺️ 해결) 해결방법은 간단하나...방법은 그냥 아래 코드를 App.tsx 혹은 Root 클라이언트 컴포넌트에 넣으면 됩니다.// 안드로이드 웹뷰에서 navigator.share가 지원되지 않을 때 대체 공유 방법const handleShareIntent = () => { const currentUrl = window.location.href; // 현재 페이지 URL const hostname = window.location.hostnam..