전체 글

Docker Desktop에서 이미지가 "in use" 상태로 표시되어 삭제되지 않는 문제1. 숨겨진 컨테이너 확인 및 정리터미널에서 다음 명령어로 모든 컨테이너(중지된 것 포함)를 확인해보세요:# 모든 컨테이너 확인 (중지된 것 포함)docker ps -a# 중지된 모든 컨테이너 삭제docker container prune -f2. Dangling 이미지 정리태그가 없는 이미지들을 정리합니다:# dangling 이미지 확인docker images -f "dangling=true"# dangling 이미지 삭제docker image prune -f3. 네트워크 및 볼륨 정리이미지가 네트워크나 볼륨에 연결되어 있을 수 있습니다:# 사용하지 않는 네트워크 정리docker network prune -f# 사..

JSON-LD: 웹 표준에서 AI 검색 기반으로JSON-LD는 단순한 웹 표준에서 AI 기반 검색 최적화의 핵심으로 변모했습니다. 2011년 JSON과 시맨틱 웹 기술을 연결하기 위해 설계된 JSON-LD는 이제 지식 그래프, AI 크롤러, 생성형 검색 엔진의 중요한 인프라 역할을 하고 있습니다. 이러한 진화는 기계가 웹 콘텐츠를 이해하고 처리하는 방식에서 가장 중요한 변화 중 하나를 나타냅니다.기원과 표준화: 링크드 데이터를 접근 가능하게 만들기JSON-LD는 2011년 시맨틱 웹 기술을 단순화해야 한다는 절실한 필요에서 출현했습니다. Digital Bazaar의 Manu Sporny가 프로젝트를 시작했고, 공동 편집자인 Gregg Kellogg, Markus Lanthaler, Dave Longley..

🎨 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의 기본 원리에 대해 다시 이해하게 되었..