안녕하세요 강의 잘 듣고 있습니다. 좋은 강의 만들어주셔서 감사합니다.구글 애드센스의 경우 한 개의 구글 아이디로 여러 사이트에 등록이 가능한 것인지 궁금합니다. (각 사이트별로 승인을 받을 경우)하나의 구글계정당 하나의 사이트만 등록이 가능한 경우 여러개의 구글 아이디로 사이트마다 애드센스를 붙여도 나중에 수익을 지급받거나 하는데 문제가 없을까요?미리 감사드립니다.

안녕하세요소플님 덕분에 리액트 공부 잘하고 있습니다.chapter14 실습영상을 계속 돌려보고 있는데 이해가 안가서요..DarkOrLight 컴포넌트가 ThemeContext MainContent 두개의 컴포넌트를 하위로 가지고 있는거 같은데 return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <MainContent /> </ThemeContext.Provider> ); ThemeContext.Provider Provider 로 감싼다는 부분이 이해가 잘안되서요 ㅠ Provider 로 감쌌을때 ThemeContext 컴포넌트를 사용한다는 의미인가요? 전체적인 설명 부탁드립니다 ~!!

안녕하세요 선생님. 좋은 강의를 정말 잘 듣고 있습니다ㅎㅎ [네비게이션관련 커스텀 훅] 강의에서 궁금한게 생겼는데요~ 쿼리 스트링에 page와 size가 있는데, moveToList에 파라미터로 page와 size를 전달해서 처리해야 하는 이유가 무엇인지 알 수 있을까요?

2.8 페이지별 레이아웃을 설정하는 방법을 듣고있는 학생입니다!getLayout이란 메서드를 레이아웃을 적용할 컴포넌트 객체에 생성해서 _app.tsx 파일에서 메서드를 통해 레이아웃을 적용시키는 방법이라는건 이해했습니다.그런데 여기서 궁금했던 점이특정 레이아웃을 적용하기 위해 페이지 마다 따로 코드를 작성해줘야 하는 방식이라면그냥 레아이웃 컴포넌트를 적용시킬 컴포넌트의 최상위 요소로 감싸주는게 app.tsx에 추가로 코드를 작성할 필요도 없어 더 좋지 않나요?그리고 리액트 라우터에서는 특정 레이아웃을 적용시킬 컴포넌트들을<Route element={<Layout/>}><Route/> 이런 path가 없는 컴포넌트 안에서 감싸주는 방식을 사용하는걸로 알고 있습니다.지금 배우는 방식보다 더 직관성이나 코드 길이 등에서 리액트 라우터가 더 좋은거 같은데 Next는 페이지별 레이아웃 설정방식이 getLayout로 설정하는것 밖에 없는건가요?유지보수 할 때 특정 레이아웃이 적용된 페이지를 찾기 위해 getLayout을 사용한거라 보기에도 뭔가 애매하게 느껴지고 app.tsx에서 타입을 추가로 만들어줘야 해서 코드가 더 복잡해 보이는거 같습니다.

안녕하세요!이번 강의에서 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 포함된 페이지는 다이나믹 페이지라고 이해했습니다. 글을 찾아보니 middleware 에서 쿠키를 처리할 수 있다고 했습니다.찾아보니 Middleware에서 쿠키를 처리할 수 있다는 글을 봤는데, 이를 활용하면 동적 함수의 영향을 제거하여 정적 페이지로 만들 수 있는지 궁금합니다.또한, 클라이언트 컴포넌트 측으로 뺴면 정적인 페이지로 만들 수 있는지 궁금합니다. 

https://inf.run/h8zSF An error occurred in the <App> component.Consider adding an error boundary to your tree to customize error handling behavior.Visit https://inf.run/MNrmr to learn more about error boundaries. Error Component Stack at App (App.jsx:63:28) 라는 오류가 뜹니다

안녕하세요.클라이언트 컴포넌트 안에, 서버 컴포넌트를 import 할 수 없다라는 주의 사항에 대해 궁금한 점이 있습니다.Next.js 공식문서에는 아래와 같이 클라이언트 컴포넌트 안에 서버 컴포넌트를 직접 Import해 사용할 수 없다고 나와 있는데요.공식문서강의에서 실습했을 때는, 클라이언트 컴포넌트 안에서 서버 컴포넌트가 사용되는 경우, 자동으로 클라이언트 컴포넌트로 바뀌는 것을 확인했습니다. 그렇다면,서버 컴포넌트가 클라이언트로 바뀔 수 있는 경우는 해당 패턴을 사용해도 되는 건가요?아래와 같이 서버 컴포넌트의 기능을 사용한다면, 에러는 나지 않지만 fetch 요청이 여러 번 되는 등, 정상적인 동작이 되지 않는 것을 확인했습니다. 이런 경우에 한해 지양하면 될까요?결과적으로, 서버 컴포넌트가 클라이언트 컴포넌트로 바뀔 수 있는 경우, 제대로 동작하지만, 지양하자는 것으로 이해하면 될까요?// 클라이언트 컴포넌트 "use client"; import ServerComponent from "@/components/server-component"; export default function ClientPage() { console.log("클라이언트"); return ( <div> <h1>클라이언트</h1> <ServerComponent /> </div> ); } // 서버 컴포넌트 export default async function ServerComponent() { const res = await fetch("https://jsonplaceholder.typicode.com/todos/1"); const value = await res.json(); console.log(value); return ( <h1>서버 컴포넌트</h1> ); } 감사합니다.

