172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
ISR 을 보면서 SSR과 SSG의 각각의 단점을 모두 커버할 수 있는 기술이라 생각이 되었습니다. 진짜, 이 외에는 쓸 필요가 있나 싶을 정도인데요.. 한가지 여쭤보고 싶은 것은, ISR 을 API 로 호출해서 한다고 했을 때 예를 들면, 어떤 게시물이 등록이 되면 그 시점에 이 API를 호출하고 그 후 해당 페이지가 재생성 될 것입니다. 그렇다면, 게시물을 동시에 여러개 작성하게 된다면 (서비스의 비즈니스 로직에 따라..) 어쩔 수 없이 이 API 엔드포인트에 트래픽이 몰리게 될 텐데 그로 인한 서버부하 는 생각 안해도 되는것이지 여쭤보고 싶습니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요, 강의 2.14에서 이전에 SSR로 만들었던 페이지를 SSG로 변경하는 것 관련하여 질문이 있습니다. SSG에서는 빌드타임에 페이지를 생성하기 때문에 쿼리스트링을 불러올 수 없어서 SSG로 만들고 싶다면 쿼리스트링 가져오는 부분은 클라이언트 사이드쪽에 코드를 추가해주면 가능하다고 하셨는데, 그럼 이 프로젝트의 검색페이지 같은 경우는 SSR를 사용하는게 나은지 SSG를 사용하는게 나은지 궁금합니다. 둘다 장단점이 있기 때문에 개발자의 판단에 달려있는걸까요? 쿼리스트링을 사용하는 페이지에서 어떤 경우에는 SSR로 만드는게 낫고 어떤경우에는 SSG로 만드는게 나을지 그 기준에 대해서도 궁금합니다. 강의 너무 잘 듣고 있습니다. 감사합니다. ++ 다른 비슷한 질문에 답변 다신 것 읽어봤는데 SSG는 식당에서 반찬을 먼저 주는 것과 같다고 말씀하셔서 이해가 잘되었습니다. 근데 SSG의 단점이 최신 데이터의 반영은 어려운것이기 때문에 데이터가 잘 변경되지 않는 페이지에서 사용하는 것이 좋다고 하셨는데, 그럼 검색페이지의 검색결과가 계속 바뀐다고 가정하면 (책 데이터가 계속 추가됨) SSR을 사용하는게 나은가요? 아니면 그 부분은 어차피 클라이언트 사이드에서 쿼리스트링 추가해서 다시 새로 불러오기 때문에 SSG로 사용해도 무방한가요? 거의 다 이해한 것 같은데 조금 헷갈리네요 ㅎㅎ
해결됨
3시간 만에 끝내는 Cursor 완벽 가이드
composers 기능이 현재는 다른 이름으로 대체되거나 없어졌나요? 찾을 수가 없네요
해결됨
한 입 크기로 잘라먹는 Next.js
error.tsx 핸들링에서 막국수를 검색할때 error.tsx component가 보이지 않습니다. 혹시 변경된부분이 있나요..? 현재 api주소로 직접 던져보니 빈배열을 받아와서 error처리가 안됬네요, 혹시 강사님께서는 이런에러처리를 어떻게하셨나요? 보통 어떻게하는게 좋을지를 몰라서요.. 아 죄송합니다. 백엔드 server를 중단안했네요.하하하 참 정신이없네요. 그나저나 위의 저 빈배열은 보통 에러처리가 어떻게하는지는 궁금합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
한 입 크기로 잘라먹는 Next.js
왜 안되는 것인지 잘 모르겠습니다. https://onebite-books-page-l47231g07-min-jiyeongs-projects.vercel.app/ 화면은 보였다가 안보였다가 하고, book id 별로 보이는 것도 있고 보이지 않는 것도 있습니다
해결됨
한 입 크기로 잘라먹는 Next.js
/book/3만 " 존재하지 않는 페이지 입니다."라고 뜨는데 이유를 잘 모르겠습니다. 아래는 npm run build 결과입니다. > section02@0.1.0 build > next build ▲ Next.js 15.1.6 ./src/components/book-item.tsx 17:7 Warning: Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element ./src/pages/book/[id].tsx 51:9 Warning: Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element ./src/pages/search/index.tsx 20:6 Warning: React Hook useEffect has a missing dependency: 'fetchSearchResult'. Either include it or remove the dependency array. react-hooks/exhaustive-deps info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/app/api-reference/config/eslint#disabling-rules ✓ Linting and checking validity of types Creating an optimized production build ... ✓ Compiled successfully ✓ Collecting page data 인덱스 페이지 렌더링 fetchOneBook error Error: 서버 상태 오류 at u (.next/server/pages/book/[id].js:1:634) at async x (.next/server/pages/book/[id].js:1:873) ✓ Generating static pages (8/8) ✓ Collecting build traces ✓ Finalizing page optimization Route (pages) Size First Load JS ┌ ● / (ISR: 3 Seconds) 1.05 kB 95.7 kB ├ /_app 0 B 94.6 kB ├ ○ /404 322 B 94.9 kB ├ ƒ /api/hello 0 B 94.6 kB ├ ƒ /api/revalidate 0 B 94.6 kB ├ ● /book/[id] (5318 ms) 705 B 95.3 kB ├ ├ /book/3 (5072 ms) ├ ├ /book/1 ├ └ /book/2 └ ○ /search 1.11 kB 95.7 kB + First Load JS shared by all 96.9 kB ├ chunks/framework-a4ddb9b21624b39b.js 57.5 kB ├ chunks/main-d4c20200ddabac7f.js 33.7 kB └ other shared chunks (total) 5.68 kB ○ (Static) prerendered as static content ● (SSG) prerendered as static HTML (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps) ƒ (Dynamic) server-rendered on demand // book/[id].tsx // index.tsx
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 선생님. 강의 잘 듣고 있습니다! 강의 주제에 벗어나는 것 같아서 조심스럽게 질문드려보자면, 앱 라우트 방식에서 반응형을 구현하는 방법을 알고 싶습니다. 저는 이전에 페이지 라우터 방식에서 작업할 때 window.matchMedia 를 사용해서 useMediaQuery 훅을 만들어 반응형을 구현했습니다. 근데 서버 컴포넌트에서는 위와 같은 방식을 사용하기 어려울 것 같은데 혹시 앱 라우트 방식에서 반응형을 구현할 때 많이 쓰이는 방식이 있을까요? 화면 너비에 따라 컴포넌트의 size prop을 다르게 넘겨주어야 하는 경우에 클라이언트 컴포넌트로 사용해야 할까요? 이 경우 다수의 컴포넌트가 클라이언트 컴포넌트가 될 것 같아 우려스럽더라고요. Next.js의 앱 라우터에서 반응형을 구현하는 방식에 대해 조언을 구하고 싶습니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
31일에 올라오지 않아서 궁금해 질문드립니다!
해결됨
한 입 크기로 잘라먹는 Next.js
현재 이미지를 public 폴더에 잘 넣어주었는데 아래 이미지처럼 바뀌지 않고 지구 모양으로 뜹니다.. app.tsx , document.tsx, index.tsx 파일에서 favicon 설정하는 코드가 없는데.. 이거때문인걸까요?
미해결
한 입 크기로 잘라먹는 Next.js
[1.2) Next.js 사전렌더링 이해하기] 강의 15분 부근에서 " 사전 렌더링에서 페이지 이동 요청 시 클라이언트 사이드 렌더링 방식과 동일하게 처리한다 "는 내용을 보고 질문 드립니다. 강의를 따라가며 CSR에서의 JS Bundle은 서비스 전체 코드에 대한 번들 사전 렌더링에서의 JS Bundle은 해당 페이지에 대한 번들 라고 스스로 생각하여 페이지 이동 요청 시 웹 서버로부터 새 JS Bundle을 받을 줄 알았는데, 사전 렌더링에서도 JS Bundle은 서비스 전체 코드에 대한 번들인 것인지 궁금합니다. 만약 제가 이해한 것이 맞다면, 아래 답변에 대해서 마지막으로 현재 페이지에 필요한 자바스크립트 코드만 Hydration이 이루어지게 됩니다. 그 이유는 간단한데요 단순히 Hydration이라는 과정이 현재 브라우저에 렌더링된 페이지의 HTML과 JS를 연결하는 과정이기 때문입니다. 전체 JS Bundle에서 현재 페이지에 대한 JS를 실행하고, 컴포넌트 교체 및 수화가 일어난다고 생각하면 될까요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 안녕하세요. recoil 강의 부분에서 하나의 에러로 인해서 진행이 막힌 상태입니다! TypeError: Cannot destructure property 'ReactCurrentDispatcher' of ' {imported module [project]/nodemodules/next/dist/compiled/react/index.js [app-client] (ecmascript)} .default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined. "dependencies": { "next": "15.1.6", "react": "^19.0.0", "react-dom": "^19.0.0", "recoil": "^0.7.7" }, next 15 & react 19 버전으로 진행중이었는데 구글링을 해보아도 다들 더이상 recoi은 사용하지말라 이런 답만 알려주고있어 해결하기가 어려운 상태네요. 결국 버전문제인 것 같은데, 최신 버전으로 해당 문제가 해결이 어렵다면 다른 상태관리 라이브러리를 사용하며 진행하고싶은데요, Zustand 라이브러리를 사용해도 진행에 무리없을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 선생님. 강의 잘 듣고 있습니다. 강의를 듣고 Next.js도 아니고 React는 CSR 방식인데 왜 서버 컴포넌트를 지원하지? 라는 의문이 생겼습니다. React 공식문서를 보니 프레임워크와 통합하기 위해 Next.js 팀과 협력했다고 나오더라고요. React가 서버 컴포넌트를 지원하게 된 계기가 Next.js의 SSR 때문인지 궁금합니다. 공식문서 : https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 강의를 너무 잘 듣고 있습니다. 강의가 업데이트가 되었다는 공지를 오늘 처음 확인을 하게 되었는데 업데이트 된 내용으로 새로 듣고 싶은데 쿠폰을 혹시 발급 받을 수 있을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
제목그대로의 질문입니다! app/layout.tsx에서 <Providers>{children}</Providers> 와 같이 했을때 전체 페이지는 클라이언트 컴포넌트가 되는걸까요?
해결됨
한 입 크기로 잘라먹는 Next.js
한입 Nextjs강의 수강중입니다. 2.12) SSR 2. 실습 요 강의전체가 다른 강의보다 음량이 많이 작게 나오네요 수강에 문제는 없지만 혹시나 수정이 간단한 문제라면 한번 살펴보셔도 좋을것 같습니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql 연습 관련 주소가 더 이상 유지되고 있지 않는 것 같습니다. 일단은 새 강의 쿠폰 관련 문의 드렸는데, 이전 강의에 해당하는 주소들은 이제 유지하지 않는 건가요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요, 클론코딩 강좌 따라하던중 오류가 나는데 강사님 깃헙 클론해서 완성본 봐도 같은 오류가 나는것 같은데 무슨오류일까요.. ?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 정환님. 완강하고 혼자 google oAuth 와 jwt를 이용해서 로그인을 구현하는 와중에 아무리 찾아봐도 도저히 개념이 잡히지 않는 부분이 있어서 질문 드립니다. nextjs에서는 대부분의 컴포넌트들을 서버컴포넌트로 쓰는것을 권장하고, 상호작용을 위해 hydration이 필요한 컴포넌트들을 클라이언트 컴포넌트로 사용하라고 강의에서 배웠고 그렇게 구현을 하고 있습니다. nextjs의 로그인을 찾아보면 jwt로 access토큰과 refresh 토큰을 이용해서 구현을 하는 글들이 많이 있는데, access토큰은 로컬 스토리지나 state에 담고, refresh 토큰은 httpOnly 쿠키에 담으라고 합니다. 구현을 하다보니 컴포넌트에서 데이터를 페칭을 할때 서버에 access 토큰을 헤더에 담아 보내기 위해서는 로컬 스토리지나 state를 사용하기위해 무조건 클라이언트 컴포넌트를 사용해야 하는데 , 원래 이래야 하는 건가요? 이렇게 되면 데이터 페칭이 필요한 컴포넌트들을 무조건 클라이언트 컴포넌트가 되어버립니다. 아니면 서버 컴포넌트를 사용하고 페칭이 필요할때는 쿠키에 있는 refresh 토큰으로 매번 검증을 해야하는것인지.. 강의에 많이 벗어난 내용 같긴 한데 이렇게 사용하는게 맞는건인지 .. 개념이 잘 잡히지 않아 질문드립니다. 강의는 정말 잘 들었습니다. 새해 복 많이 받으세요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요!! 강의 너무 잘 듣고 있습니다! 다름이 아니라 css 거의 마지막까지 왔는데 새 강의가 나왔다는 사실을 알게 되어서 저도 새로운 버전으로 강의를 수강하고 싶은데요! ㅠㅠ 실제로 82강에 나오는 my-shop 깃헙 페이지가 다운되기도 했고 해서 새로운 버전으로 꼭 수강하고 싶습니다!! 저도 쿠폰을 받을 수 있을까요? 좋은 강의 제공해 주셔서 정말 감사합니다!
