서버액션 파트에서 create-review.action 서버액션을 별도 파일로 만들었습니다. 아래 코드를 보면 딜레이가 2초 있습니다.리뷰를 생성할 때만 딜레이를 걸어놨는데 삭제할때도 2초가 걸리는데 왜그런걸까요?"use server"; import { delay } from "@/util/delay"; import { revalidatePath, revalidateTag } from "next/cache"; export async function createReviewAction(_: any, formData: FormData) { const bookId = formData.get("bookId")?.toString(); const content = formData.get("content")?.toString(); //string타입으로 바꾸는 것 const author = formData.get("author")?.toString(); if (!content || !author || !bookId) { //서버에서도 예외 방지 return { state: false, error: "리뷰 내용과 작성자를 입력해주세요", }; } try { await delay(2000); const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/review`, { method: "POST", headers: { "Content-Type": "application/json", // JSON 데이터임을 명시 }, body: JSON.stringify({ bookId, content, author }), } ); if (!response.ok) { //실패했다면 throw new Error(response.statusText); } // 5. 태그 기준, 데이터 캐시 재검증 -> 데이터 패칭에 특정 태그를 설정한 패칭만 재검증 revalidateTag(`review-${bookId}`); //book 페이지에 ReviewList 데이터 패칭 재검증 return { state: true, error: "", }; } catch (e) { return { state: false, error: `리뷰 저장에 실패했습니다. ${e}`, }; } }

북 상세페이지에서 모달창이 제대로 작동하지만 다음과 같은 오류가 발생합니다. 왜그런걸까요?Skipping auto-scroll behavior due to position: sticky or position: fixed on element: <dialog class=​"modal_modal__ocKFE" open>​…​</dialog>​scroll Error Component Stack at InnerScrollAndFocusHandler (layout-router.js:139:9) at ScrollAndFocusHandler (layout-router.js:216:11) at RenderFromTemplateContext (render-from-template-context.js:16:44) at OuterLayoutRouter (layout-router.js:365:11) at body (<anonymous>) at html (<anonymous>) at RootLayout [Server] (<anonymous>) at HTTPAccessFallbackErrorBoundary (error-boundary.js:90:9) at HTTPAccessFallbackBoundary (error-boundary.js:98:11) at RedirectErrorBoundary (redirect-boundary.js:75:9) at RedirectBoundary (redirect-boundary.js:83:11) at HTTPAccessFallbackErrorBoundary (error-boundary.js:90:9) at HTTPAccessFallbackBoundary (error-boundary.js:98:11) at DevRootHTTPAccessFallbackBoundary (dev-root-http-access-fallback-boundary.js:33:11) at ReactDevOverlay (ReactDevOverlay.js:80:9) at HotReload (hot-reloader-client.js:379:11) at Router (app-router.js:183:11) at ErrorBoundaryHandler (error-boundary.js:120:9) at ErrorBoundary (error-boundary.js:166:11) at AppRouter (app-router.js:563:11) at ServerRoot (app-index.js:145:46) at Root (app-index.js:165:11)

패럴렐 & 인터셉터 라우트 강의를 듣는 중입니다."/" 경로 였다가 "/book/1" 과 같이 상세페이지 경로로 들어가게 되면 아래 캡쳐와 같이 RootLayout 컴포넌트에 인자값으로 children에는 기존에 인덱스 페이지가 들어가고 modal 인자값으로는 인터셉터된 book 페이지의 값이 들어갈 것입니다.그런데 이 상태에서 새로고침을 하게 되면 초기에는 인터셉터가 작동하지 않으므로 일반 book 페이지가 children에 들어갈것이고 modal 인자값에는 인터셉터가 작동하지 않는데 어떠한 값이 들어가나요?인터셉터에 default 페이지가 들어가나요?

안녕하세요 강사님의 인강을 보고 또 혼자 조금씩 코드를 작성하면서 공부하고 있습니다. 공부를 하면서 질문이 있는데 함수부분에서 함수가 비슷한 작업을 할때 이 코드를 묶어서 사용하고 또 재사용도 가능하다라고 문법으로는 알고 있습니다. 하지만 아직 초보여서 그런지 혼자 코드를 작성해보면서 이런상황에서 함수를 사용해야되나? 아니면 함수 생각조차 나지 않을 때가 있는데 혼자 코드를 작성하면서 이럴땐 함수를 이렇게 사용하면 되겠구나라고 스스로 생각이 나게 하려면 어떻게 해야 좋을까요?

book 페이지의 인터셉터 페이지를 만드는 과정이다.기존 book 페이지에서 인자값을 받고 있기 때문에 인터셉터 페이지에서도 인자값을 받기 위해서 props로 받았지만 인터셉터 페이지가 정상적으로 작동하지 않는다.import BookPage from "@/app/book/[id]/page" export default function Page(props: any) { //기존에 book 페이지에서 받고 있던 프롭스를 그대로 가져와야 해서 any타입으로 받는 것 return ( <div> 가로채기 성공 <BookPage {...props}/> </div>) } book 페이지의 인자 값은 다음과 같다.export default async function Page({ params, }: { params: Promise<{ id: string }>; }) { const resolvedParams = await params; const id = resolvedParams.id; return ( <div className={style.container}> <BookDetail bookId={id} /> <ReviewEditor bookId={id} /> <ReviewList bookId={id} /> </div> ); }인터셉터 페이지에서 인자값을 props: any가 아니라 다르게 설정해야 하나요? 

book 페이지의 인터셉터 페이지를 만드는 과정이다.기존 book 페이지에서 인자값을 받고 있기 때문에 인터셉터 페이지에서도 인자값을 받기 위해서 props로 받았지만 인터셉터 페이지가 정상적으로 작동하지 않는다.  

안녕하세요 강의 잘 듣고 있습니다수강하면서 실습을 위해 올려주신 깃헙을 클론해서 각종 라이브러리 설치 후 실행하는데 jest-dom라이브러리를 인식을 못하는 건지 계속 다음 부분에서 오류가 나서 테스트가 실패하네요 클론 후 코드 수정 등은 한 것이 없는데 무엇이 문제일까요?

export default function CourseItem({title, description, thumbnail, isFavorite}) { let defaultIconTag = "/img/heart/heart-icon.svg" if (isFavorite) { defaultIconTag = "/img/heart/heart-fill-icon.svg" } return ( <article className="course"> <img className="course__img" src={thumbnail} alt="강의 이미지"/> <div className="course__body"> <div className="course__title">{title}</div> <div className="course__description">{description}</div> </div> <div className="course__icons"> <button className="btn"> <img className="icon-heart" src={defaultIconTag} /> </button> </div> </article> ); }저는 기존 CourseItem메서드 내에서 변수를 생성해서 만들었는데 강의에서는 새로운 메서드를 생성해서 진행하더라고요.메서드를 따로 생성해서 버튼 태그랑 묶어서 같이 넘기신 이유가 있나요? 현업에서 어떤 방식을 더 선호할까요? 

강의에서는 4가지 뿐인데 vite가 현재일자 기준으로 업데이트가 되었는지 5번째 칸에 React Router v7이 생겼습니다. 혹시 React Router v7를 선택하면 수강하는데에 문제가 있을까요?

안녕하세요 책과 강의를 병행하고 있습니다!4장 리액트 앱 만들기, 5장 실습부분을 진행하고 있는데요책에서는 create-react-app 으로 리액트 앱을 만들고, 강의는 vite로 앱을 만들고 있습니다. 또한 책에서는 main.jsx대신 index.js와 bundle.js가 생성된다고 하는데 강의를 따라가면 되는걸까요 ??분명 책과 강의의 차이점에 대해 어딘가에 정리되어있을 것 같은데.. 찾을 수가 없어서 질문드립니다!

vercel에 배포하려고 빌드할때 에러 문의입니다.에러 로그는 아래와 같습니다.Export encountered an error on /book/[id]/page: /book/2, exiting the build. ⨯ Static worker exited with code: 1 and signal: null Error: Command "npm run build" exited with 1/book/[id]/page.tsx 파일에서 사진과같이 generateStaticParams() 함수를 주석치면 빌드가 잘 되더라구요어떤이유인지 알 수 있을까요 ? 

https://github.com/JeanYoungPark/next-chat-gptloading 부분 코드 작성중인데 loading 컴포넌트가 따로 로드되지 않는 것 같습니다. 원인을 알 수 있을까요?

안녕하세요.제공해주신 인강으로 프론트엔드 테스트를 공부하고 있는 수강생입니다. 최근 일이 많아져 인강 듣는 시간을 할애하지 못하였지만 이번 설 연휴를 맞이하여 1편 다보고 2편까지 보려고 하는데 제가 실수로 할인 쿠폰을 발급 받았다가 사용하지 못하고 유효기간이 지나 버렸는데 재발급을 할수 있는 방법이 있는지 문의드립니다!

[username] 슬러그 / 즉 유저 프로필 페이지에서 params값을 받아서 유저정보를 불러오는데 params의 값을 출력해보니 값이 나오긴하는데 인코딩된 값이 나옵니다 ㅠㅠencodeURIComponent 함수를 사용한 적이 없는데 왜 이렇게 나오는지 궁금합니다

안녕하세요 강사님.해당 강의 8:31 초 내용을 저장했을때 아래와 같은 오류가 나왔습니다. 언뜻 봤을 때는 await를 적용하지 않아서 라는 것으로 해석이 되는데, 영상 초반에 비동기 컴포넌트를 따로 빼내어 사용하기로 하여 async를 제거하였는데 아래와 같은 오류가 나오지만 화면은 의도된 바와 같이 동작을 합니다. 강의 영상 및 자료와 동일하게 진행하였습니다  강사님의 강의자료에서 코드를 복사하여 BookListSkeleton만 제거 수정을 하여 테스트 시 위와 같은 오류가 동일하게 발생합니다.https://github.com/winterlood/onebite-next/blob/main/section06/chapter05/src/app/(with-searchbar)/search/page.tsx 영상에서는 저와 같은 오류가 발생하지 않는 것 같은데, 이런 오류가 발생하면 빌드가 안되는데... 확인 부탁드립니다.

강의 처럼 revalidatePath(`book/${bookId}`)를 해서 리뷰를 작성하고 작성하기 버튼을 눌러서 페이지를 재검증하는 상황revalidatePath는 퍼지를 통해서 캐시가 모두 삭제되는 것이 이해함빌드 후, 프로젝트 모드로 실행리뷰를 작성하고 리뷰를 누르는 상황작성한게 보이긴 하지만 두번째꺼가 ㅋㅋㅇㄹㅋ 였는데 아래와 같이 바뀝니다.또한 새로고침을 누르면 다시 원상태로 돌아갑니다.아래와 같이 새로고침을 누르면 퍼지 후에 book/1 페이지는 다이나믹으로 작동해야되는데 하지 않는 것으로 파악됩니다. prisma studio를 확인해보면 데이터는 들어갔습니다.그런데 npm run dev로 하면 잘 됩니다...왜 그런 걸까요??  

회원가입 후 바로 로그인 된 상태에서 home으로 가면 트렌드를 가져올 수 없다고 뜨는데 혹시 로그인 후 로그아웃버튼이 뜨지 않았던 상황과 비슷한 상황인가요 ? 로그아웃 버튼처럼 prop으로 session정보를 넘겨줘야 하는건지 궁금합니다

인덱스 페이지를 오류를 발생시키는 상황입니다.과정에서 error.tsx 파일을 (with-searchbar) 폴더안에 만들었습니다.데이터를 불러오는 서버를 끄로 인덱스 페이지를 새로고침하면 Footer에서 오류가 발생합니다.글로벌 레이아웃에 Footer 컴포넌트를 불러와서 이런 오류가 발생하는 걸까요?

[중급] 웹 프론트엔드 부트캠프 강의중에서'섹션 06-01 동기/비동기' 강의는 강의영상이 없다고 뜨는데 강의영상이 없는게 맞는건가요??

안녕하세요 😀 강의 중 프로젝트 1 에서는 npm install 이 정상적으로 진행되었으나, 이번 useEffect 실습을 위해 강의내용처럼 새폴더 생성 후 npm i를 하니 아래와 같은 오류가 발생합니다.구글링해서 여러 방법을 시도했으나 해결되지 않아 어떻게 해야할 지 질문드립니다 😥