안녕하세요 강사님http://localhost:3000/book/100 URL로 테스트 진행 시에 저는 왜 문제가 발생했습니다. 다시 시도해주세요 문구가 웹페이지에 보이지 않는건가요?[해결 완료]강사님 인강에서 아무리 찾아봐도 fetch-one-book.ts 파일에 if (!response.ok) throw new Error(""); 코드를 추가한 내역이 인강에서 보이지가 않습니다.. 몇 번을 되돌려봐도 못찾고 있습니다. 혹시 누락 사항일까요? import style from "./[id].module.css"; import {GetStaticPropsContext, InferGetStaticPropsType} from "next"; import fetchOneBook from "@/lib/fetch-one-book"; import { useRouter } from "next/router"; export const getStaticPaths = () => { return { paths: [ { params: { id: "1" } }, { params: { id: "2" } }, { params: { id: "3" } }, ], // fallback: "blocking", fallback: true, }; }; export const getStaticProps = async ( context: GetStaticPropsContext ) => { const id = context.params!.id; const book = await fetchOneBook(Number(id)); return { props: { book, }, }; }; export default function Page({ book, }: InferGetStaticPropsType<typeof getStaticProps>) { const router = useRouter(); if (router.isFallback) return "로딩중입니다"; console.log("booktest") console.log(book) if (!book) return "문제가 발생했습니다 다시 시도하세요"; const { id, title, subTitle, description, author, publisher, coverImgUrl, } = book; return ( <div className={style.container}> <div className={style.cover_img_container} style={{backgroundImage: `url('${coverImgUrl}')`}} > <img src={coverImgUrl} alt={""}/> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> ); } 

안녕하세요! 섹션3 2.8)페이지별 레이아웃 설정하기 강의에서 20분44초부터 시작하는 enterKey로 페이지 이동하는 부분에서 질문 있습니다 <form>태그 + e.preventDefault() 그리고 onSubmit을 사용하면 클릭+enterKey를 작동하게 할 수 있잖아요 혹시 강사님께서는 file같은 form을 진짜 제출하는게 아닐땐 form태그 사용하는걸 지양하시는 편인가요?? 혹시 그렇다면 이유도 물어봐도 될까요?? 감사합니다!!

혹시 useQuery에 작성하는 queryKey와 queryFn함수에 작상하는 next.tags의 queryKey는 무슨 상관관계가 있는 건가요 ? 둘의 값이 무조건 같아야 하는 줄 알았는데 useQuery엔 searchParams / queryFn함수엔 searchParams.q로 작성하셔서 여쭤봅니다. (next.tags엔 문자열만 가능한 점은 알고있습니다 ! )

강의 진행 도중 생긴 에러는 아니고, 순수한 궁금증에 질문 남깁니다.제가 React 로 프론트엔드 개발은 항상 모든 컴포넌트를 화살표 함수로 작성했었습니다. 이를테면const Home = () => {}; export default Home; 이런식으로 작성하였는데요, 근데 상기 Nextjs 강의에서도 그렇고 다른 수많은 블로그 글들에서는 전통적인 함수 선언식을 사용하더라구요.  export default function Home() {}; 그 이유가 무엇일까요? 모두가 사용하는데는 이유가 있는거 같은데 관련 자료를 찾을 수가 없어서 질문드립니다. 혹시나 강제된 문법인가 싶어 해당 강의에서 사용된 페이지들을 화살표함수로 바꿔서 작성해봤는데 똑같이 에러 없이 잘 실행이 되더군요..

[username] 라우터의 page.tsx에 현재 들어온 유저정보를 받아오는 prefetchQuery랑 그 유저의 게시글을 받아오는 infinitePrefetchQuery가 있는데 두 번째 Query의 경우 서버 컴포넌트에서 실행되는 함수라 credential:"include"가 작동하지 않아 Cookie값을 따로 명시해줘야 하는걸로 알고있습니다. 근데 Cookie값을 따로 명시해주지않아도 게시글들이 잘 불러와지는데 이 과정이 궁금합니다

우연찮게 '완벽한' 프론트엔드 강의를 발견하였는데 제가 지금 듣고 있는 강의와 과정이 많이 다른 걸까요? 앱 개발 관련해서도 코드캠프를 통해 공부하고 싶은데 따로 강의가 있진 않은걸까요?

