코드상에서 graphQLClient 자동완성 알될때 부터 이상하였지만 import 하는부분 from 에서는 자동완성이 되었습니다.하지만 위 이미지 처럼 에러가 발생합니다.package.json 은 아래와 같습니다.node_modules 는 아래와 같습니다.설치됨을 다 확인하였으나 인식을 못하네요.tsconfig.json 에서 "module": "node" 에서 Bundler로 변경하니 해결되었습니다.이렇게 수정하여도 문제없을까요? 추가로 해당 이슈에 대해 발생 원인을 알 수 있을까요?

영상을 3:29 이 부분을 똑같이 하려고하는데,http://localhost:3000/home로 접속하면 파일이 없다고 합니다..app 안에 (afterLogin) (beforeLogin)로 나뉘고,home 폴더를 만들어서 layout.tsx 와 page.tsx를 만들어홈페이지와 홈 레이아웃을 작성하여루트 레이아웃과 층계별 확인하려고 http://localhost:3000/를 들어가면 루트레이아웃은 잘나오는데http://localhost:3000/home는 페이지가 없다고 나옵니다.. (afterLogin) 안이 아니라 밖으로 app/home/layout.tsx 와 page.tsx가 있어야만 http://localhost:3000/home가 잘나오는데 왜이럴까요?

failed to retrieve generated types: {"message":"Your account does not have the necessary privileges to access this endpoint. For more details, refer to our documentation https://supabase.com/docs/guides/platform/access-control"}generate-types씨 발생하는 에러 해결방법이 궁금합니다.

채팅을 계속 올려서 몇개월 치를 사용자가 본다면 위로 채팅 기록이 엄청 쌓일텐데, 실무에서 메모리가 넘치는걸 방지하는 방법으로 사용하시는게 있는지 어떤걸 사용하시는지 궁금합니다.찾아보니 react-window 같은 라이브러리를 사용해서 실제 랜더링 하는 요소 갯수를 제한하고 스크롤을 유지 시켜서 성능 향상을 하는 글을 봤습니다. 실제로 실무에서 이런 방법을 주로 쓰는지 궁금합니다.

인텔리센스 단축키 (Intellisense shortcut)¶https://stackoverflow.com/questions/51341555/visualcode-shortcut-to-display-autocomplete-list-before-typing-in-macos인텔리센스 사용시 한영 전환(ctrl + space)와 스팟라이트(cmd + space) 단축키와 충돌이 발생하므로 (option + esc) 조합을 사용합니다.메인 메뉴 Code > Preferences > Keyboard Shortcuts (cmd + K, cmd + S)에서 단축키(Trigger Suggest)를 (ctrl + .)로 변경할 수 있습니다.

새 pc에서 강의를 듣는 중에 yarn dev 후 웹페이지에서 이런 에러가 뜹니다 ㅜㅜ node_modules 삭제 후 재설치 해도 이렇게 뜨는데 어떻게 해결해야 할까요?

api/(site)/page.tsx에 actions/todo/todo.actions.ts를 사용하고하위컴포넌트들에서는 ex) api/(site)/compoents/...container.ts 내부에서는 hook을 임포트한것들이 apis/todo-no-rls.ts를 사용하면 될까요? *위 예시는 강의에서 다룬 파일만을 예를 들었보았습니다.

ec2 터미널에서 node를 14버전으로 설치 후에 강의대로 따라가는 중인데요git clone해와서 yarn install시에 node의 버전이 맞지 않아서 설치가 안되고 있습니다ec2의 node 버전을 업그레이드하면 /lib64/libm.so.6: version GLIBC_2.27 not found(required by node) 가 뜨면서 ec2의 버전이 맞지 않는거같고 14버전으로 진행하면 설치한 프로젝트의 버전이 달라서 안되는데 class_build의 버전은 이런데 react의 버전을 바꿔야 해결되는걸까요? "dependencies": { "react": "^18", "react-dom": "^18", "next": "14.2.5" }

