기존강의 업데이트 된 정보를 이제 봐서 쿠폰 정보를 놓쳤는데 혹시 쿠폰 다시 보내주실 수 있으신가여?

강사님의 강의를 들으면서 test 페이지가 프로그래메틱하게 이동하기 때문에 따로 useEffect를 사용해 프리페칭되도록 만드는 것과, Link 컴포넌트에 prefetch 속성을 false로 하여 프리페칭되지 않게 만들 수 있다고 이해했습니다! 그런데 직접 코드를 작성하고 npm run start로 재실행한 뒤 새로고침을 했는데도 search 페이지에 필요한 js번들이 남아있고 test 페이지의 번들은 프리페칭되지 않았는데 어디가 문제인지 알 수 있을까요?  

const { id } = await params; const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}}`); const book = await response.json();book { statusCode: 500, message: 'Internal server error' }nest가 실행중인곳에는 Argument id is missing.PrismaClientValidationError: Invalid this.prisma.book.findUnique() invocation in/Users/leecho/dev/onebite-books-server/src/book/book.service.ts:55:41 52 } 53 54 async findOneBook(id: number) {→ 55 const book = await this.prisma.book.findUnique({ select: { id: true, title: true, subTitle: true, description: true, author: true, publisher: true, coverImgUrl: true }, where: { + id: Int } })Argument id is missing. 이런 에러가 나는데 왜 이럴까요..?

안녕하세요. 강의 잘 듣고 있습니다.Next.js는 오직 초기 접속시에만 HTML 파일을 불러와 Hydration 하고 그 이후의 페이지 이동은 리액트의 CSR(Client Side Rendering) 방식으로 처리하게 됩니다. 따라서 새롭게 HTML이 요청되지 않고 오직 브라우저측에서 JS Bundle을 실행해 컴포넌트를 교체하는 방식으로만 페이지 이동이 처리됩니다.라고 설명주셨는데요. 하지만 ssg 파트에서는 페이지 요청시 이미 빌드된 html 을 반환한다고 하셨는데 이 부분이 잘 이해가 되지 않습니다. 빌드를 하면 SSR를 설정하지 않은 페이지는 기본적으로 SSG로 작동하고, 그렇다면 굳이 프리페칭을 하지 않더라도 이미 완성된 페이지를 반환해주는게 아닌가 싶어서 질문드립니다. 라우터를 이용하여 페이지를 이동할때는 CSR로 작동하고 url에 직접 경로로 접속 요청을 할때 SSG로 작동하는건가요??두 가지 개념이 헷갈립니다  

prefetch를 명시적으로 false로 설정하면, 예상대로 해당 링크에 대한 프리패칭이 발생하지 않는 것이 확인되었습니다.<Link href={"/search"} prefetch={false}>Search</Link>그런데 신기한 점은, 해당 링크에 마우스를 호버했을 때 네트워크 탭에서 /search 관련 리소스들이 프리패칭되는 현상이 보였다는 것입니다. 혹시 이러한 동작은 Next.js에서 어떻게 정의되거나 불리고 있는지 궁금합니다!

SSG의 fallback 옵션에 따른 렌더링 방식에 대해 좀 더 구체적으로 알고 싶습니다.fallback: "blocking"일 때, 빌드 타임에 사전 생성하지 않았던 경로에 대해서, 이후 접속 요청이 들어와 사전 렌더링되고, .next 서버에 저장되는 걸 확인했는데요.1) 저장되는 걸 캐싱이라고 이해해도 될까요?2) 그러면 그 이후의 요청에서는 더이상 재생성되지 않고, 이 페이지를 클라이언트에게 전달하나요?fallback: true 일 때, 빌드 타임에 사전 생성하지 않았던 경로의 접속이 들어왔습니다. 그 때, getStaticProps로 불러오는 데이터를 제외하고, 먼저 레이아웃을 내려준다고 이해했습니다. 그리고 추후에 Props만 따로 반환받아 페이지를 렌더링한다고 했는데, 그럼 받은 데이터를 가지고, CSR이 되는 건가요?위 상황에서 CSR이 맞다면, 해당 내용은 검색 크롤러가 알아내지 못해 SEO에 불리할 것 같은데요. 아니면 검색 크롤러가 getStaticProps 데이터가 올때까지 기다리고 해당 내용도 반영해서 문제가 없나요?감사합니다.

안녕하세요 [CSS 09-2-3] 폰트 - 폰트와 크로스브라우징 강의 마지막에 다음강의에 안내된 그림,차트 모달 관련 강의가 없습니다.섹션 09 => [JS 09-1-1] 수업내용이 [ CSS 09-1-1] 과 같습니다. 중복업로드된것이 아닌지요 ?   

안녕하세요,Next.js 라우팅은 어떻게 구현 했을까?색션에서 예제코드 주소를 알 수 있을까요?

영상하고 15버전하고 차이가 좀 있는거 같습니다

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다.💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다.안녕하세요! 로펀님 강의 잘 보고 있습니다 ㅎㅎ다름이 아니고 TodoList에서 할일 CRUD 기능을 구현할 때 20:34초에서 onChange 함수에 async, await를 걸어주셨는데, hover 하니까 await이 아무 효과가 없다고 뜨더라구요혹시 그럼에도 await를 달아주신 이유가 있나요?이전에 같이 일하던 동료분도 가끔 이렇게 쓰셨었는데.. 그때는 제가 await가 아무런 작용을 안하는데 왜 쓰지? 하면서 다 뺐었거든요.. 😂그러면 안됐을까요... 🥲 궁금합니다!! 

안녕하세요!ISR on-demand 활용해서 인덱스 페이지에서 전체 페이지 새로고침 없이"새로 추천 받기" 버튼을 눌렀을 때 추천 도서(recoBooks)만 새롭게 받아오도록 구현하고 싶습니다.getStaticProps를 통해 전달된 recoBooks가 useState의 초기값으로 들어갈 때,해당 데이터도 여전히 빌드 타임에 fetch되어 정적 HTML과 함께 포함되는지 궁금합니다.개발자 도구를 보면 정적으로 렌더링되는 것 같은데, useState로 상태를 만들었기 때문에 초기 렌더링이 정적인지 아니면 클라이언트 측에서 동적으로 할당되는건지 헷갈립니다.// CSS Module import SearchableLayout from '@/components/searchable-layout'; import style from './index.module.css'; import { ReactNode, useState } from 'react'; import BookItem from '@/components/book-item'; import { InferGetStaticPropsType } from 'next'; import fetchBooks from '@/lib/fetch-books'; import fetchRandomBooks from '@/lib/fetch-random-books'; export const getStaticProps = async () => { console.log('인덱스 페이지'); const [allBooks, recoBooks] = await Promise.all([ // 병렬로 함수 호출하기 fetchBooks(), // fetchRandomBooks(), ]); return { props: { allBooks, recoBooks, }, }; }; export default function Home({ allBooks, recoBooks }: InferGetStaticPropsType<typeof getStaticProps>) { const [recommended, setRecommended] = useState(recoBooks); const revalidate = async () => { try { const response = await fetch('/api/revalidate'); const result = await response.json(); // console.log(result); if (result.revalidate) { //페이지 갱신이 됐을 때 const rebooks = await fetchRandomBooks(); setRecommended(rebooks); } else { //페이지 경신 안됐을 때 } } catch (err) { //에러처리 console.error(err); } }; // console.log(recoBooks); return ( <div className={style.container}> <section> <h3>지금 추천하는 도서</h3> <button onClick={revalidate}>새로 추천 받기</button> {recommended.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> <section> <h3>등록된 모든 도서</h3> {allBooks.map((book) => ( <BookItem key={book.id} {...book} /> ))} </section> </div> ); } Home.getLayout = (page: ReactNode) => { return <SearchableLayout>{page}</SearchableLayout>; };

강사님 영상대로 했는데 왜 저부분이 왜 적용이 안되는걸까요 혹 index.module.css 해도 배경을 하얀색으로 해야 하나요 강의 내용에는 별 말씀이 없으셨는데

알려주신 완성본(완성본) 데모사이트 링크https://inf.run/fBsfH가서 경험해보려고 가니 검색기능도 안되고 상품 클릭해도 정보가 안나오네요

안녕하세요 제로초님 !강의보고 따라해보고 있는데 화면 새로고침할때깜빡거리는걸 없애고 싶은데 getServerSideProps을 사용해서 상태값을 변경해주면 가능한걸까요??

defined but never used.eslint@typescript-eslint/no-unused-vars 만들고 아직 다른 곳에서 import 하거나 사용하지 않아서 빨간줄이 뜹니다. 문제는 없으나 헷갈리기도 하고 ,, 강의에서 강사님은 빨간줄이 안뜨는데ESLint 설정을 따로 하신 걸까요? 헷갈리니 설정을 하는 것을 추천하시나요?  

한번씩 폰트 적용이 안되는데새로고침을 하면 적용이 됩니다. 혹시 관련해서 해결 방법이 정리된게 있을까 해서 글 올려봅니다!

싸이월드 백그라운드를 만드는 중인데 이미지가 이렇게 반복되는건 어떻게 고치나요? AI로 고치려고 해도 안고쳐지네요..감사합니다

안녕하세요 수업따라고 하고 있는중에,인터넷이 잘 연결되어 있는데 koreanjson.com 이 웹브라우저에서 열리지 않습니다.

30분 30초 패딩 넣었는데 a태그의 클릭가능한 범위가 늘어나나요? 줄어들어야 하는것아닌가요 크기를 키우려면 마진을 넣어야하는 것으로 알고있는데요 ㅠ.ㅠ 또한 강의에서 그 직후에 border를 표시해서 z태그들의 영역이 겹치는것을 말씀하시면서, 그 이유가 인라인 요소이기 때문이라고 말씀하셨는데요, 인라인 요소에 대해 제가 알고있는 것은, 블록요소와 다르게오른쪽으로(?) 쌓일 수 있다는 것만 알고있는데, 이것과 인라인요소가 겹치는 이유가 관련이 있는지, 아니면 제가 모르는 다른 무언가때문인지 어쨌든 인라인요소이기 때문에 겹친다 라는 표현이 이해가 안가네요. 감사합니다.

2.15)SSG 3. 동적경로에 적용하기 book/[id].tsx는 "도서 상세 페이지" 라고 가정하겠습니다. 도서를 생성하는 페이지도 있고 생성api도 있다고 가정해볼게요, 도서 생성페이지에서 도서 생성api 성공한 이후, 백엔드 서버로부터 새롭게 생성한 도서 id를 받았다고 가정하고, 도서 상세페이지로 이동 한다고 가정했을때이때, 강의에서 설정해주신 fallback의 값은 false이기 때문에 페이지를 찾을 수가 없는 것 일까요 ?