Secret React Server Component Patterns They Don't Want You To Know 이 비디오는 다양한 모델의 React Server Components와 NextJS 13을 사용하여 추천 캐로셀 구현을 다룹니다. 추천 API 구축, Jotai atoms 및 custom hooks 사용, 서버 사이드 fetch 구현 및 React 18의 streaming 기능 활용이 포함됩니다. - 📚 NextJS 13은 React Server Components의 하나의 모델만을 지원하지만, Wakuwork은 더 나은 개발자 경험을 위해 다양한 모델을 제공하며, 이 강의는 추천 캐로셀 구현을 다룹니다. - React Server Components(RSCs)는 여러 모델을 가지고 있으며 NextJS 13은 가장 보수적인 모델만 지원하지만, Wakuwork은 RSCs의 다양한 모델을 보여줍니다. - 이전에는 자켓 선택기에 추가 아이템이 있었으며, 빨간색 및 녹색 경계 상자는 각각 서버 및 비서버 구성 요소를 나타냅니다. - 클라이언트 구성 요소와 중첩된 React Server Components는 좋지 않은 아이디어이지만, 이 예제는 여전히 작동하며, 강의에서 비교를 위한 참조점을 제공합니다. - 이 강의는 NextJS 13 버전을 다루며, 추천 캐로셀 구현에 초점을 맞춥니다. - 👨‍💻 NextJS 13에서 새 디렉토리와 routes 파일을 만들어 추천 API를 구축하고, 클라이언트에서 자체 서버로 요청을 보내기 위해 public 디렉토리를 마이크로서비스로 사용합니다. - NextJS 13에서 추천 API를 구축하려면, combinations라는 새 디렉토리와 GET 동사에 응답하는 routes 파일을 만들어야 합니다. 그리고 자신의 서버에서 색상 JSON 파일을 가져오기 위해 자체 요청을 보내야 합니다. - 클라이언트에서 자체 NextJS 서버로 요청을 보내기 위해 public 디렉토리를 마이크로서비스로 사용하고, 서버는 그 다음에 마이크로서비스로 요청을 보내고 JSON 응답을 반환합니다. - 👨‍💻 store.ts 파일의 Jotai atoms을 사용하여 제품 캐로셀 데이터를 요청할 수 있으며, useColor라는 커스텀 훅은 녹색으로 색상 atom을 초기화하고, 조합을 가져오기 위해 비동기 atoms와 종속성을 만들 수 있습니다. - 제품 캐로셀 데이터를 Jotai atoms의 store.ts 파일에서 요청합니다. - useColor라는 커스텀 훅은 녹색 색상 atom을 초기화하고, 문자열 값과 setter를 반환하여 컴포넌트에서 색상을 업데이트하는 데 사용됩니다. - Jotai는 비동기 atoms를 지원하며, atoms 간 종속성을 만들 수 있습니다. 이를 사용하여 색상별 조합을 비동기적으로 가져오는 데 사용할 수 있으며, 코드를 통해 설명합니다. - 🚀 NextJS 13은 이제 제품 선택 및 장바구니 추가를 위한 서버 및 클라이언트 구성 요소를 갖추고 있으며, Wakuwork은 프론트 엔드 개발을 위한 간단한 백 엔드를 제공합니다. - NextJS 13의 기본 구현은 서버 구성 요소 레이아웃과 Jotai hooks를 사용한 제품 선택과 장바구니 추가를 위한 클라이언트 구성 요소를 포함합니다. - Wakuwork은 프론트 엔드를 위한 더 간단한 백 엔드를 만드는 데 사용되는 액션을 사용하는 NextJS 13의 최소한의 경쟁자입니다. - Jotai를 사용하여 제품 셀렉터를 RSC 레이아웃에 클라이언트 구성 요소와 함께 추가하려면, public에 호스팅된 마이크로서비스에서 데이터를 가져오기 위한 API를 만들어야 합니다. - 🚀 React ServerComponent에서 fetchCombinations.ts와 useState/useEffect를 사용하여 마이크로서비스로 서버 사이드 fetch를 구현합니다. - "use server"가 상단에 있는 fetchCombinations.ts라는 새 파일을 만들어 서버 사이드 fetch를 구현합니다. 이 파일에는 localhost 3000의 절대 URL이 포함됩니다. - React ServerComponent에서 fetchCombinations를 사용하려면, useState와 useEffect를 사용하여 제품 셀렉터와 제품 캐로셀을 통과시켜야 합니다. - 👨‍💻 네트워크 호출 및 페이로드를 사용하여 요소 색상을 변경하고, 조합을 가져오기 위한 함수를 만들고, React 18의 streaming 기능을 활용하여 서버 구성 요소로 변환합니다. - 스피커는 별도의 API를 만들 필요 없이 네트워크 호출 및 페이로드를 사용하여 요소 색상을 변경하는 방법을 보여줍니다. - 조합을 가져오기 위한 함수를 만들고, React Server Component에서 어떤 하위 구성 요소에서도 사용할 수 있도록 전달합니다. 더 많은 복잡한 예제 코드인 Wakuwork 또는 Qwik를 참고해보세요. - React 18에는 마이크로서비스로 직접 fetch를 수행할 수 있도록 서버 구성 요소를 변환하는 streaming 기능이 있습니다. - 👕 React server components에서 색상 셀렉터를 변경하면 제품 캐로셀이 업데이트됩니다. 그러나 클라이언트 구성 요소를 중첩하면 무한 루프가 발생할 수 있습니다. - 제품 캐로셀을 자켓 색상 선택기로 가져오려면, Wakuwork 클라이언트의 Serve 함수를 사용하고 마운트된 상태를 추적하여 클라이언트에서 마운트된 경우에만 ProductCarousel이 사용되도록 합니다. - 페이지에 제품 캐로셀을 추가하려면, entries 파일 및 prefetch에 해당하는 항목과 prefetcher를 추가해야 합니다. - 네트워크를 검사하면 React server components에서 색상 셀렉터를 변경하면 제품 캐로셀이 업데이트됩니다. - React server components에서 클라이언트 구성 요소를 중첩하면 무한 루프가 발생할 수 있으므로 이는 안티 패턴입니다. - 🚀 NextJS 13 beta는 새로운 React Server Component 아키텍처를 도입하였습니다. 코멘트에서 선호하는 아키텍처를 공유해 주세요. - NextJS 13은 여러 가지 React Server Component 아키텍처를 제공하며, 스피커는 코멘트에서 선호하는 아키텍처에 대한 의견을 공유할 것을 권장합니다.