회원가입 페이지에서 프로필 이미지를 한글이 포함된 이미지명로 업로드했을때,nextjs의 서버 Formdata에서 한글 파일명이 깨지는 현상이 있습니다. 해결방법이 있을까요??Step1. 회원가입 페이지Step2. 서버 에러 결과회원가입 페이지 경로 : D:\z-com\src\app\(beforeLogin)\_lib\signup.ts업로드시 한글 파일명 출력 확인을 위해 아래코드를 추가해봤습니다. formData.getAll("image").map((data, idx) => { console.log(data); });업로드 이미지명에 한글이 포함되었을때 출력 -- 한글파일명이 깨져서 출력되고 데이터베이스에 저장됩니다.

안녕하세요.이 인강을 듣기 전에는 db에 데이터를 GET 하고 POST하기 위해서는 Rest API를 통해서 했었습니다.하지만 이 강의에서는 supabase를 통해서 create,select 등을 이용해서 data를 다루던데 supabase를 통해서는 rest api를 통해서 data를 만들고, 가지고올수도 있나요?만약 둘다 된다면 어떤 방식을 통해서 주로 data를 다루는게 좋을까요? 현업에서는 어떤 방식을 더 추구하나요?현재 대학생이라 개인플젝을 할때 db가 필요해서 강의를 오늘부터 듣게되었는데 db를 어떻게 다뤄야할지 감이 안잡히네요.아직 개념이 좀 잡히지 않아서 헷갈립니다.추가적으로 저는 팀이나 , 특히 개인프로젝트를 하면서 사용자 정보(id,pw)나 여러 데이터들을 저장하고 싶어서 mongodb를 혼자서 공부하다가 어려워서 여러가지를 찾던 중 supabase(serverless)를 알게되어서 강의를 듣고있습니다.하지만 그냥 mongodb를 공부해서 db를 다루는게 나은지 아니면 supabase를 공부해서 db를 저장하는게 나은지 잘 모르겠습니다.긴 글 읽어주셔서 감사합니다..!

제가 알기로는 require는 commonjs에서 쓰는걸로 알고 있는데 useEffect내부에서 쓰시는걸 보고 궁금점이 생겨 질문드립니다.require 대신에 dynamic import를 쓰는건 보았는데 require도 클라이언트에서 사용이 가능한가요?

/app/api/revalidate/route.ts 파일 내 POST 함수가 async로 선언되어 있습니다. 본문에 await이 없는데 async로 선언되어야 하나요?

아래와 같은 타입에러가 발생했습니다.데이터베이스와 todoDto모두 설정 및 정상적으로 가져온거 같은데요마우스를 올려보고 에러내용도 확인해보면 타입은 다 같게 설정되어있는거 같습니다.타입자체를 비교해서 대입 하려해도 에러가나오네요..플러그인을 통해서 시각화해서 좀 더 자세하게 머가 문제인지 비교해봐도 타입이 같습니다..혹시 뭐가 문제인지 알 수 있을까요?...

graphql의 장점이 딱 원하는 데이터만 가져온다는 것은 이해가 되는데, REST API도 딱 원하는 DB 컬럼만 요청해서 가져오거나 할 수도 있지 않나요? 이게 어떠한 차이가 있나 궁금합니다. ㅎㅎ

안녕하세요 로펀님tanstackquery에서 최근에 isPending이 생겨서 어느 블로그에선가 봤는데 이제 isPending을 사용하면 된다고 했던 것 같은데혹시 둘의 차이가 있을까요?어느 시점에서는 이것을 사용해야 한다라는 가이드가 있을까요?

