완강하고 질문 드립니다

안녕하세요! 강의 봐주셔서 진심으로 감사드립니다. 렌더링 기법의 경우 실무에서 필요에 따라 선택해서 사용합니다.SSR, CSR을 보통 혼용해서 사용합니다. 첫 렌더링에 SSR을 활용하고 이후 페이지 전환에 CSR을 적용하는 패턴이 흔히 보입니다.SSG, ISR의 경우 블로그나 회사 홈페이지 같은 정적인 컨텐츠를 제공할 때 많이 사용합니다.PPR의 경우 아직은 실무에서 널리 사용되는 기법은 아닙니다.개인적인 관찰에 따르면 CRUD까지 직접 구현한 블로그는 적은 편이라고 보입니다.티스토리나, 벨로그, 네이버 블로그 등의 블로그 서비스를 이용하는 경우가 아니라 직접 구현을 선택하는 경우에는 제 강의와 같은 마크다운 파일을 활용해서 구현하는 사례가 일반적입니다.요즘엔 옵시디언, 노션과 같은 메모 도구가 글을 퍼블리시할 수 있는 기능을 제공합니다. 이를 활용해서 블로그를 운영하는 사례도 종종 있습니다. (일부 유료로 알고 있어요)md 파일을 직접 작성하지 않고 글을 브라우저에서 작성/수정하려면 추가적인 기능을 붙여야 합니다. CMS(Content Management System)를 연계해서 개발하는 방법입니다. 아무래도 에디터를 직접 분이거나 외부 서비스를 연동하는 작업이다보니 직접 마크다운을 작성하는 것에 비해 개발에 힘을 더 쏟아야 한다는 단점이 있습니다. 빠르게 답변 드리고 싶어서 조금 건조하게 답변드렸는데, 더 자세한 이야기가 나누고 싶으시다면 추가로 질문 남겨주세요! 도움될 때까지 답변 드리겠습니다. 감사합니다. 하조은 드림

안녕하세요 generateStaticParams 관해서 질문

안녕하세요! 회신이 늦었습니다. 고민 많이 하고 계실텐데 답변이 늦어서 죄송합니다. 가능하다면 전체 코드를 알려주시면 확인이 조금 더 쉬울 것 같습니다. 짐작해보건데 빌드 시점에 prefetchQuery가 동작하면서 로그를 남기고 있는 게 아닐까 싶어요. 말씀주신 것처럼 Next.js의 캐시 있어서 중복 요청을 제거합니다. 이는 fetch 함수를 이용한 API 호출인 경우입니다. fetch 이전에 fetchBanner 내부에서 콘솔을 남기고 있는 것이라면 prefetchQuery 는 매번 호출될 수 있을 것 같습니다. 기다려주셨는데 명쾌한 답변을 드리지 못한 점 양해 부탁드립니다! 코드 저장소를 알려주시면 살펴보고 빠르게 답변 드릴게요!

다크모드 적용

안녕하세요! 라이브러리를 사용하지 않은 이유에 대해 질문 주셨네요 🙂 크게 두가지 이유가 있었습니다. 가급적이면 TailwindCSS 외의 추가 라이브러리를 사용하지 않고 구현하고 싶었습니다. 암묵지를 최대한 줄이고 싶었어요. 제가 해당 라이브러리의 존재를 몰랐습니다. 알았다고 하더라도 1번의 이유로 지금처럼 구현했을 거 같아요. 답변이 되셨으면 좋겠네요!다른 질문 있으시면 언제든 편하게 남겨주세요!

PPR 적용 한 후 에러가 났습니다.

안녕하세요!PPR 적용까지 오셨군요! 고생 많으셨습니다. 설치된 Next.js 버전을 봤을 때 Canary 버전이 아닌 것 같아요. PPR은 현재 Preview 기능으로 Canary 버전을 설치하셔야 활용해보실 수 있어요. Next.js 공식 문서를 참고하셔서 Canary 버전으로 Next.js를 설치해보시고 다시 시도해봐주세요! https://nextjs.org/docs/messages/ppr-preview 이후에도 문제가 있다면 언제든 질문 남겨주세요. 감사합니다.

CRA에서 Next.js로 마이그레이션하기에서 compilerOptions.moduleResolution bundler 불가

