최근의 기록
전체 글
자바, 파이썬, SQL 등 개발 관련
Next.js FastAPI 이미지 업로드 구현 — FormData와 UploadFile 예제
Next.js에서 고른 이미지를 FastAPI로 보내려면 FormData의 필드 이름과 UploadFile 매개변수 이름을 맞추고, Content-Type을 직접 지정하지 않는 것부터 확인하세요. 이 글에서는 파일 선택 → 업로드 → 서버 저장 → 반환 URL 표시까지 연결합니다.구성은 Next.js App Router·TypeScript 프런트 localhost:3000과 Python 3.10 이상 FastAPI 서버 localhost:8000입니다. 로컬 실습을 위한 예제이며 JPEG·PNG, 최대 5 MiB, 최대 2천만 픽셀만 받습니다. 이미지는 JPEG로 다시 저장하므로 PNG 투명도는 유지하지 않습니다.1. 백엔드 의존성 준비python -m pip install fastapi uvicorn ..
Claude로 코딩 오류 해결하기, 에러 메시지와 함께 보내야 할 정보
클로드에 “코드가 안 돼”라고 물으면 어디를 고쳐야 하는지보다 가능한 원인이 길게 나올 수 있습니다. 실행 환경, 재현 코드, 실제 결과, 기대 결과를 함께 주면 문제의 범위를 좁히기 쉽습니다. 짧은 Python 오류 예제로 질문을 구성하는 방법을 살펴봅니다.이 글에서 얻는 것: 오류 질문에 필요한 네 가지부터 실제로 적용할 수 있는 예시와 확인 방법까지 정리했습니다.1. 오류 질문에 필요한 네 가지환경: 언어와 버전, 사용 중인 주요 라이브러리.재현: 오류가 발생하는 최소 코드와 실행 방법.실제 결과: 에러 메시지와 관련 스택.기대 결과: 어떤 입력에 어떤 출력이 나와야 하는가?Anthropic 공식 가이드도 원하는 결과와 조건을 명확하게 전달하고 예시를 제공하는 방식을 권합니다. 아래 내용은 그 원칙..
Next.js FastAPI CORS 오류 해결 — localhost·OPTIONS·쿠키 설정
Next.js에서 FastAPI를 호출할 때 브라우저에는 CORS 오류가 뜨는데 curl이나 API 문서에서는 정상이라면, 브라우저가 보낸 Origin과 API 응답의 허용 헤더를 먼저 비교하세요. API가 실행된다는 사실과 브라우저가 응답을 읽을 수 있다는 것은 서로 다른 조건입니다.재현 구성은 Next.js 화면 http://localhost:3000, FastAPI http://localhost:8000입니다. App Router의 클라이언트 컴포넌트에서 직접 fetch하는 상황을 기준으로 설명합니다. 서버에서 실행되는 fetch에는 브라우저의 CORS 검사가 직접 적용되지 않습니다.1. localhost라고 해도 포트가 다르면 다른 출처다프런트 주소API 주소판단http://localhost:30..
사진 한 장으로 AI 영상 만들기, Gemini 프롬프트 작성 순서
사진을 영상으로 바꾸면 무엇을 움직여야 할까요? 피사체, 배경, 카메라를 모두 크게 움직이라고 요청하면 원래 사진의 분위기를 유지하기 어려울 수 있습니다. 첫 시도는 움직임 하나를 정하고 나머지를 고정하는 방식으로 설계해 보세요. Gemini에서 사용할 입력 예시와 결과 점검 기준을 정리합니다.이 글에서 얻는 것: 시작 사진은 단순한 장면으로부터 실제로 적용할 수 있는 예시와 확인 방법까지 정리했습니다.1. 시작 사진은 단순한 장면으로처음에는 커피잔, 책상 위 소품처럼 중심 피사체가 명확한 사진을 권합니다. 얼굴 여러 개, 작은 글자, 복잡한 손동작처럼 보존해야 할 요소가 많으면 결과에서 확인할 부분도 늘어납니다. 본인이 촬영했거나 사용할 권한이 있는 사진을 준비하세요.메인 이미지는 사진이 장면으로 확장..
Next.js 로그인 후 새로고침하면 풀릴 때 해결 방법 — 쿠키와 세션 확인
Next.js에서 로그인 직후에는 사용자 이름이 보이는데 새로고침하면 로그인 화면으로 돌아간다면, 먼저 화면의 로그인 상태와 서버의 인증 상태를 분리해서 확인해야 합니다. React 상태만 초기화된 것인지, 쿠키가 전송되지 않는 것인지, 서버에서 세션이 만료된 것인지에 따라 고치는 위치가 다릅니다.이 글은 App Router에서 쿠키 기반 로그인을 사용하는 경우의 진단 순서입니다. 특정 인증 라이브러리의 완성형 로그인 구현은 아닙니다. 라이브러리를 사용 중이라면 아래 관찰 결과를 해당 라이브러리의 세션 조회·갱신 기능에 적용하세요.1. 새로고침 뒤 어느 단계에서 끊기는지 찾기관찰한 증상먼저 확인할 곳해결 방향로그인 때만 이름이 보이고 새로고침 뒤 사용자 조회가 없음useState·Context에만 저장했..
구글 포토 사진 삭제, 휴대폰 사진도 지워질까
구글 포토 앱에서 사진을 일반 삭제하면 휴대폰의 같은 사진도 삭제될 수 있습니다. 백업된 사진은 백업이 켜진 다른 기기에도 삭제가 반영될 수 있으므로, “구글 계정에 있는 사진만 지워지겠지”라고 생각하고 휴지통 버튼을 누르면 안 됩니다. Google 포토 공식 삭제 안내휴대폰 용량을 비우려는 것인지, 구글 계정의 저장공간을 줄이려는 것인지부터 구분하면 선택하기 쉽습니다. 아래 안내는 일반적인 Google 포토 사용 기준이며, 메뉴 이름은 기기와 앱 버전에 따라 달라질 수 있습니다.먼저, 어느 저장공간이 부족한가요?휴대폰 저장공간과 Google 계정 저장공간은 별개입니다. Google 계정의 용량은 포토뿐 아니라 Gmail·Drive 등과 함께 사용합니다. 휴대폰에서 사진 파일을 정리했다고 구글 계정의 사..
Suno로 한국어 노래 만들기, 가사와 스타일 프롬프트 작성법
AI 음악을 처음 만들 때는 “좋은 노래 만들어 줘”보다 어떤 가사를 어떤 분위기로 부를지 나눠 생각하면 시작하기 쉽습니다. Suno의 Custom 모드에 넣을 짧은 한국어 가사와 스타일 예시를 준비했습니다. 아래 가사는 이 글을 위해 만든 연습용 창작 예시이며, 완성 음원을 생성해 평가한 후기는 아닙니다.이 글에서 얻는 것: 가사와 음악 스타일을 나누기부터 실제로 적용할 수 있는 예시와 확인 방법까지 정리했습니다.1. 가사와 음악 스타일을 나누기Suno 공식 안내에 따르면 Create 화면의 Custom 모드에서는 직접 작성한 가사를 입력할 수 있습니다. 가사는 노랫말을, 스타일은 장르·악기·분위기 같은 음악 방향을 설명하는 데 사용합니다. 화면 배치와 이용 가능한 옵션은 계정·버전에 따라 달라질 수 ..
Next.js window is not defined 오류 해결 방법
Next.js에서 window is not defined가 나오면 브라우저 전용 코드를 서버에서 실행하고 있는지 확인해야 합니다. use client를 붙였는데도 계속 실패할 수 있습니다. window를 읽는 위치가 렌더 중인지, 파일 최상위인지, 외부 라이브러리 내부인지에 따라 수정 방법이 달라집니다.적용 범위: Next.js App Router · TypeScript 예제. 2026년 9월 공식 문서 확인 기준이며, 프로젝트 버전과 렌더링 설정에 따라 오류 문구는 달라질 수 있습니다.1. use client를 붙여도 발생하는 이유Client Component도 최초 접속 화면을 만들 때 서버에서 미리 렌더링될 수 있습니다. 따라서 함수 본문에서 window.innerWidth를 바로 읽거나 파일 최상..
ChatGPT·Claude·Gemini 비교, 한국어 글쓰기에 맞는 AI 고르는 법
ChatGPT, Claude, Gemini 중 무엇을 써야 할지 검색하면 서로 다른 추천을 보게 됩니다. 글쓰기에서는 긴 답변이 나오는지보다 내가 수정해야 하는 부분이 얼마나 남는지가 더 실용적인 기준이 될 수 있습니다. 같은 원문과 요청으로 비교하는 방법을 정리합니다.이 글에서 얻는 것: 서비스 이름과 모델 이름 구분하기부터 실제로 적용할 수 있는 예시와 확인 방법까지 정리했습니다.1. 서비스 이름과 모델 이름 구분하기Claude는 서비스·모델 제품군의 이름이고, Opus는 그 안의 모델 계열입니다. “Claude와 Opus 중 무엇이 좋을까?”라는 질문은 비교 단위부터 맞춰야 합니다. 비교할 때는 서비스, 화면에 표시된 모델, 요금제, 실험 날짜를 함께 기록하세요.이 글은 세 서비스를 실행해 순위를 ..
챗GPT 블로그 글쓰기, AI 티 줄이는 프롬프트와 수정 전후 예시
챗GPT로 초안을 만들면 문장은 매끄러운데 내 글 같지 않을 때가 있습니다. “현대 사회에서”, “매우 중요합니다” 같은 문장이 반복되고, 정작 독자가 궁금한 해결 방법은 뒤로 밀리기도 하죠. 이런 경우에는 자연스럽게 써 달라는 말만 반복하기보다 독자·사실·말투·수정 범위를 구체적으로 알려주는 편이 좋습니다.이 글에서 얻는 것: 자연스러운 글을 만드는 재료부터 실제로 적용할 수 있는 예시와 확인 방법까지 정리했습니다.1. 자연스러운 글을 만드는 재료글을 맡기기 전에 세 가지를 적어 보세요. 누가 읽는지, 무엇을 해결해 주는지, 직접 확인한 사실은 무엇인지입니다. “개발 블로그 글 작성”보다 “처음 배포하는 사람이 환경변수 위치를 확인하도록 돕는 글”이 편집 기준을 잡기 쉽습니다.OpenAI의 공식 프롬프..
Next.js Hydration failed 오류 원인과 해결 방법
Hydration failed 오류는 서버가 만든 HTML과 브라우저의 첫 렌더 결과가 맞지 않을 때 발생합니다. 무조건 useEffect를 추가하기보다 어떤 값이나 HTML 구조가 달라졌는지 찾는 것이 먼저입니다. 새로고침할 때만 나타나는 오류도 이 관점으로 점검할 수 있습니다.적용 범위: Next.js App Router · TypeScript 예제. 2026년 9월 공식 문서 확인 기준이며, 프로젝트 버전과 렌더링 설정에 따라 오류 문구는 달라질 수 있습니다.1. 비교 대상은 브라우저의 첫 렌더서버가 만든 초기 화면에 React가 이벤트와 상태를 연결하는 과정이 hydration입니다. 서버에서 “기본 테마”를 만들었는데 브라우저 첫 렌더에서 localStorage를 읽어 “다크 테마”를 출력하면 ..
Next.js NEXT_PUBLIC_ 환경변수 차이 정리
NEXT_PUBLIC_은 환경변수를 어디서 읽을 수 있는지 결정하는 중요한 표시입니다. API 주소가 안 읽힌다는 이유로 모든 변수에 붙이면 비밀키까지 브라우저로 전달할 수 있습니다. 공개 여부와 값이 결정되는 시점을 함께 이해해야 합니다.적용 범위: Next.js App Router · TypeScript 예제. 2026년 9월 공식 문서 확인 기준이며, 프로젝트 버전과 렌더링 설정에 따라 오류 문구는 달라질 수 있습니다.1. 일반 환경변수와 공개 환경변수일반 환경변수는 서버에서 사용하고, NEXT_PUBLIC_이 붙은 변수는 브라우저 코드에서도 참조할 수 있습니다. 공개 API 주소나 분석용 공개 ID는 후보가 되지만, 데이터베이스 비밀번호·결제 서비스 비밀키·관리자 인증 토큰은 공개 변수로 만들면 ..