안녕하세요 선생님 ㅎchannel쪽 진행하고 있었는데 앨범 밑에 PlayListCarousel이 크기가 이상하게 나오네여 ㅠㅠ 코드를 다똑같이 써도 안되서 질문드립니다! channel/[id]/page.tsximport HeaderBgChanger from "@/components/HeaderBgChanger"; import PagePadding from "@/components/PagePadding"; import PlayListCarousel from "@/components/PlayListCarousel"; import SongCardRowExpand from "@/components/SongCardRowExpand"; import DarkButton from "@/components/elements/DarkButton"; import WhiteButton from "@/components/elements/WhiteButton"; import { getChannelById } from "@/lib/dummyData"; import { getRandomElementFromArray } from "@/lib/utils"; import { permanentRedirect } from "next/navigation"; import React from "react"; import { FiMusic, FiShuffle } from "react-icons/fi"; interface ChannelPageProps { params: { id: string; }; } const page = async (props: ChannelPageProps) => { const channel = await getChannelById(Number(props.params.id)); if (!channel) permanentRedirect("/"); const imageSrc = getRandomElementFromArray(channel.songList)?.imageSrc; return ( <PagePadding> <HeaderBgChanger imageSrc={imageSrc} /> <div className="mt-[150px]"></div> <section> <div className=" text-[28px] font-bold">{channel.name}</div> <article className="mt-4 lg:hidden"> <div> <DarkButton className={"w-[230px] flex justify-center"} label={"구독중 99만"} /> </div> <div className="flex flex-row gap-4 mt-4"> <WhiteButton label={"셔플"} icon={<FiShuffle size={16}></FiShuffle>} /> <WhiteButton label={"뮤직 스테이션"} icon={<FiMusic size={16} />} /> </div> </article> <div className="hidden lg:flex flex-row items-center gap-4 text-[14px] mt-4"> <WhiteButton label={"셔플"} icon={<FiShuffle size={16}></FiShuffle>} /> <WhiteButton label={"뮤직 스테이션"} icon={<FiMusic size={16} />} /> <DarkButton className={"w-[230px] flex justify-center"} label={"구독중 99만"} /> </div> </section> <section className="mt-[80px]"> <div className=" text-[28px] font-bold">노래</div> <div className="mt-[20px]"> <ul className="flex flex-col gap-2"> {channel.songList.map((song, key) => { return <SongCardRowExpand song={song} key={key} />; })} </ul> </div> </section> <section className="mt-[80px]"> <div className=" text-[28px] font-bold">앨범</div> <PlayListCarousel playlistArray={channel.playlistArray} /> </section> <section className="mt-[80px]"></section> </PagePadding> ); }; export default page;PlayListCarousel.tsximport { Playlist } from "@/types"; import React from "react"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; import PlayListCard from "./PlayListCard"; interface PlayListCarouselProps { title?: string; subTitle?: string; Thumbnail?: React.ReactNode; playlistArray?: Playlist[]; } const PlayListCarousel: React.FC<PlayListCarouselProps> = ({ title, subTitle, Thumbnail, playlistArray, }) => { return ( <div className="w-full"> <Carousel> <div className="flex flex-row justify-between items-end my-2"> <article className="flex flex-row gap-3"> {Thumbnail} <div className="flex flex-col justify-center"> <div> {subTitle && ( <div className=" text-neutral-500">{subTitle}</div> )} </div> <div className="text-[34px] font-bold leading-[34px] "> {title} </div> </div> </article> <div className="relative left-[-45px]"> <div className="absolute bottom-[20px]"> <CarouselPrevious className="right-2" /> <CarouselNext className=" left-2" /> </div> </div> </div> <CarouselContent className="mt-4"> {playlistArray?.map((playlist, index) => { return ( <CarouselItem key={index} className="basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5" > <PlayListCard playlist={playlist} /> </CarouselItem> ); })} </CarouselContent> </Carousel> </div> ); }; export default PlayListCarousel;

혹시 Next.js에서 Link태그와 useRouter를 제공하고 있는데 서로 차이점이 있을까요?? 이미지나 버튼이 있으면 거기에 onClick 달고 라우터 쓰고 있긴한데 이미지나 버튼에 링크를 감싸버리면 뭔가 이상할 것 같아서 어떤식으로 쓰면 좋을까요<Link href="/" ><Image ... /></Link><Image ... onClick={()=>router.push("/")} />

안녕하세요, Drag & Drop 강의 도중 궁금한 점이 생겨 질문드립니다. File Upload 처리 같은 경우는, SupaBase가 아니어도, 보통은 이러한 방식으로 File 객체를 전달하는 것이 맞을까요??어떤 방법이 조금 더 일반적인지 궁금합니다!

궁금합미다

9.1장에서 user.action.ts의 getUser 함수에 serverComponent라는 속성이 갑자기 생겨났는데 이거에 대한 설명이 필요한 것 같습니다.