안녕하세요! 질문 남겨주셔서 감사합니다. 정확하게 말씀해주셨습니다. 말씀주신 것처럼 tsconfig.json의 compilerOptions.moduleResolution에 "bundler" 값은 TypeScript 5 이상에서 지원합니다. 때문에 해당 강의 중에 TypeScript 버전을 올리고 있습니다. 섹션 5. Next.js 설치하고 설정 파일 만들기 영상의 15초 지점을 참고해주세요. 질문 남겨주셔서 다시 감사드리며, 영상 확인 후에도 문제가 있다면 질문 남겨주세요!다른 질문도 언제나 환영입니다 🙂

next/image에 대한 질문

안녕하세요. 이미지 컴포넌트에 대해 질문 남겨주셨네요! AWS로 배포했을 때 next/image 때문에 비용이 더 올라가나요?next/image가 서버를 활용해 이미지 최적화를 하기 때문에 어느정도의 서버 운용 비용을 증가 시킬 수 있다는 의미로 질문을 해석했습니다. 이미지의 갯수, 페이지 방문 트래픽에 따라 차이가 있을 수 있지만 일반적인 경우라면 next/image를 사용한다고 해서 크게 차이날 정도는 아닐 것으로 예상합니다. next/image가 비용이 비싸다면 어떤 경우에 사용하는지 궁금합니다.이미지는 웹 서비스의 성능에 가장 많은 영향을 끼치는 요소입니다. 특히, LCP라고 부르는 지표에 큰 영향을 줍니다. 때문에 이미지 로딩 성능을 개선하면 웹 서비스의 성능 향상에 지대한 영향을 끼칠 수 있습니다. 이를 위해 Next.js에서는 next/image를 제공합니다. next/image는 다음과 같은 장점을 가지고 있습니다.디바이스 환경에 맞는 이미지 사이즈, 포맷으로의 자동 매칭레이아웃 시프팅 이슈 해결 (레이아웃 시프팅:이미지 로드 전과 후의 크기 차이에서 발생하는 레이아웃 트러짐 현상)이미지 지연 로딩으로 초기 로딩 속도 개선장점에 대한 자세한 내용은 공식 문서를 확인해보시면 좋을 것 같습니다. 결국 next/image를 사용했을 때의 장점이 어느정도의 비용 발생보다 큰 가치를 제공한다고 판단했을 때 next/image를 쓰는 것이라 말할 수 있을 것 같습니다. 질문 남겨주셔서 감사합니다.

데이터 재검증 방법

안녕하세요! 질문 남겨주셔서 감사합니다. 하나씩 답변드려볼게요! 클라이언트 컴포넌트에서 어떠한 동작을 수행한 후 데이터를 재검증 하려면 route handler로 요청을 보내고 route handler 내에서 revalidateTag 등을 사용하는 방법밖엔 없는걸까요?revalidateTag를 사용하는 이유에 대해 생각해보면 좋을 것 같습니다. 해당 함수는 캐시된 데이터를 비우고 새로운 데이터를 사용할 수 있도록 만들기 위해 사용합니다. 강의에서 캐시된 데이터는 서버에 존재하는 상태입니다. 때문에 서버에 있는 캐시를 비우기 위해 Route Handler를 이용해 서버에서 revalidateTag를 호출해 캐시를 비워야만 합니다. Route Handler를 이용하지 않고 서버에서 캐시를 비우는 방법으로는 Server Actions를 활용하는 방법이 있을 수 있습니다. 이는 강의에서 다루지 않았지만 공식 문서에서 다루고 있는 방식을 참고하시면 좋을 것 같습니다. 결국 서버에서 캐시된 값은 서버에서 해제해야 한다는 것이 규칙임을 알 수 있습니다. 직접 새로고침하지 않고 캐시를 지움과 동시에 바로 화면상의 모습도 갱신하려면 어떻게 해야 하나요?새로고침 없이 화면 상의 모습을 갱신하기 위해선 클라이언트 컴포넌트를 사용해야 합니다.새로고침 없이 데이터 갱신이 필요한 곳을 모두 클라이언트 컴포넌트로 활용하는 방법입니다. 이는 기본적인 React 활용 방식과 동일하게 API 응답값을 useState와 같은 상태로 저장해서 관리하는 방식입니다. next.js에서도 react처럼 axios를 많이 사용하나요?이번 App Router가 등장한 Next.js 13 이후에는 fetch 사용을 권장하고 있습니다. 캐시와 같은 성능 향상의 이점을 보기 위함입니다. 하지만 사용성 등에서 불편함을 느끼고 Axios와 같은 라이브러리를 쓰는 사례도 많습니다. 관련 사례를 소개하는 글을 남겨둘게요! https://blog.deercorp.com/next-js-app-router-and-fetch-library/추가 질문 있으시면 언제든 남겨주세요! 답변이 도움되셨으면 좋겠습니다.감사합니다.