안녕하세요!다이나믹 페이지에서 데이터 패칭이 오래 걸리는 문제를 해결하기 위해, Next에서 임시로 로딩 UI를 보여주고, 추후 패칭이 완료되면 스트리밍으로 업데이트하는 것으로 이해했습니다.로딩 UI는 데이터 패칭이 느릴 때 유용하지만, 패칭이 빠른 경우 오히려 깜빡거리는 느낌이 들어 사용자 경험 측면에서 안 좋을 수 있다고 느꼈습니다.물론 제가 생각했을 때 가장 베스트는 API 속도를 측정하여 특정 시간 이상인 경우에 스트리밍 기술을 적용하고, 그 외에는 안하는 것이 좋다고 생각을 했지만, 측정하기도 힘들 뿐더러, 사용자 네트워크도 신경을 써야 하기 때문에 이러한 방법은 어렵다고 생각을 했습니다.이러한 문제에서 강사님의 생각을 듣고 싶어 질문드리게 되었습니다.

윈도우에서 cmd + shift +I 해도 안되는데요 ㅠㅠ혹 유료기능인가요

Database Settings에서 Connection parameters의 Host 주소를 복사하려고하는데 Connection parameters 자체가 안보이는데 어떻게 하면 좋을까요 ??

안녕하세요!클라이언트 라우터 캐시 기능에 대해 궁금증이 있어서 질문합니다. 클라이언트 라우터 캐시에 공통적으로 쓰이고 변하지 않는? 레이아웃들을 캐싱한다고 이해했습니다. 제가 궁금한 것은 RSC Payload는 수시로 바뀔 수 있을 것 같아 라우터 캐시에 저장하기 어렵겠지만,JS Bundle은 클라이언트 컴포넌트들로 구성되어 있다면 변하지 않으므로 캐싱해도 되지 않을까 생각을 해봤습니다.

안녕하세요!풀 라우트 캐시 이후 JS Bundle, RSC Payload도 불러오는지 궁금해서 질문해봅니다. Next Link를 통해 페이지를 교체할 때, Next 서버는 JS Bundle과 RSC Payload를 클라이언트로 전송하고, 클라이언트는 이를 적절히 결합하여 페이지를 렌더링하는 것으로 이해했습니다.만약 초기 접속 시 풀 라우트 캐시되어 있는 static html를 불러온 이후, JS Bundle, RSC Payload도 불러오는지 궁금합니다.그리고 초기 접속 시 다이나믹 페이지 또한 html을 불러온 이후, JS Bundle, RSC Payload도 불러오는지 궁금합니다. 제 생각은 불러올 것 같지만, 확실히 알면 좋을 것 같아서 질문드려봅니다. 

안녕하세요!build할 때 계속해서 type 오류가 발생하여 질문 드립니다.현재 page.tsx에는 아래와 같이 작성되어 있습니다.import BookItem from "@/components/book-item"; import { BookData } from "@/types"; export default async function Page({ searchParams, }: { searchParams: { q?: string; }; }) { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${searchParams.q}` ); if (!response.ok) { return <div>오류가 발생했습니다...</div>; } const books: BookData[] = await response.json(); return ( <div> {books.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); }근데 여기서 build를 하면 아래와 같은 에러가 발생합니다..next/types/app/(with-searchbar)/search/page.ts:34:29Type error: Type 'Props' does not satisfy the constraint 'PageProps'. Types of property 'searchParams' are incompatible. Type 'Record<string, string | string[]> | undefined' is not assignable to type 'Promise<any> | undefined'. Type 'Record<string, string | string[]>' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 32 | 33 | // Check the prop type of the entry function> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() | ^ 35 | 36 | // Check the arguments and return type of the generateMetadata function 37 | if ('generateMetadata' in entry) {Next.js build worker exited with code: 1 and signal: null사실 gpt를 이용하여 받은 코드로 작성해보면 에러를 해결할 수는 있는데 이게 근본적인 해결 방법인지 잘 모르겠고, gpt가 작성한 코드가 잘 이해가 되지 않습니다.우선 gpt에서 받은 답변은 아래와 같습니다.import BookItem from "@/components/book-item"; import { BookData } from "@/types"; export default async function Page({ searchParams }: any) { const qRaw = searchParams?.q; const q = Array.isArray(qRaw) ? qRaw[0] : qRaw ?? ""; const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/search?q=${encodeURIComponent(q)}` ); if (!response.ok) { return <div>오류가 발생했습니다...</div>; } const books: BookData[] = await response.json(); return ( <div> {books.map((book) => ( <BookItem key={book.id} {...book} /> ))} </div> ); }이렇게 하면 해결은 되긴합니다.다만 왜 해결이 되는 건지 이해가 잘 되지 않아서 그런데 왜 자꾸 build할 때 type 오류가 발생하는지 알려주시면 감사드리겠습니다!

