172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
강사님의 강의를 들으면서 test 페이지가 프로그래메틱하게 이동하기 때문에 따로 useEffect를 사용해 프리페칭되도록 만드는 것과, Link 컴포넌트에 prefetch 속성을 false로 하여 프리페칭되지 않게 만들 수 있다고 이해했습니다! 그런데 직접 코드를 작성하고 npm run start로 재실행한 뒤 새로고침을 했는데도 search 페이지에 필요한 js번들이 남아있고 test 페이지의 번들은 프리페칭되지 않았는데 어디가 문제인지 알 수 있을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
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
안녕하세요. 강의 잘 듣고 있습니다. Next.js는 오직 초기 접속시에만 HTML 파일을 불러와 Hydration 하고 그 이후의 페이지 이동은 리액트의 CSR(Client Side Rendering) 방식으로 처리하게 됩니다. 따라서 새롭게 HTML이 요청되지 않고 오직 브라우저측에서 JS Bundle을 실행해 컴포넌트를 교체하는 방식으로만 페이지 이동이 처리됩니다. 라고 설명주셨는데요. 하지만 ssg 파트에서는 페이지 요청시 이미 빌드된 html 을 반환한다고 하셨는데 이 부분이 잘 이해가 되지 않습니다. 빌드를 하면 SSR를 설정하지 않은 페이지는 기본적으로 SSG로 작동하고, 그렇다면 굳이 프리페칭을 하지 않더라도 이미 완성된 페이지를 반환해주는게 아닌가 싶어서 질문드립니다. 라우터를 이용하여 페이지를 이동할때는 CSR로 작동하고 url에 직접 경로로 접속 요청을 할때 SSG로 작동하는건가요?? 두 가지 개념이 헷갈립니다
해결됨
한 입 크기로 잘라먹는 Next.js
prefetch 를 명시적으로 false 로 설정하면, 예상대로 해당 링크에 대한 프리패칭이 발생하지 않는 것이 확인되었습니다. <Link href={"/search"} prefetch={false}>Search</Link> 그런데 신기한 점은, 해당 링크에 마우스를 호버했을 때 네트워크 탭에서 /search 관련 리소스들이 프리패칭되는 현상이 보였다는 것입니다. 혹시 이러한 동작은 Next.js에서 어떻게 정의되거나 불리고 있는지 궁금합니다!
미해결
한 입 크기로 잘라먹는 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 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로
안녕하세요, Next.js 라우팅은 어떻게 구현 했을까? 색션에서 예제코드 주소를 알 수 있을까요?
미해결
[리뉴얼] React로 NodeBird SNS 만들기
영상하고 15버전하고 차이가 좀 있는거 같습니다
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 안녕하세요! 로펀님 강의 잘 보고 있습니다 ㅎㅎ 다름이 아니고 TodoList에서 할일 CRUD 기능을 구현할 때 20:34초에서 onChange 함수에 async, await를 걸어주셨는데, hover 하니까 await이 아무 효과가 없다고 뜨더라구요 혹시 그럼에도 await를 달아주신 이유가 있나요? 이전에 같이 일하던 동료분도 가끔 이렇게 쓰셨었는데.. 그때는 제가 await가 아무런 작용을 안하는데 왜 쓰지? 하면서 다 뺐었거든요.. 😂 그러면 안됐을까요... 🥲 궁금합니다!!
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 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>; };
해결됨
한 입 크기로 잘라먹는 Next.js
강사님 영상대로 했는데 왜 저부분이 왜 적용이 안되는걸까요 혹 index.module.css 해도 배경을 하얀색으로 해야 하나요 강의 내용에는 별 말씀이 없으셨는데
미해결
한 입 크기로 잘라먹는 Next.js
알려주신 완성본 (완성본) 데모사이트 링크 https://inf.run/fBsfH 가서 경험해보려고 가니 검색기능도 안되고 상품 클릭해도 정보가 안나오네요
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 제로초님 ! 강의보고 따라해보고 있는데 화면 새로고침할때 깜빡거리는걸 없애고 싶은데 getServerSideProps을 사용해서 상태값을 변경해주면 가능한걸까요??
해결됨
한 입 크기로 잘라먹는 Next.js
defined but never used.eslint@typescript-eslint/no-unused-vars 만들고 아직 다른 곳에서 import 하거나 사용하지 않아서 빨간줄이 뜹니다. 문제는 없으나 헷갈리기도 하고 ,, 강의에서 강사님은 빨간줄이 안뜨는데 ESLint 설정을 따로 하신 걸까요? 헷갈리니 설정을 하는 것을 추천하시나요?
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
한번씩 폰트 적용이 안되는데 새로고침을 하면 적용이 됩니다. 혹시 관련해서 해결 방법이 정리된게 있을까 해서 글 올려봅니다!
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
싸이월드 백그라운드를 만드는 중인데 이미지가 이렇게 반복되는건 어떻게 고치나요? AI로 고치려고 해도 안고쳐지네요.. 감사합니다
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
안녕하세요 수업따라고 하고 있는중에,인터넷이 잘 연결되어 있는데 koreanjson.com 이 웹브라우저에서 열리지 않습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
30분 30초 패딩 넣었는데 a태그의 클릭가능한 범위가 늘어나나요? 줄어들어야 하는것아닌가요 크기를 키우려면 마진을 넣어야하는 것으로 알고있는데요 ㅠ.ㅠ 또한 강의에서 그 직후에 border를 표시해서 z태그들의 영역이 겹치는것을 말씀하시면서, 그 이유가 인라인 요소이기 때문이라고 말씀하셨는데요, 인라인 요소에 대해 제가 알고있는 것은, 블록요소와 다르게오른쪽으로(?) 쌓일 수 있다는 것만 알고있는데, 이것과 인라인요소가 겹치는 이유가 관련이 있는지, 아니면 제가 모르는 다른 무언가때문인지 어쨌든 인라인요소이기 때문에 겹친다 라는 표현이 이해가 안가네요. 감사합니다.
미해결
한 입 크기로 잘라먹는 Next.js
2.15)SSG 3. 동적경로에 적용하기 book/[id].tsx는 "도서 상세 페이지" 라고 가정하겠습니다. 도서를 생성하는 페이지도 있고 생성api도 있다고 가정해볼게요, 도서 생성페이지에서 도서 생성api 성공한 이후, 백엔드 서버로부터 새롭게 생성한 도서 id를 받았다고 가정하고, 도서 상세페이지로 이동 한다고 가정했을때 이때, 강의에서 설정해주신 fallback의 값은 false이기 때문에 페이지를 찾을 수가 없는 것 일까요 ?
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요 이정한 강사님! 강의를 듣다가 npm run build 를 실행 할 때, 컴파일에 실패하면서 img 태그에서 오류가 나는 상황입니다. 구글링과 여기서 나오는 말에 의하면, next/image의 Image를 사용하라고 나와있습니다. 해당 내용으로 바꿔서 사용하니 이미지 태그에서 이미지가 제대로 나오지 않는 현상이 발생하고 있습니다. 기존 img 태그와 image의 태그의 차이가 무엇이고, 왜 이미지가 잘 안나오는 것 일까요?? 또, ESLint에 대한 규정을 build시 영향을 안받게 할 수는 없을까요?? 두가지 질문 답변해주시면 감사하겠습니다!! 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