next.js 에서 서버 컴포넌트 비중을 늘리는 이유

안녕하세요! 남겨주신 질문에 답변 드릴게요. 프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요?서버 컴포넌트의 비중이 늘어난다는 건 브라우저에서 해석할 컴포넌트가 줄어든다는 의미입니다. 따라서 JavaScript 번들 파일의 크기가 줄어듭니다. 이는 전체적인 어플리케이션의 로딩 속도 개선에 긍정적인 영향을 끼칠 수 있습니다. 서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요?이 부분은 답하기에 모호한 부분이 있는데요. 질문의 의도를 두 가지로 나눠서 답변드려보겠습니다. 만일 질문의 의도가 "번들 사이즈를 줄이기 위해 서버 컴포넌트를 활용하는 것인가요?" 라면 답은 "Yes" 입니다. 브라우저가 해야할 일을 최대한 서버가 처리해서 번들 사이즈를 줄여 로딩 속도, 퍼포먼스 향상에 도움을 주기 위해 서버 컴포넌트를 활용합니다. 허나 "Next.js를 사용하는 이유가 서버 컴포넌트가 주는 장점 때문인가요?"라는 의도로 질문 남겨주신 것이라면 답은 "No"입니다.현재를 기준으로 Next.js는 서버 컴포넌트를 사용하기 가장 편리한 프레임워크가 맞습니다. 때문에 서버 컴포넌트를 활용해 서비스를 개발하기 위해서 Next.js를 도입할 수 있죠.하지만 서버 컴포넌트는 Next.js의 전유물이 아닙니다. 이후 Remix와 같은 다른 프레임워크에서도 서버 컴포넌트를 활용할 수 있게 될 예정입니다. 따라서 서버 컴포넌트를 위해 Next.js를 쓴다고 잘라 말하기 어려운 부분이 있습니다.Next.js는 서버 컴포넌트가 없이도 React를 사용하는 개발자에게 개발 경험을 비롯한 퍼포먼스 개선에 도움을 주는 프레임워크 입니다. 서버 컴포넌트가 없는 13 버전 이전의 Next.js, Pages Router가 존재하는 이유입니다. 질문에 대한 답이 되었으면 좋겠네요.추가 질문이 있으시다면 언제든 편하게 남겨주세요! 감사합니다.

route.ts에 async 키워드가 필요한가요?

안녕하세요! 질문 남겨주셔서 감사합니다. 말씀주신 것처럼 해당 함수에 async 키워드가 사용되고 있습니다. 말씀주신 것처럼 내부에 await를 사용하지 않고 있어서 async 키워드가 없어도 괜찮습니다. 하지만 일반적으로 API에서는 비동기를 제어하는 경우가 많아 async 키워드를 넣어둔 상태입니다. 현재 상황에선 제거해도 무방합니다. 좋은 포인트 짚어주시고 질문 남겨주셔서 감사합니다.다른 부분에도 궁금증 있다면 편하게 질문 남겨주세요!

import 절대경로 설정 방법 질문 드립니다!

안녕하세요! 좋은 질문 남겨주셔서 감사합니다. 해당 설명은 tsconfig.json 내에 있는 paths 설정을 통해 적용하고 있어요!코드는 아래의 링크를 통해 확인하실 수 있어요!https://github.com/hajoeun/weather-app/blob/1a15ed20d5621eb86a0220f8716e2d4aa9eb1c1c/tsconfig.json#L21-L23"paths": { "@/*": ["./src/*"] } 혹시 적용해보시고 동작하지 않는다면 작업 중이신 코드를 알려주시면 도움 드릴겠습니다.질문 남겨주셔서 감사합니다!