귀찮게 해서 죄송합니다. 혹시 저도 기간을 놓쳐 쿠폰을 사용하지 못했는데 새로운 강의를 수강하기 위한 할인 쿠폰을 받을 수 있을지 문의드립니다. 좋은 강의를 제공해주셔서 감사드립니다 :)

혹시 강의를 처음에는 쭉 보면서 따라하거나 정리하고 다시한번 한입 북스를 스스로 만들어보면서 nextjs흐름을 파악하면서 잘 모르겠거나 막히는 부분 강의 다시 한번 듣고 소스 코드 보고 이렇게 듣는 방식이 젤 괜찮은가요?? 아니면 스타일링이나 단순 리액트 컴포넌트를 구성하는 부분은 혼자서 해보고 강의를 듣는 방식이 더 나을까요?? 감사합니다

회원가입 후 로그인 된 상태로 home으로 이동하게 되는데 여기서 useSession정보가 업데이트 되지않아서 Props로 session정보를 넘겨주는 방식으로 사용하셨는데 다르게 처리하는 방법도 있을까요 ? 예를 들면 로그인 모달에서 했던 것 처럼 서버액션을 사용하지 말고 클라이언트 컴포넌트에서 fetch 를 처리한 후replace(/home) 시키는 방법이요 !

const onClickLoad = async (event: MouseEvent<HTMLDivElement>) => { const IMP = window.IMP; IMP.init("imp00000000"); //실제로는 강의자료에 있는 식별코드 사용했습니다! IMP.request_pay( { pg: "kakaopay", pay_method: "card", name: "아이리버 무선 마우스 외 1개", amount: 10000, buyer_email: "이메일@gmail.com", buyer_name: "홍길동", buyer_tel: "010-4242-4242", buyer_addr: "서울특별시 강남구 신사동", buyer_postcode: "01181", m_redirect_url: "/", }, function (rsp: any) { if (rsp.success) { alert("결제가 성공했습니다."); console.log(rsp); } else { alert("결제에 실패했습니다."); } }, ); };위와 같은 코드로 정상적으로 rsp를 받고, imp_uid 까지 받았습니다. 그런데graphql api 호출을 했더니 _id 가 null이라는 에러가 계속해서 발생하네요. 챗gpt 도움을 받아보니, 백엔드가 impUid를 기반으로 결제 정보를 조회하고 DB에 적립하는 로직이 정상적으로 동작하는지 확인해야한다고 하는데, 에러원인이 무엇이고,어떻게 해결해야 하는지 알려주세요! 포트원 가맹점 식별코드는 강의 자료에 있는 식별코드를 사용했습니다!

피그마로 들어갔는데 과제관련한 회원가입을 찾을 수가 없어요. 그리고 섹션을 살펴봤는데요 여긴 섹션3번인데 안보이네요.. 제가 못찾고 있는것 같은데요

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다.💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 안녕하세요?질 좋은 강의 잘 듣고 있습니다.코드를 치면서 신경쓰이는 부분이 있어서 질문드립니다.vscode에서 @material-tailwind/react component를 가져왔을 때 뜨는 빨간줄 없앨 수는 없나요? 

사내 환경에서 외부 인터넷은 프록시를 통해 접속 가능합니다.백엔드 서버 구축시 npm install 수행시 prisma engine을 다운로드 받을수 없다는 메시지가 나옵니다. Downloading Prisma engines for Node-API for windows [ ] 0%Error: request to https://binaries.prisma.sh/all_commits/acc0b9dd43eb689cbd20c9470515d719db10d0b0/windows/schema-engine.exe.sha256 failed, reason:  엔진을 수작업으로 다운로드 받아 참조 할수 있는 방법이 없을까요

저번에 사놓고(2시간들음)다시 공부를 시작하려는데 혹시 새로운 강의로 들을수있을까요! 이번에는 꼭 완강 하겠습니다

안녕하세요! 좋은 강의 잘 들었습니다!강의 중 내용에 관한 질문이 있어 여쭙니다.현업에서 작은 사이드 프로젝트를 운영중인데 기존에는 Firebase를 사용하다가 SQL DB가 필요해 Supabase로 이전을 고려하다 강의를 듣게 되었습니다.다름이 아니라 Supabase에서도 REST API 형태를 지원하는 것으로 알고 있는데강의 내용을 보면, REST API 형태를 사용하는 것이 아닌,직접 Supabase의 Database에 CRUD 하는 것으로 여겨집니다.보안이나 코드의 유지 / 보수, 또는 프론트 개발자와 백엔드 개발자의 역할 분리 등 여러 측면을 고려하였을 때 REST API 형태가 아닌 프론트 코드 내에 직접 CRUD 코드가 구현된 이유가 무엇인지 궁금합니다.

npm run start:dev 명령어를 실행을 할 시 아래처럼 타입 에러가 나오고 있는데, 어떻게 해결을 해야 할까요? ㅠㅠ error TS2339: Property 'where' does not exist on type 'string | number | bigint | boolean | [] | { [K in keyof A]: Exact<A[K], any>; }'. Property 'where' does not exist on type 'string'.13 where: args.where, ~~~~~src/prisma.extension.ts:25:23 - error TS2339: Property 'where' does not exist on type 'string | number | bigint | boolean | [] | { [K in keyof A]: Exact<A[K], any>; }'. Property 'where' does not exist on type 'string'.25 where: args.where, ~~~~~ 

강의 들으면서 제로초님 RTK GitHub 코드도 보고 있는데요. RTK는 immer가 내부적으로 사용되어 state를 써도 불변성을 자동으로 처리하는 걸로 알고 있습니다. 그런데 https://github.com/ZeroCho/react-nodebird/blob/master/toolkit/front/reducers/user.js에선 리듀서 마다 state를 쓰는 곳이 있고 draft를 쓰는 곳이 있어서 질문합니다!역할은 같지만 단지 코드를 명시적이고 의도를 나타내기 위해 구분해서 쓰는 것이라고 생각되는데 구분해서 쓰는 다른 이유가 있는지 궁금합니다.

  "4.2) 데이터 캐시" 강의 진행시npm run dev 로 진행시 { cache: "force-cache" } 설정하여도 캐싱이 안되는거 같은데요 npm run buildnpm run start로 진행시에는 캐싱이 동작하고있는걸로 보이나 로깅이 안되는것 같습니다. 강의 영상처럼 캐싱 동작 상태를 로깅을 하려면 어떤 옵션값을 설정 해야하나요 ?제가 놓친거 같아서 돌려보거나 검색을 해봤는데 못찾아서 질문드립니다. 감사합니다.

안녕하세요, 강의 잘 듣고 있습니다. 하나의 페이지에서 두 개 이상의 데이터를 불러와야 할 때, 리액트에서 그래왔듯이 자연스럽게 데이터를 페칭하는 api 로직을 services/api 폴더로 분리할 것이라고 생각했는데요, 강의에서는 데이터에 따라 데이터를 페칭하여 렌더링하는 전체 로직을 각각의 컴포넌트로 분리하는 것을 보고 질문 드리게 되었습니다. 데이터를 기준으로 관심사를 분리할지, 기능을 중심으로 분리할지는 선호의 영역인가요? 아니면 어떤 사전 렌더링의 특수성으로 데이터 페칭 로직은 따로 분할하지 않는 것인가요? 그러면서 동시에 각각의 컴포넌트(AllBooks, RecoBooks)를 별도의 components 폴더로 분리하지 않는 이유도 궁금합니다! 곧 넥스트를 사용한 프로젝트에 참여하게 되는데 폴더 구조를 어떻게 가져가야 할지 고민이 많습니다 ㅠㅠ 팀원들이 모두 넥스트는 처음이라 아직 이렇다 할 기준이 없어서요.정답이 있는 문제는 아니겠지만 조언 부탁드립니다!!

우선 인터셉팅 라우팅을 버튼, 링크 등을 통해 이동 시 인터셉트된 page를 렌더링하고 새로고침이나 주소창을 통해 이동했을 때 정상(?)적인 page를 렌더링하는 것으로 이해했습니다. 인터셉팅 라우팅 폴더를 만들어야 할 위치가 궁금해서 /test1/test2 에서 Link태그를 통해 /test1 으로 이동할 때 새로고침 시 표시 되는 test1과 intercepted test1을 구분하는 코드를 작성했습니다 "(.)test1" 폴더 위치를 바꿔보면서 어떻게 동작하는 지 확인해보는 과정에서 이해가 되지 않는 부분이 있어서 질문드립니다. 이 폴더구조로 해야 작동하고, 이 폴더 구조는 작동이 안되는게 이해가 안됩니다.뭔가 (.), (..), (..)(..) 이런식으로 경로 지정이 가능하면 인터셉팅 라우팅 폴더는 어디 있든 상관없어도 될 것 같았는데... 아래 폴더구조가 작동을 안되니 디게 혼란스럽네요 ㅠㅠ