172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편
안녕하세요 정환님! 정환님의 강의를 들으면서 코드를 따라 작성해보다가 포스트와 이미지를 최종적으로 업로드 하는 과정에서 아래의 캡쳐 사진과 같이 포스트 생성에 실패했다는 에러 메시지가 뜨게됩니다. 네트워크 탭에 보면, 포스트 부분은 잘 전달이 되는거같은데 이미지 생성에 관한 결과가 보이지 않는 것으로 보아 이미지 생성 관련 코드에서 문제가 생긴것같은데 무슨 문제일까요??..ㅠ 아래는 해당 코드들입니다. 이미지 생성 관련 코드를 가져왔는데 혹여나 다른 부분의 코드가 필요하면 추가 업로드 드리겠습니다. api/post.ts import type { PostEntity } from './../types'; import supabase from '@/lib/supabase'; export async function createPost(content: string) { const { data, error } = await supabase .from('post') .insert({ content }) .select() .single() if (error) throw error return data } export async function createPostWithImages({ content, images, userId }: { content: string images: File[] userId: string }) { // 1. 새로운 포스트 생성 (맨 위에서 생성한 포스트 비동기 함수 가져오기) const post = await createPost(content) if (images.length === 0) return post // 2. 이미지 업로드 try { const imageUrls = await Promise.all( images.map((image) => { const fileExtension = image.name.split(".").pop() || "webp" const fileName = `${Date.now()}-${crypto.randomUUID()}.${fileExtension}` const filePath = `${userId}/${post.id}/${fileName}` return uploadImage({ file: image, filePath }) }) ) // 3. 포스트 테이블 업데이트 const updatedPost = await updatePost({ id: post.id, image_urls: imageUrls }) return updatedPost } catch(error) { await deletePost(post.id) throw error } } export async function updatePost(post: Partial<PostEntity> & { id: number }) { const { data, error } = await supabase .from("post") .update(post) .eq("id", post.id) .select() .single() if (error) throw error return data } export async function deletePost(id: number) { const { data, error } = await supabase .from("post") .delete() .eq("id", id) .select() .single() if (error) throw error return data } hooks/mutations/post/use-create-post.ts import type { UseMutationCallback } from './../../../types'; import { createPost, createPostWithImages } from '@/api/post'; import { useMutation } from '@tanstack/react-query'; export function useCreatePost(callbacks?:UseMutationCallback) { return useMutation({ mutationFn: createPostWithImages, onSuccess: () => { if(callbacks?.onSuccess) callbacks.onSuccess() }, onError: (error) => { if (callbacks?.onError) callbacks.onError(error) } }) } components/modal/post-editor-modal.tsx import { Button } from '@/components/ui/button' import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog' import { useCreatePost } from '@/hooks/mutations/post/use-create-post' import { usePostEditorModal } from '@/store/post-editor-modal' import { useSession } from '@/store/session' import { ImageIcon, XIcon } from 'lucide-react' import { useRef, useState, useEffect, ChangeEvent } from 'react' import { toast } from "sonner" import { Carousel, CarouselContent, CarouselItem } from '../ui/carousel' type Image = { file: File, previewUrl: string } export default function PostEditorModal() { const session = useSession() const { isOpen, close } = usePostEditorModal() const { mutate: createPost, isPending: isCreatePostPending } = useCreatePost({ onSuccess: () => { close() }, onError: (error) => { toast.error("포스트 생성에 실패했습니다", { position: "top-center" }) } }) const [content, setContent] = useState("") const [images, setImages] = useState<Image[]>([]) const textareaRef = useRef<HTMLTextAreaElement>(null) const fileInputRef = useRef<HTMLInputElement>(null) const handleCloseModal = () => { close() } const handleCreatePostClick = () => { if (content.trim() === "") return createPost({ content, images: images.map((image) => image.file), userId: session!.user.id }) } const handleSelectImages = (e:ChangeEvent<HTMLInputElement>) => { if (e.target.files) { const files = Array.from(e.target.files) files.forEach((file) => { setImages((prev) => [ ...prev, { file, previewUrl: URL.createObjectURL(file) }, ]) }) } e.target.value = "" } const handleDeleteImage = (image:Image) => { setImages((prevImages) => prevImages.filter((item) => item.previewUrl !== image.previewUrl)) } useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = "auto" textareaRef.current.style.height = textareaRef.current.scrollHeight + "px" } }, [content]) useEffect(() => { if (!isOpen) return textareaRef.current?.focus() setContent("") setImages([]) }, [isOpen]) return ( <Dialog open={isOpen} onOpenChange={handleCloseModal}> <DialogContent className="max-h-[90vh]"> <DialogTitle>포스트 작성</DialogTitle> <textarea disabled={isCreatePostPending} ref={textareaRef} value={content} onChange={(e) => setContent(e.target.value)} className="max-h-125 min-h-25 focus:outline-none" placeholder="무슨 일이 있었나요?" /> <input onChange={handleSelectImages} ref={fileInputRef} type="file" accept="image/*" multiple className="hidden" /> {images.length > 0 && <Carousel> <CarouselContent> {images.map((image) => <CarouselItem className="basis-2/5" key={image.previewUrl}> <div className="relative"> <img src={image.previewUrl} className="h-full w-full rounded-sm object-cover" /> <div onClick={() => handleDeleteImage(image)} className="absolute top-0 right-0 m-1 cursor-pointer rounded-full bg-black/30 p-1" > <XIcon className="h-4 w-4 text-white"/> </div> </div> </CarouselItem>)} </CarouselContent> </Carousel>} <Button onClick={() => { fileInputRef.current?.click() }} variant={"outline"} className="cursor=pointer" > <ImageIcon/> 이미지 추가</Button> <Button disabled={isCreatePostPending} onClick={handleCreatePostClick} className="cursor=pointer"> 저장 </Button> </DialogContent> </Dialog> ) }
react typescript react-query supabase zustand
rkdla666
2026-07-10T09:02:45.932Z
댓글 2
좋아요 0
조회수 57
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
카카오 로그인 후 이메일을 입력하고 몽고DB에 이메일과 refresh token이 저장된 것 까지 확인은 했는데 쿠키가 생성되지 않고 있네요. 강사님 네이버메일로 소스코드링크를 보냈습니다.
javascript react typescript next.js jwt
태리바이트
2026-07-10T07:24:14.898Z
댓글 3
좋아요 0
조회수 69
해결됨
[Unity6] Claude Code CLI로 게임 개발부터 출시까지
강의 순서대로 따라오면서 구글 스토어 출시 강의인데, 해당 화면에서 진입이 안되는데, 버튼 눌렀을때 프로덕션, 12명 이상의 테스터가 비공개 테스트 참여를 선택, 12명 이상의 테스터를 대상으로 14일 이상 비공개 테스트 진행이 있습니다. 해당 부분이 필수인가요 ?
node.js C# unity Stable Diffusion cli 유니티6 claude
너드코더
2026-07-10T05:55:06.590Z
댓글 2
좋아요 0
조회수 61
미해결
클로드를 활용한 AI 업무 자동화 완전 정복
클로드코드 실습 강의 2분 40초정도에 '스타터킷'을 링크로 보내줬다고 하는데, 어디서 받을 수 있는건가요?
product-management 인공지능(ai) claude 바이브코딩
박칠성
2026-07-10T05:55:03.608Z
댓글 1
좋아요 0
조회수 34
미해결
[Rookiss] 클로드 코드 개발을 위한 CS 입문 (인터랙티브 교재)
선생님 디스코드 안들어가져요 ㅠㅠ
next.js 인공지능(ai) claude ax(에이전트-경험)
아요
2026-07-10T05:08:03.162Z
댓글 1
좋아요 0
조회수 58
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
항상 잘 듣고 있습니다^^
구자
2026-07-10T01:09:17.647Z
댓글 2
좋아요 0
조회수 67
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
이게 맞는건가요? showClearCOntextOnPlanAccept 설정이 켜있을때만 보인다고 하던데요?
아밥퍼
2026-07-09T13:06:02.901Z
댓글 3
좋아요 0
조회수 78
해결됨
한 입 크기로 잘라먹는 바이브코딩 - 기초부터 실전 배포까지 (클로드 & 코덱스)
클로드 코드 설치 후 claude --version을 입력하면 찾을수없다고 나옵니다 혹시 이렇게 뜨는 이유가 뭘까요?
단단한순두부
2026-07-09T12:00:54.223Z
댓글 1
좋아요 0
조회수 55
해결됨
한 입 크기로 잘라먹는 바이브코딩 - 기초부터 실전 배포까지 (클로드 & 코덱스)
Bash command npx tsc --noEmit 2>&1 | head -50 Type-check the project This command requires approval Do you want to proceed? vs code에서 클로드 코드를 실행하고 prompt.md파일을 읽게하면 꼭 저런식으로 어떤 내용의 코드가 나오고 Do you want to proceed?라는 질문이 나옵니다. 간혹가다가는 엄청 많이 나오는데 강의에서는 이런 화면이 안나오는거 같아서요ㅠㅠ 그냥 계속 yes를 눌러서 넘기는 방법밖에 없을까요? 한두개면 모르겠는데 가끔씩 엄청 많이 반복돼서 번거롭습니다ㅠㅠ
단단한순두부
2026-07-09T08:11:22.261Z
댓글 2
좋아요 0
조회수 70
미해결
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
이메일 입력 후 contitnue 버튼을 누르면 JWT auth error invalid token 오류가 나네요. 몇시간째 보고 있는데 원인을 찾지 못하겠네요. 전체 소스 코드를 같이 첨부하고 싶은데 할 수 가 없네요. 일단은 EmailInfoForm 소스만 올려 봅니다. backend는 .env 빼고 소스를 특별하게 수정한 부분이 없습니다. 브라우저 application 데이터도 클리어 해보고 했지만 소용이 없네요. 확인 부탁드립니다. "use client"; import {useState} from "react"; import {MailIcon} from "../ui/Icons"; import {validateEmail} from "@/lib/validation"; import clientApi from "@/lib/api/clientApi"; import {useRouter, useSearchParams} from "next/navigation"; export default function EmailInfoForm() { const router = useRouter(); const searchParams = useSearchParams(); const accessToken = searchParams.get("access_token") ?? ""; const [email, setEmail] = useState(""); const [error, setError] = useState(""); const [isSubmitting, setIsSubmitting] = useState(false); const handleFormSubmit = async (e: React.SubmitEvent<HTMLFormElement>) => { e.preventDefault(); if (isSubmitting) return; setError(""); //이메일 검증 const validationError = validateEmail(email); if (validationError) { setError(validationError); return; } //확인 대화 상자 const confirmed = window.confirm( "한 번 입력한 이메일은 변경할 수 없습니다. 이 이메일로 저장할까요?", ); if (!confirmed) return; setIsSubmitting(true); try { const res = await clientApi("/auth/update-email", { method: "PATCH", body: JSON.stringify({email: email.trim()}), headers: { Authorization: `Bearer ${accessToken}`, }, }); if (!res.ok) { const errorData = await res.json().catch(() => null); throw new Error( (errorData && errorData.error) || "이메일 업데이트에 실패하였습니다.", ); } router.replace("/"); router.refresh(); } catch (e) { setError( e instanceof Error ? e.message : "이메일 업데이트에 실패하였습니다.", ); } }; return ( <> <form className="flex flex-col gap-5" onSubmit={handleFormSubmit}> <div className="flex flex-col gap-2"> <label htmlFor="email" className="text-sm font-medium text-foreground" > Email Address </label> <div className="relative"> <MailIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" /> <input id="email" type="email" placeholder="Enter your email" className="h-11 w-full rounded-lg border-none bg-secondary pl-10 pr-4 text-sm text-foreground placeholder-muted-foreground outline-none focus:ring-2 focus:ring-primary" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> </div> {error && ( <p className="text-sm font-medium text-destructive">{error}</p> )} <div className="grid grid-cols-2 gap-3"> <button type="button" className="h-11 rounded-lg bg-secondary text-sm font-medium text-secondary-foreground transition-colors hover:opacity-90" > Cancel </button> <button type="submit" className="h-11 rounded-lg bg-primary text-sm font-medium text-primary-foreground transition-colors hover:opacity-90" > Continue </button> </div> </form> </> ); }
javascript react typescript next.js jwt
태리바이트
2026-07-09T06:31:51.286Z
댓글 2
좋아요 0
조회수 66
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
Starter Kit 만들기 소스코드 부분에 있어 강의 섹션 13~14에서 변경된 코드가 하나도 적용안되 있어보여 문의드려봅니다..! 가능하면 완벽히 마무리된 상태도 확인해 보고 싶은데 다운받아 확인해 보니 오류도 있고 소개나 문서 부분 클릭시에도 제대로 나오지않아 섹션 13에서 다룬 내용이 적용되지 않은 상태로 보여서요 영상외에 제가 봐보며 코드와 디자인을 좀 자세히 보고싶은데 혹시 업로드 안된상태라면 따로 업로드나 공유가 어려운부분일지도 질문드려봅니다
모또쭌
2026-07-08T15:05:00.832Z
댓글 1
좋아요 0
조회수 50
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
지금 강의하는 Cursor 버전이랑 요즘 버전이랑 완전 달라서 딴세상 이야기 같은데, 예전 버전을 받으려면 몇버전을 받아서 해야하나요?
이흠냥이
2026-07-08T14:03:53.717Z
댓글 3
좋아요 0
조회수 80
해결됨
한 입 크기로 잘라먹는 바이브코딩 - 기초부터 실전 배포까지 (클로드 & 코덱스)
3분 44초에 보면 브라우저 화면을 띠우시는데 이 화면을 다시 띠우려면 어떻게 해야하는지요? 폴더 추가, 삭제, 수정 기능에 대한 커밋이 잘 안되어 커밋을 다시 했더니 폴더 삭제, 추가 가 2개씩 생겼습니다. 어떤걸 삭제해야 하며, 삭제하는 방법은 무엇인지?
남승원
2026-07-08T12:39:33.216Z
댓글 1
좋아요 0
조회수 57
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
15강 git 설정 윈도우 동일 방식으로 햇을 때 오류가 뜨는데 어떻게 할 수 있을까요. 오류 내용은 아래와같습니다. ~ : '~' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확 인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.
너드코더
2026-07-08T11:43:48.816Z
댓글 2
좋아요 0
조회수 66
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
4강 영상이 안보이고 하얀화면만 나옵니다!
Jay Byeongjoo Kim
2026-07-08T10:12:45.999Z
댓글 1
좋아요 0
조회수 50
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
안녕하세요 강사님 현재 루프라는 개념을 알게 되어서 공부 중입니다 클로드로 시작을 어떻게 해야할지 약간의 막막 함이 생겨 영상으로 추가 해주실 수 있으신지 문의 드립니다 Turn-based Goal-based Time-based Proactive 혹 기존 영상에 추가 되어 있다면 제가 놓쳤을 확률이 있으니 말씀 부탁드립니다
ljh
2026-07-08T08:33:13.692Z
댓글 2
좋아요 0
조회수 62
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
클로드 /todos 옵션이 없다고 하는데요 삭제된건가요? 아니면 다른 명령어로 바뀌었을까요?
seunghee
2026-07-08T06:37:53.738Z
댓글 2
좋아요 0
조회수 63
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
강의를 수강하다보니 점점 더 클로드 코드에 빠져서 더 깊게 공부하고 싶어서 문의 드려요 다음에 실무 기반 클로드 코드 강의를 하신다고 들었는데 어떤 강의인지, 언제쯤 출시하는지 간략하게라도 알 수 있을까요? 혹시 요즘 유행하는 옵시디언 x 클로드 코드 / 헤르메스 에이전트 활용법(클로드 코드나 코덱스와 연계) 같은 강의도 출시하시나요?
이주영
2026-07-08T05:44:29.036Z
댓글 1
좋아요 0
조회수 42
미해결
포트폴리오 어나더레벨 | 합격하는 이력서 작성법
현재 경력 기술서는 큰돌님이 말씀하신 것과 비슷하게 하나의 이슈에 대한 문제, 분석, 해결 과정, 결론 및 소감 형태로 나열되어 있습니다. 여기서 문제점이, 이슈가 많을수록, 내용이 많을수록 비대해지더라구요.. 한, 두 줄 내로 줄여도 이슈가 많으니 페이지는 자꾸 늘어나고 있습니다. 경력기술서 내용을 포트폴리오에 넣어 분산시켜야 할지, 굵직한 이슈만 적어야할지, 방향에 대해 고민이 됩니다. 경력기술서의 존재 이유?(면접관이 왜 보는지, 어떤 부분을 중심으로 보는지 등) 같은게 궁금합니다.
HTML/CSS javascript python java 포트폴리오
q g
2026-07-08T03:54:05.597Z
댓글 2
좋아요 0
조회수 55
미해결
클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지
강의 자체가 AI 같은 느낌입니다. 5. 현재 세션 동안 파일 쓰기 작업을 자동 승인하는 옵션 번호는 무엇인가요? A 옵션 '1' 옵션 '2' C 옵션 '3' D 옵션 '4' 특히 이런 퀴즈는 너무하지 않나요? 이게 무슨 의미를 갖습니까? 설명도, 퀴즈도, 과제도 너무 성의가 없는 느낌입니다.
김성민
2026-07-08T01:47:05.804Z
댓글 2
좋아요 0
조회수 65
