게시판 리스트 작성할 때 use client를 어디서부터 붙여야할지 모르겠어요

답변이 조금 늦었네요..!리스트 데이터를 클라이언트 상태로 어떻게 관리할지 고민할 때, 저도 같은 질문을 자주 하게 되어요. 특히 좋아요나 조회수처럼 계속 바뀌는 값이 들어간다면, 구조 설계에서 선택지가 애매하기도 해요.결론부터 말하자면, 리스트 전체를 통으로 관리하는 방식보다는, 각 레코드를 저장하고 개별 상태로 구독하는 방식이 가장 현실적이고 일반적인 선택인 것 같아요.그 이유는 다음과 같아요.먼저, 리스트 단위로 zustand에 통째로 저장하는 방식은 구현이 단순하다는 장점이 있어요. 초기 데이터 신뢰성도 높고, 서버에서 한번에 가져오기 때문에 깔끔하죠. 하지만 이 방식은 말씀주신 것처럼 한 레코드의 좋아요 수만 바뀌어도 전체 리스트가 다시 렌더링되기 때문에 성능에서 손해를 봅니다. 동적 상호작용이 많을수록 이 비용은 커져요.반면, 각 레코드를 Map 형태로 분리해 저장하면 레코드 단위로만 렌더링이 발생해요. 좋아요가 눌리거나 조회수가 늘어나더라도 해당 레코드만 변경되고, 나머지는 그대로 유지되어요. SSR로 리스트 전체를 내려준 뒤 클라이언트에서는 필요한 레코드만 다시 fetch하거나 상태를 갱신하면 되기 때문에, 초기 속도와 동적 업데이트 사이의 균형도 잡을 수 있어요.('use client' 가 되는 것과 SSR 여부는 별개여서요. 강의의 렌더링 파트를 보시면 조금 더 확실해지실 것 같아요 🙂 )조금 번거롭긴 하지만 결국 이 방식이 유지보수성과 성능, 유연성을 동시에 확보할 수 있는 구조인것 같아요. 실무에서 React 앱을 설계할 때도 이 방식을 주로 했던 것 같아서요.초기 데이터는 서버에서 리스트 형태로 내려받되, 클라이언트 상태에서는 Map 형태로 변환해 저장하고, 각각의 레코드를 zustand로 구독하는 구조를 추천해요. 그나마 적절한 타협점 인것 같아서요.

'왜 Next.js 가 필요할까?(기술적인 등장 배경)' 에서 언급하는 영상들이 무엇일까요?

안녕하세요 지환님 질문 주셔서 감사해요 아래와 같이 각 영상 안내드립니다 1번 비동기에 대한 영상https://youtu.be/OITMfwqmUNY?si=W_CcPkZ8PENPMHFd 2번 ssr 에 대한 영상https://youtu.be/D71ByEIBWEs?si=kdda_ciDD-RXaixx

Parallel Route를 사용한 모달에 대해 질문이 있어요.

정확하게 보셨어요 default.js를 잘 활용하면, 그와함께 경로 설계를 함께 바꾼다면 가능해요..!default.js는 슬롯이 비어 있을 때 보여 줄 기본 화면만 담당해서요.딥 링킹과 공유 가능한 URL을 얻으려면,모달을 @modal 같은 병렬 슬롯으로 분리한 뒤그 안에 (.) intercepted route를 두어야 합니다. 이렇게 URL 자체에 배경 경로를 포함시켜야 새로고침이나 직접 접근에서도 리스트 + 모달이 함께 복원되어서요. 다시 말해 default.js만으로는 해결되지 않고, 경로 설계를 함께 바꿔야 해요.

유튜브 영상과의 차이점 문의

유튜브에서 함께 공부해주셨군요 :)아래 4개가 인프런 강의에만 있는 영상입니다.router.push() 종료 시점을 잡는 방법?왜 route.ts 와 page.tsx 는 다른 폴더에 선언해야 할까? 왜 props 로 함수를 전달(Server -> Client Component)할 수 없을까?ISR 언제 사용해야 할까?또한 4월 중에 Composition patterns 에 대해 추가로 업데이트할 예정이어요.혹시 Next.js 안에서 강의가 필요한 주제를 말씀해주시면, 추가로 강의를 제작하여 업데이트 해볼게요. 🙏

