묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결손에 익는 Next.js - 공식 문서 훑어보기
안녕하세요 generateStaticParams 관해서 질문
// [country]/layout.tsx const SUPPORTED_LANGS = ['kr', 'us']; interface LangMap { [key: string]: string; } const LANG_MAP: LangMap = { kr: 'ko', us: 'en' }; export function generateStaticParams() { return SUPPORTED_LANGS.map(country => ({country})); } export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, params, }: { children: React.ReactNode; params: { country: string }; }) { return ( <html lang={LANG_MAP[params.country]}> <body> <TanstackQueryProvider> <div className='container'> <BannerWrap/> <Header/> <main>{children}</main> <Footer/> </div> </TanstackQueryProvider> </body> </html> ); }import Banner from "@/component/Banner"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { fetchBanner } from "@/fetch/getReviews"; import { dehydrate, HydrationBoundary } from "@tanstack/react-query"; export default function BannerWrap () { const queryClient = getQueryClient(); queryClient.prefetchQuery({ queryKey:['banners'], queryFn: fetchBanner, }) return ( <HydrationBoundary state={dehydrate(queryClient)}> <Banner /> </HydrationBoundary> ) } 빌드 후 next start로 테스트 중 의문점이 들어서 질문드립니다!generateStaticParams 와 fetch의 revalidate 10초, tanstackQuery staleTime 10초 로 설정후RootLayout 에서 BannerWrap에 prefetchQuery와 HydrationBoundary 를 통하여 data를 prefetch하고있는데 이게 layout이 전역에서 실행되서 그런지 생성된 페이지 개수만큼 요청을 날리는데 next에서는 같은 요청이 중복되지 않도록 요청을 캐시하고 중복 요청을 제거 한다고 배웠는데이렇게 중복으로 요청하는 이유는 뭘까요?
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
next/image에 대한 질문
질문 1. next/image는 (Image컴포넌트) 웹사이트의 로딩 성능에 많은 영향을 미치는 이미지를 사용하는 것만으로도 큰 개선을 볼 수 있도록 해주는 컴포넌트이라서 비용이 비싸다고 하는데 그렇다면 AWS로 배포했을 때 next/image 때문에 비용이 더 올라가나요?질문 2. next/image가 비용이 비싸다면 어떤 경우에 사용하는지 궁금합니다.
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
데이터 재검증 방법
강의에서 데이터를 재검증하는 방법으로 route handler를 생성하고 그 안에서 revalidateTag 함수를 호출해서 캐시를 지우는 방법을 소개해주셨는데요! 그와 관련해서 궁금한게 세가지 있어서 질문 드립니다.버튼과 같은 클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 route handler로 요청을 보내고 route handler 내에서 revalidateTag 등을 사용하는 방법밖엔 없는걸까요?위의 방법으로 캐시를 지운 후 브라우저를 직접 새로고침해야 새로운 데이터를 가져와서 화면상에서 갱신이 되던데 직접 새로고침하지 않고 캐시를 지움과 동시에 바로 화면상의 모습도 갱신하려면 어떻게 해야 하나요?next.js에서도 react처럼 axios를 많이 사용하나요? 제가 지금까지 이해한 바로는 next.js는 여러가지 캐싱 기능을 fetch를 이용한 요청으로 제공하는 거 같더라구요. 그리고 공식문서나 다른 블로그 글들 혹은 강의를 봐도 데이터 패칭 및 캐시 부분에서는 fetch를 사용하는 예시만 나와서 next.js의 캐싱 기능을 활용하려면 fetch를 사용해야 하는건가 싶습니다. react를 이용할 때에는 보통 실무에서는 axios를 많이 사용한다고 들었었는데 next.js는 어떤지 궁금합니다
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
next.js 에서 서버 컴포넌트 비중을 늘리는 이유
1. 강사님께서 올려주신 답변들을 봤습니다. "공식 문서에서 클라이언트 컴포넌트를 트리의 끝에 보내라고 권한다. 서버 컴포넌트를 최대한 활용하기 위한 권장 사항이라고 이해하시면 좋다."이라고 봤는데 프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요? 2. 서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요?
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
route.ts에 async 키워드가 필요한가요?
/app/api/revalidate/route.ts 파일 내 POST 함수가 async로 선언되어 있습니다. 본문에 await이 없는데 async로 선언되어야 하나요?
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
import 절대경로 설정 방법 질문 드립니다!
조은님 안녕하세요 🙂 강의 잘 보았습니다!강의를 보다가 문득 궁금한 점이 있는데요! import 문 통해서 절대경로로 파일을 불러올 때, 전역에 있는 tsconfig.json 내에서 파일별로 일일이 수동 설정을 해주어야하는 걸로 아는데 조은님께서는 자동으로 @가 붙여진 형태로 불러와지는 거 같아서요! 혹시 따로 설정 어떻게 하셨는지 여쭤봐도 괜찮을까요?
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
VSCode 확장프로그램은 어떤 것을 사용하셨나요?
안녕하세요 강의 잘 들었습니다. 혹시 VSCode에 어떤 확장프로그램들을 사용하셨는지궁금합니다.강의 듣다보면, 자동완성 되는 부분들이 있는데,제 환경에서는 그런 VSCode UI가 안뜨더라구요. 감사합니다.
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
환경변수 오류
환경변수 설정해서 입력하면 오류가 나타납니다
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
하이드레이션 질문 드립니다
CSR에서 비어있는 HTML을 파싱할 때 id="root" 엘리먼트를 만나면 리액트 앱을 마운트(JS 실행)하는 것과SSR에서 서버에서 pre-render되어 생성된 HTML에 JS에 연결하는 과정인 하이드레이션은 어떤 차이가 있는건가요? CSR에서 비어있는 HTML에 JS를 연결해서 실행시키는 것도 하이드레이션 아닌가? 하는 생각이 들었는데비어있는 HTML과 서버에서 렌더링된 HTML의 데이터 존재 여부에 따라 다른건지,아니면 CSR도 하이드레이션 과정을 수행하는지 궁금합니다.
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
프론트엔드가 Next를 이용하여 API 만드는 이유가 궁금합니다~!
안녕하세요 선생님~!일단 먼저 ㅠㅠ... 질문이 너무 많아서 죄송합니다 ㅠㅠㅠ...! 제가 아직 주니어여서 메인 프엔 개발자 선배님을 보조하여,만들어진 다양한 모듈이나 비즈니스 로직 등을 이용하여 데이터 패칭/포스트/뮤테이션 정도만 하면서 자잘한 기능 구현 정도만 하고 있고 백엔드 지식이 전혀 없어서 그런지 next를 공부하면서 아직도 가장 아리송한 것이프론트엔드 개발자가 API를 만드는 것이 어떤 의미(?)인지 잘 모르겠습니다...! Next를 이용하여 프론트엔드 개발자가 serverless로 API를 개발하는 것이 어떤 경우에서 쓰이는 것인지, 이것이 얼마나 중요하고 대단한 기술인지 잘 와 닿지 않습니다. 저는 백엔드 개발자가 API를 개발 완료하면 프론트엔드 개발자는 swagger와 같은 API 문서를 참고하여 프론트 개발을 진행하는 것이 각자의 역할로 이해하고 있었는데 Next로 넘어오면서 프론트엔드 개발자가 API를 개발한다는 것에서 백엔드 개발자의 역할이 축소가 된 것인지 의문점이 들고 주니어로서는 러닝커브가 확 올라간 느낌이 듭니다 ㅠㅠ! 선생님께서는 현업에서 직업 모든 API를 개발하여 사용하시는 걸까요? 아님 이번 revalidate와 같은 몇가지 경우에서만 API를 개발하여 사용하시고 나머지 롤은 백엔드가 담당하는 것인가요? 바쁘실텐데 질문이 많아서 정말 죄송합니다 ㅠㅠ질 좋은 강의와 정성스러운 답변 덕분에 많은 배움을 얻어감에 정말 감사한 마음뿐입니다!건강하세요!
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
generateStaticParams에 대하여 질문 드립니다~!
안녕하세요 선생님 좋은 강의 정말 감사합니다. 다름이 아니라, 강의 중에선 generateStaticParams에 관하여 다루진 않는 것 같아서혼자서 공부중인데 그럼에도 여전히 궁금하고 확실하게 이해되지 않는 몇가지가 있어서 질문드립니다~! 기존 Next12에서 SSG(정적페이지 Pre-Rendering)을 Next13에서는 generateStaticParams로 대체 된 것이 맞을까요? (동적라우팅페이지 포함) generateStaticParams 를 이용하여 증분정적생성(ISR) 형식으로 배포하려면 기존 fetch 옵션에 동일하게 { next: { revalidate: 60 } }를 추가해주면 되는게 맞을까요?Next12에서는 데이터를 패칭한 정적페이지를 미리 생성해놓음으로서, 유저에게 빠른 속도로 페이지를 제공한다는 장점이 있다는 것을 공부했던 기억이 있습니다. 그런데, Next13 이후부터는 서버 '컴포넌트' 단위의 개발을 지향하는 듯 한데 generateStaticParams을 이용하여 개발하는 것이 어떤 의미인지 잘 이해가 되지 않습니다~! 단지 Next13에서 정적페이지 생성을 위한 함수를 남겨둔 것이라고만 이해하면 좀 쉬울까요? 서버 컴포넌트는 generateStaticParams로 build하는 페이지에선 사용할 수 없는 것일까요?저는 아직 대규모 프로젝트를 진행해본 적이 없는 주니어 개발자입니다. 보통 현업에서 동적라우팅 SSG 페이지를 대량으로 생성하여 배포하는 경우가 많을까요? 보통 어떤 경우에 많이 사용하실까요? 바쁘실텐데 질문이 많아 정말 죄송합니다 ㅠㅠ!날이 많이 추워졌는데 건강에 유의하셨으면 좋겠습니다.감사합니다~!
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
선생님 혹시 Next.js 13에서의 React-query는 어떻게 생각하실까요?
안녕하세요 선생님!좋은 강의 정말 감사하게 듣고 있습니다.선생님의 강의를 듣다보니, Next.js 13의 Data Fetching 방법이 React Query과 유사함을 느꼈습니다.(주니어라 부족함이 있어 실제론 유사하지 않을 수도 있지만..!) Next 13의 데이터 패칭 방법이 react 에서 React Query를 사용하여 서버 API의 데이터를 일정 시간동안 fresh 상태로 갖고 있는것 stale한지 chach로 체크하는 것 모두 흡사 하다고 느꼈습니다. React Query의 가장 큰 강점은 클라이언트-서버간의 데이터 동기화가 가장 큰 장점이라고 생각하는데 만약 Next 13의 데이터 패칭 방법을 사용한다면번거로운 React Query의 보일러코드들을 사용하지 않아도 React Query의 장점을 그대로 살려 쉽게 사용할 수 있을 것 같아보입니다! 따라서, Next 13에선 React Query가 무한스크롤 외에 사용할 일이 거의 없을 것만 같아보이는데...! 어떻게 생각하실지 의견이 궁금합니다...!next 13과 react query 조합은 앞으로 거의 사용하지 않게 되는 걸까요? 선생님의 고견을 나눠주시면 감사하겠습니다~!바쁘실텐데 번거롭게 해드려서 죄송합니다!감사합니다!
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
클라이언트 컴포넌트는 SSG? SSR?
이전 질문글에 답글을 남겼는데, 확인하기 힘드실 것 같아 질문을 새로 작성합니다. 클라이언트 컴포넌트는 기존 Next12처럼 Pre-Rendering으로 제공된다고 알고 있는데, 이는 기본적으로 SSG인가요? 아니면 SSR인가요? 또 둘 중에 선택이 가능한지 궁금합니다!
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
SSR과 RSC의 차이점에 관하여 질문이 있습니다.
기존의 Server Side Rendering(SSR)과 다른 점을 간단하게 정리하자면 SSR은 서버에서 페이지 단위로 정적인 리소스를 생성하지만 RSC는 컴포넌트 단위로 정적인 리소스를 생성할 수 있다는 점입니다.여기서 RSC의 가장 큰 장점이 나옵니다. 클라이언트로 내려보내는 JavaScript 번들 크기를 줄일 수 있게 되는 것이죠.라고 하셨는데, RSC가 단순 컴포넌트 단위로 정적인 리소스를 생성한다고 해서 왜 SSR보다 클라이언트로 내려보내는 JS 번들 크기를 줄일 수 있는지가 궁금합니다!
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
nextjs의 14버전에서 data fetch
fetch가 next.js에서는 확장된 버전을 제공한다고 했는데어디가 어떻게 확장되었는지가 궁금합니다!그리고 13버전 이전에는 fetch에서 캐싱이 되지 않았던 것일까요?차별화된 이점인지 궁금합니다!
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
비동기 호출, fetch, 라우트 핸들러 관련 질문입니다.
안녕하세요! revalidateTag 함수 관련 코드를 보다가 궁금한 점이 생겨서 질문 드립니다!우선 fetch를 통해 데이터를 받아오는 비동기 호출은 서버 컴포넌트에서만 호출할 수 있다고 해서 날씨API나 시간API를 서버 컴포넌트에서 fetch를 이용해 받아오는 것 까지는 이해가 갔습니다.그런데 아래와 같이 캐시를 비우는 버튼을 만들 때는 클라이언트 컴포넌트에서 fetch가 사용되었습니다. 'use client' type Props = { tag : string } export default function RevalidateButton({tag} : Props) { const handleClick = async () => { const res = await fetch(`/api/revalidate?tag=${tag}`, { method : 'POST' }) console.log(res) } return <button onClick={handleClick}>캐시 비우기</button> }일단 이벤트 핸들러는 클라이언트 컴포넌트에서 사용 해야 되서 'use client'를 작성하는 것도 이해가 갔습니다. 그리고 revalidateTag 함수는 서버 컴포넌트에서 호출되야 하니깐 'api요청을 보내야 되서 fetch를 사용해야 한다' 라고 이해를 했는데요.. 그럼 혼란 스러운게..'fetch비동기 호출은 서버 컴포넌트에서 하라고 되어 있는데 revalidateTag같이 서버 컴포넌트에서 동작하는 함수를 호출하기 위해서는 어쩔 수 없이 fetch를 클라이언트 컴포넌트에서 사용해야한다' 라고 이해 하는게 맞을까요??그리고 위의 코드에서 method : 'POST' 라고 세팅하여 주셨는데 보내는 방식은 POST로 정해져 있는 것인지, 다른 메서드 (get, update, delete)로 사용하면 안되는 것인지 궁금합니다!아래는 핸드북(3. Next.js 손에 익히기 / 7.날씨데이터 조회하기 / 데이터 재검증하기 )에 설명해주신 내용인데요! revalidateTag는 서버 사이드에서 호출 가능합니다. 하지만 캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다. 때문에 API 형태로 revalidateTag를 호출할 수 있도록 만들어야 합니다. Next.js에서의 API는 라우트 핸들러를 통해 만들 수 있습니다."캐시를 풀어달라는 요청은 클라이언트(브라우저)에서 만들어집니다." 라는 말이 RevalidateButton 버튼을 클릭했을 때 handleClick 함수가 호출되는 때를 말씀하신 것인지 궁금합니다. 아래는 revalidateTag가 호출되는 서버 컴포넌트 코드입니다. import { revalidateTag } from "next/cache"; import { NextRequest, NextResponse } from "next/server"; export async function POST(req:NextRequest) { const tag = req.nextUrl.searchParams.get('tag'); if(!tag) throw new Error('태그는 필수!!') revalidateTag(tag) return NextResponse.json({message : '재검증에 성공했습니다', tag}) }revalidateTag 함수는 호출시 에러가 발생하는 경우는 없는건가요?? 제 생각에는 revalidateTag도 제대로 작동을 안할 수도 있으니깐 try catch 문으로 감싸서 호출하는게 맞지 않을까? 생각이 들었는데 그렇게 안해도 되는 것인지 궁금합니다!
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
revalidate 질문
안녕하세요 선생님강의 내용중에 revalite 의 방식이두가지가 있다고 하셨고 그중 하나인time 방식은 예를들어 10초로 설정하였다면10초후에 누군가가 요청을하면첫번째 요청자는 이전 값을 받고두번째 요청하였을때 새로운 값을 받는거라고 이해하였습니다. 그렇다면 게시판에 적용하였을때A유저가 새글을 작성하고다시 게시글 목록페이지로 돌아가면1번째 요청이 되기때문에 새글이 보이지 않고새로고침을하면 2번째 요청이 되어서보이게 되는 걸까요? 그리고 위의 내용이 맞다면작성후 목록 페이지로 갔을때본인이 작성했던 새 글이 바로 보이려면어떻게 해야할까요? 온디맨드도 요청이 있을때일단 먼저 값을 보여주고 그 다음부터 새 값을 보여주는거니 이건 아닌것같고..강의 보다가 좋은 방법이 있는지 궁금하네요 ^^ P.S : 정말 알차고 좋은강의 감사드립니다 선생님!볼때마다 너무 만족스러운 강의예요!
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
섹션3. 날씨 재검증하기 NextRequest 질문입니다.
콘솔로그 결과 안녕하세요 선생님, 강의를보고 간단하게 따라해보았는데요NextRequest 타입의 req를 매개변수로 받아와서req를 console.log 에 찍어보면 undefined가 뜹니다.혹시 NextRequest 사용에 조건이 따로 있을까요? req.nextUrl.pathname 으로 url 도 가져와보고 싶고한데생각처럼 잘 안되네요..
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
메타데이터 관련 질문
동적 메타데이터를 적용하려고 합니다.메타데이터가 위치해야하는곳에 대해서 궁금한데요generateMetadata 함수는layout 혹은 page.tsx 에만 위치해야 하나요?page.tsx 안에서 import 한 컴포넌트안에 넣었더니 적용이 안되길래 여쭤봅니다
-
해결됨손에 익는 Next.js - 공식 문서 훑어보기
비동기 호출 관련 질문있습니다!
혹시 서버 컴포넌트에서만 비동기 호출이 가능한건가요??그렇다면 서버 컴포넌트가 컴포넌트를 서버 내에서 미리 만들어 둘 때, 비동기 호출을 통해 데이터를 가져와서 이 값을 미리 가져와서 컴포넌트를 만드는 건가요??그리고 만약 그렇다면 왜 서버 컴포넌트에서만 비동기 호출이 가능하도록 만드신 건지 의도를 아시고 계신지 궁금합니다! (단순히 서버 컴포넌트의 장점 때문인건가요??)그리고 강의의 진행은 SSR을 사용한다는 가정하에 진행해주셨던 게 맞나요?? (SSG도 동일한 건가요?)