버튼눌러서 게시글 조회하면 404에러뜨는데 뭐가 문제인지 알 수 있을까요?

안녕하세요 선생님. material까지 강의를 들으면서 두 가지 궁금한 점이 생겼습니다. 로컬 서버에서 ctrl+s 하면 자동으로 핫로딩되어 코드 변경사항이 화면에 반영되는 것으로 알고 있습니다. (리액트의 경우는 root부터 리렌더링)  그런데 핫로딩을 했을 때 바로 반영되는 코드가 있고, 직접 브라우저에서 새로고침해줘야 반영되는 코드가 있었습니다.  <핫로딩 시 안변함 (only 새로고침으로만 변경사항 반영됨)> material wireframe 적용camera fov, far 속성그 외 등등 <핫로딩 시 변함> Geometry 종류 변경 transform 속성 변경 (position, scale, rotation)mesh color 변경materal 종류 변경그 외 등등 위와 같은 차이가 발생하는 이유를 잘 모르겠습니다. 내부 동작면에서 뭔가 다른게 있는 걸까요? (three.js 코드를 까보면 좀 명확해지려나요...) Mesh의 정의를 어떻게 내려야할지 잘 모르겠습니다. 아래 두 가지 중 어느 쪽이 더 맞는 설명일까요?Geometry와 material을 감싼 껍데기 Geometry와 material로 이루어진 하나의 물체 또, 종종 3D 모델링에서 정육면체, 삼각형 등을 오브젝트라고 부르는 걸 들은 적 있는 것 같은데, 해당 오브젝트라는 명칭이 맞는 명칭인가요? 그렇다면, Mesh = 오브젝트 라고 부를 수 있을까요? 감사합니다. 

어디를 수정해야 할까요? 지금 계속 다시 해보고 있는데 해결이 되지 않습니다ㅠ앞서 이렇게 했었는데 해결되지 않아 다시 해보고있습니다..!  tailwind.config.js 의 content에이렇게 입력하는게 맞나요??index.css에 이렇게 오류가 떠서요 ㅠㅠ-> 우측하단 언어모드를 tailwindCSS로 바꾸면 밑줄은 사라지는데 npm start 실행시이렇게 뜹니다..!

tailwind.config.js 의 content에이렇게 입력하는게 맞나요??index.css에 이렇게 오류가 떠서요 ㅠㅠ-> 우측하단 언어모드를 tailwindCSS로 바꾸면 밑줄은 사라지는데 npm start 실행시 이렇게 뜹니다..!

npx tailwindcss init 작성시 'tailwind'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 라고 뜹니다 코드를 다르게 작성해야하나요?

버젼이 달라서인지.. CNA 했을 때tailwind.config.js 파일이 없었습니다.강의에서는 원래부터 존재하던데..그래서 어떻게어떻게 추가를 했는데.Error: It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.라는 에러가 끝나지를 않네요 ㅠGPT한테 열심히 물어봤는데 도저히 해결이 안돼서 문의드립니다.밑은 제가 설정해둔 코드입니다.tailwind.config.js/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,ts,jsx,tsx,html,css}", // 필요한 파일들 포함 "./app/**/*.{js,ts,jsx,tsx}", // Next.js의 `app` 폴더 추가 "./components/**/*.{js,ts,jsx,tsx}", // 컴포넌트 폴더 추가 ], theme: { extend: { colors: { 철수가좋아하는색깔: "#3498db", // 나만의 부트스트랩 만들기 영희가좋아하는색깔: "green", }, }, }, plugins: [], };  postcss.config.jsmodule.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };  globals.css/* @import "tailwindcss"; */ @tailwind base; @tailwind components; @tailwind utilities; 로 해도 안되고,@import "tailwindcss"; 도 안됩니다...

이거 관련해서 한번 정리해주시면 좋을거같습니다. ㅠㅠ인터넷에서 찾아보고 gpt한테도 물어봤는데 해결방법을 못찾겠네요.