자동화 스크립트 관련하여 질문있습니다.

맞아요. 다만 동적 라우팅 관련 처리는 기존 스크립트보다 좀 더 복잡할 수 있어서요 ㅎㅎ 제가 진행했던 것처럼 claude 활용해서 해보시면 힌트를 얻으실 수 있으실 거여요 하다가 잘 안되는 부분이 있다면 언제든지 또 질문 주셔요!

template.tsx 가 SEO 에 주는 이점에 대한 질문

네, 맞아요.말씀해주신대로 template.tsx는 항상 새로운 React 트리로 마운트한다는 특징이 있어서요. 이 점을 SEO 메타데이터 처리에 활용하면 다음과 같은 보완이 가능해요.메타데이터 초기화 보장보통 layout.tsx나 전역 상태에 메타데이터 로직을 두면, 클라이언트 내비게이션 시 상태가 유지되면서 예기치 않게 이전 페이지의 메타 정보가 잠시 남아 있을 수 있어요.반면 template.tsx는 페이지 구간(segment)이 바뀔 때마다 새로 인스턴스를 생성하므로, 메타데이터 관련 훅(generateMetadata)이나 사이드 이펙트가 항상 깨끗한 상태에서 실행돼요.정확성·일관성 향상전역 캐시나 리액트 컨텍스트 등을 통해 메타데이터가 캐싱되어 버리면, 의도치 않은 타이밍에 구버전 메타가 적용될 수 있죠.template.tsx를 이용해 메타데이터 로직을 감싸 두면, 페이지 전환 때마다 확실히 최신 데이터로 갱신되므로 SEO 크롤러나 소셜 미리보기에서 늘 올바른 정보를 읽어 가게 할 수 있어요.보완적 수단으로의 활용물론 Next.js 자체의 Metadata API(generateMetadata)는 SSR/SSG 단계에서 메타 태그를 정확히 생성해 주지만, 클라이언트 라우팅 환경에서는 위에서 말씀드린 전역 상태 이슈가 발생할 수 있어요.따라서 전역 상태 관리나 클라이언트 캐시로 인한 “메타데이터 미적용” 문제를 보완하려면, template.tsx 내에 메타데이터 호출을 두는 설계가 효과적인 패턴이 될 수 있어요.다만, 다음과 같은 trade off가 있어서요. 잘 고려하셔서 template 사용하시면 좋을것 같아요 :)클라이언트 컴포넌트 상태 초기화template.tsx는 페이지 전환 시마다 완전히 새로 마운트되기 때문에, 그 자식으로 포함된 모든 Client Component의 state와 effect가 유지되지 않고 재동기화됩니다. Suspense fallback 반복 노출Suspense Boundary를 사용 중이라면, 레이아웃에서는 최초 한 번만 fallback UI를 보여주지만, 템플릿에서는 매번 네비게이션 시 fallback이 다시 표시됩니다.(갱신되므로) 렌더링 오버헤드 증가레이아웃이 공통 UI를 재사용해 부분적 업데이트만 수행하는 반면, 템플릿은 전체 컴포넌트를 매 전환마다 리마운트합니다. 이로 인해 불필요한 DOM 재생성 및 리렌더링 비용이 발생할 수 있어, 대규모 UI에서는 성능 저하로 이어질 수 있습니다.

state 없이 modal을 구현하는 방법

짤린것 알려주셔서 감사합니다 업로드 정상적으로 수정해서요. 답변은 해결로 처리해둘게요 🙇‍♂혹시 추가로 이상이 있다면 알려주셔요 🤗

state 없이 modal을 구현하는 방법

영상이 짤려있네요..!다시 업로드 완료했어요 확인 부탁드립니다 🤗

색션1 예제 코드 질문드립니다.

안녕하세요! 해당 코드는 커밋을 남겨두지 않았는데요. 오늘 밤까지 아래 예제 레포에 함께 올려둘게요..! 기다려주셔서 감사합니다https://github.com/boaz-hwang/nextjs-sample-for-lecture.git