export default function PostArticle({ children, post }: Props) { const router = useRouter(); const onClick = () => { console.log(1); router.push(`/${post.User.id}/status/${post.postId}}`); }; return ( <article className={style.post} onClickCapture={onClick}> {children} </article> ); }이 부분에서 onClickCapture에 대한 질문이 있습니다.캡쳐링 단계에서 onClickCapture의 클릭함수가 실행된다면자식인 <Link> 영역을 눌러도 <article>의 onClickCapture가 캡쳐링 단계에서 먼저 동작하여 <Link> 태그의 href 경로가 아닌 router.push()로 동작 해야한다고 생각하였습니다.그러나 실제 <Link>태그를 클릭하면 콘솔에 1이 찍히지만 router.push() 경로가 아닌 <Link>태그의 href경로로 이동하더군요. 이 부분이 잘 이해가 안됩니다..

댓글, 재게시 기능 개발시 onSuccess 메서드 사용 부분에서 궁금한 점이 생겨 질문 드립니다.로직은 비슷해서 재게시 로직 첨부했습니다!!좋아요 기능과 마찬가지로 optimistic update 방식으로 보다 빠른 UI 변경을 보기 위해 사용하는건지 궁금합니다. 강의를 수강하다가 onMutate, onSuccess 메서드에서 optimistic update 방식이 혼재 되있어 댓글, 재게시 기능들은 onSuccess 함수에 invalidateQueries 메서드를 활용해 쿼리 상태를 최신으로 다시 가져오는 방식은 괜찮지 않을까, 또 제로초님 의견은 어떠신지 궁금점이 들어 질문 드립니다!! async onSuccess(response) { const newPost = await response.json(); setContent(""); setPreview([]); const queryCache = queryClient.getQueryCache(); const queryKeys = queryCache.getAll().map((cache) => cache.queryKey); queryKeys.forEach((queryKey) => { if (queryKey[0] === "posts") { const value: Post | InfiniteData<Post[]> | undefined = queryClient.getQueryData(queryKey); if (value && "pages" in value) { const obj = value.pages .flat() .find((v) => v.postId === parent?.postId); if (obj) { // 존재는 하는지 const pageIndex = value.pages.findIndex((page) => page.includes(obj) ); const index = value.pages[pageIndex].findIndex( (v) => v.postId === parent?.postId ); const shallow = { ...value }; value.pages = { ...value.pages }; value.pages[pageIndex] = [...value.pages[pageIndex]]; shallow.pages[pageIndex][index] = { ...shallow.pages[pageIndex][index], Comments: [{ userId: me?.user?.email as string }], _count: { ...shallow.pages[pageIndex][index]._count, Comments: shallow.pages[pageIndex][index]._count.Comments + 1, }, }; shallow.pages[0].unshift(newPost); // 새 답글 추가 queryClient.setQueryData(queryKey, shallow); } } else if (value) { // 싱글 포스트인 경우 if (value.postId === parent?.postId) { const shallow = { ...value, Comments: [{ userId: me?.user?.email as string }], _count: { ...value._count, Comments: value._count.Comments + 1, }, }; queryClient.setQueryData(queryKey, shallow); } } } }); await queryClient.invalidateQueries({ queryKey: ["trends"], }); // or async onSuccess() { console.log(queryClient.getQueryCache().getAll()); await Promise.all([ queryClient.invalidateQueries({ queryKey: ["posts", String(post?.postId)], }), queryClient.invalidateQueries({ queryKey: ["posts", String(post?.postId), "comments"], }), ]); }, },

"use client"; import styles from "./styles.module.css"; import Image from "next/image"; const IMAGE_SRC = { profileImage: { src: ("/assets/profile_image.png"), alt: "프로필이미지", }, linkImage: { src: ("/assets/link.png"), alt: "링크아이콘", }, locationImage: { src: ("/assets/location.png"), alt: "위치아이콘", }, cheongsanImage: { src: ("/assets/cheongsan.png"), alt: "청산사진", }, neotubeImage: { src: ("/assets/neotube.png"), alt: "너튜브사진", }, badImage: { src: ("/assets/bad.png"), alt: "싫어요", }, goodImage: { src: ("/assets/good.png"), alt: "좋아요", }, hamberger: { src: ("/assets/hamberger.png"), alt: "목록아이콘", }, pencil: { src: ("/assets/pencil.png"), alt: "수정아이콘", }, } as const; export default function BoardsDetailPage() { return ( <div className={styles.detailLayout}> <div className={styles.detailBody}> <div className={styles.detailFrame}> <div className={styles.detailSubject}> 살어리 살어리랏다 쳥산(靑山)애 살어리랏다멀위랑 ᄃᆞ래랑 먹고 쳥산(靑山)애 살어리랏다얄리얄리 얄랑셩 얄라리 얄라 </div> <div className={styles.detailMetadataContainer}> <div className={styles.detailMetadataProfile}> <Image src={IMAGE_SRC.profileImage.src} alt={IMAGE_SRC.profileImage.alt} width={100} height={100} /> <div>홍길동</div> </div> <div className={styles.detailMetadataDate}>2024.11.11</div> </div> <div className={styles.enrollBorder}></div> <div className={styles.detailMetadataIconContainer}> <Image src={IMAGE_SRC.linkImage.src} alt={IMAGE_SRC.linkImage.alt} width={100} height={100} /> <Image src={IMAGE_SRC.locationImage.src} alt={IMAGE_SRC.locationImage.alt} width={100} height={100} /> </div> <div className={styles.detailContentContainer}> <Image src={IMAGE_SRC.cheongsanImage.src} alt={IMAGE_SRC.cheongsanImage.alt} className={styles.detailContentImage} width={100} height={100} /> <div className={styles.detailContentText}> <div>살겠노라 살겠노라. 청산에 살겠노라.</div> <div>머루랑 다래를 먹고 청산에 살겠노라.</div> <div>얄리얄리 얄랑셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>우는구나 우는구나 새야. 자고 일어나 우는구나 새야.</div> <div>너보다 시름 많은 나도 자고 일어나 우노라.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div> 갈던 밭(사래) 갈던 밭 보았느냐. 물 아래(근처) 갈던 밭 보았느냐 </div> <div>이끼 묻은 쟁기를 가지고 물 아래 갈던 밭 보았느냐.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>이럭저럭 하여 낮일랑 지내 왔건만</div> <div>올 이도 갈 이도 없는 밤일랑 또 어찌 할 것인가.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>어디다 던지는 돌인가 누구를 맞히려던 돌인가.</div> <div>미워할 이도 사랑할 이도 없이 맞아서 우노라.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>살겠노라 살겠노라. 바다에 살겠노라.</div> <div>나문재, 굴, 조개를 먹고 바다에 살겠노라.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>가다가 가다가 듣노라. 에정지(미상) 가다가 듣노라.</div> <div> 사슴(탈 쓴 광대)이 솟대에 올라서 해금을 켜는 것을 듣노라. </div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>가다 보니 배불룩한 술독에 독한 술을 빚는구나.</div> <div> 조롱박꽃 모양 누룩이 매워 (나를) 붙잡으니 내 어찌 하리이까.[1] </div> <div>얄리얄리 얄라셩 얄라리 얄라</div> </div> <Image src={IMAGE_SRC.neotubeImage.src} alt={IMAGE_SRC.neotubeImage.alt} width={100} height={100} /> <div className={styles.detailContentGoodOrBad}> <div className={styles.detailGoodContainer}> <Image src={IMAGE_SRC.badImage.src} alt={IMAGE_SRC.badImage.alt} width={100} height={100} /> <div className={styles.detailBadText}>24</div> </div> <div className={styles.detailGoodContainer}> <Image src={IMAGE_SRC.goodImage.src} alt={IMAGE_SRC.goodImage.alt} width={100} height={100} /> <div className={styles.detailGoodText}>12</div> </div> </div> <div className={styles.detailButtonsContainer}> <button className={styles.detailButton}> <Image src={IMAGE_SRC.hamberger.src} alt={IMAGE_SRC.hamberger.alt} width={100} height={100} /> <div>목록으로</div> </button> <button className={styles.detailButton}> <Image src={IMAGE_SRC.pencil.src} alt={IMAGE_SRC.pencil.alt} width={100} height={100}/> <div>수정하기</div> </button> </div> </div> </div> </div> </div> ); } require 를 넣으면 왜 오류인지 require 어떤 기능인지 알 수 있을까요ㅕ?>

선생님 서버액션을 이런식으로 사용하면 안되는걸까요?굳이 버튼을 따로빼서 관리하는지 궁금합니다."use client"; import { ReviewData } from "@/types"; import { deleteReview } from "@/actions/create-review-action"; export default function ReviewList({ id, content, author, createdAt, }: ReviewData) { const onClickHandler = async () => { await deleteReview({ id: id }); }; return ( <section> <span>{author}</span> <div>{content}</div> <p>{createdAt}</p> <button onClick={() => onClickHandler()}>삭제하기</button> </section> ); }

5.3JSX UI 표현하기, 10:29강의 내용 같이 return 에 내용을 적고, save 하면<작성-save 전> const Main = () => { const user = { name: "이선영", isLogin: treu, }; return (<> {user.isLogin ? ( <div>로그아웃</div> ) : ( <div>로그인</div> )} </> ); }; export default Main;  <작성후-save>const Main = () => { const user = { name: "이선영", isLogin: treu, }; return <>{user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}</>; }; export default Main; 이렇게 되는 데, 이유가 뭘까요 ?  🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

App.js, child.js 모두 강의 내용과 같이 작성 후 터미널에서 실행시켜 보았는데 리액트 초기화면만 표시되고 있습니다. 캐시 삭제, vscode 재시작 등을 시켜보았으나 변함이 없습니다. 왼쪽 화면이 App.js 코드 내용대로 바뀌지 않는 이유가 무엇일까요?

안녕하세요 처음으로 문의 남깁니다.이전부터 궁금증을 가지고 있었는데 강의하시는 분마다, 그리고 구글에서 찾아본 글마다 초기화의 시점에 대한 말이 달라 혼돈이 있어 질문을 드리게 됐습니다.변수엔 선언, 초기화, 할당 이렇게 3단계의 과정이 있다는 걸 들었습니다. let age;age = 27;위를 예시로 했을 때 선생님께선 age = 27; 시점을 초기화 시점이라고 알려주셨고,또 다른 곳에선 let age;를 선언한 시점, 즉 JavaScript가 내부적으로 undefined를 할당하는 순간을 초기화라고 볼 수 있다고 들은 적이 있습니다.정확히 어느 시점에 초기화가 되는지 궁금하여 질문을 드립니다. 감사합니다.

src/app/(with-searchbar)/search/page.tsx Type error: Type 'Props' does not satisfy the constraint 'PageProps'. Types of property 'searchParams' are incompatible. Type '{ q?: string | undefined; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]vercel 명령어 사용시 build문제에서 에러가 생겼다고 하면서 위와 같은 타입 에러가 나오네요 ㅠ선생님께서 제공해주신 github에서 내용을 가져와 적용해보았으나 같은 에러가 나오게되어 질문드립니다.

안녕하세요 강의 너무 잘 듣고 있습니다. 수업을 듣다가 감정일기만들기에서 처음에 일기 내용을을 담는 data라는 것을 만들고 이걸 new, edit페이지 등에 전부 필요하니 전체 공급하기위해 context를 사용한다라고 이해를 하고 있는데 궁금한점이 나중에 혼자 코드를 작성을 할때에 state가 어느 컴포넌트에 필요해서 context를 사용하고 이런것은 어떻게 알 수 있을까요?

1) request.META["HTTP_USER_AGENT"] 실습 5번 내내 NameError로 표기 되지 않습니다. 구글링해도 정확히 어떤 이유인지 잘모르겠습니다.2) 아래 pwsh 느낌표가 왜 나오는지 궁금합니다. 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.UserEffect 빈 배열 사용하면 처음 한번만실행된다고 하는데그러면 조건문으로 posts 체크해서 사용해도 되나요?왠지 유저이펙트보다 이프문이 더 가벼울것 같아서질문드립니다

다른 질문글을 참고해 구조분해 할당 방식으로 다시 코드를 짜봤는데 그래도 오류가 납니다  

 한입 크기로 잘라 먹는 리액트 의 가장 마지막 강의인 12.19) 배포하기에서 터미널에 vercel 명령어를 입력하여 배포를 완료했습니다.그런데 배포 완료 후, 뱉어준 링크로 이동시 에러가 발생합니다. 검색해 보았는데, 제가 지식이 얕아 키워드 찾기에 한계가 있는지 이렇다할 해결 방법을 찾지 못했습니다. 어떻게 해결 할 수 있을까요? 사용 Vercel CLI 버전은 41.1.0 입니다. 

전 영상과 똑같이 npm으로 설치하는 과정에서 에러가 발생하시는 분들을 위한 제 해결법입니다. (2025-02 기준) 강사님이 올려주신 소스코드 다운로드이 방법은 강사님이 올려주신 폴더를 열어서 npm i 만 하시면 됩니다.직접 다운그레이드R3F가 현재(2025-02) 기준 React 19를 지원을 안합니다.그렇기 때문에 React 18로 다운그레이드를 해줘야되는데요 React 다운그레이드React 최신버전 설치npm create vite@latest우선 최신버전을 설치한 이후에다운그레이드npm uninstall react react-dom npm install react@18 react-dom@18react와 react-dom을 삭제후 18버전으로 설치합니다.3. 확인npm list react react-dom터미널로 확인하시면 18버전으로 다운그레이드 됩니다. 하지만 여기서 끝이 아니라 Typescript와 drei 설치시에도 문제가 발생합니다. mesh를 작성하게 되면 "JSX.intrinsicElements" 형식에 "mesh" 속성이 없습니다. 라는 경고창이 옆에 계속 뜨는데요실행결과는 잘 출력 되지만 거슬려서 해결법을 적어봅니다. 'JSX.IntrinsicElements' 에러 해결법package.json 파일에type/react와 type/react-dom이 19버전으로 되어 있어 호환이 안되어 발생하는 에러입니다.npm install @types/react@18 @types/react-dom@18 터미널에 입력해주시면 package.json 파일에서 18버전으로 다운그레이드 됩니다. 또 drei를 설치할때three-mesh-bvh@0.7.8: Deprecated due to three.js version incompatibility. Please use v0.8.0, instead에러가 발생하는데요 이는 three.js버전과 three-mesh-bvh 버전 간의 호환성 문제입니다. drei 라이브러리 설치법터미널에npm install @react-three/dreinpm install three-mesh-bvh@0.8.0 --legacy-peer-deps 그럼 3가지 세팅이 완료됩니다 

https://github.com/atlassian/react-beautiful-dnd/issues/2672react-beautiful-dnd is now deprecated #2672 Drag and Drop 기능 구현을 위한 다른 방법 설명이 필요합니다.

pgAdmin의 Post 데이터를 전부 삭제한 후 다시 기록하고 싶어서 Post 내부 데이터를 전부 선택/삭제(휴지통 버튼 클릭)한 후 PSQL Tools에 COMMIT을 입력하라고 정보가 있어서 실행에 옮겼는데 갑자기 9090페이지가 아예 안돌아가네요(로그인 안됨, API문서 접근불가 등등) ㅠㅠ 어떻게 방법없을까요

안녕하세요 인텔리제이 사용중인데create react app으로 하게 되면 더이상 지원하지 않는다 하여 vite + react로 적용해서 프로젝트 만들어서 하고 있습니다현재 2강 React-Router 이용해서 메인 페이지 띄우는 작업중인데 오류가 발생하여 진행이 안됩니다 그리고 매번 강의 때마다 오류 수정하느라 강의가 원활하지 않습니다 강의는 더이상 업데이트 계획이 없으실까요? 리액트 프로젝트 생성부터 막혀서 진행이 원할하게 되지않습니다 환불하고 싶은데 기간도 지나서 환불도 안되고 답답하네요 매번 이런식으로 물어보면서 수정해야 하나요?? 매뉴얼이라도 만들어주세요 정말 불편합니다  

계속 오류가 발생해서 알아보니까 리액트19 버전쓰시는 분들은 리코일 못쓰실거같아요 대신 jotai 이 라이브러리로 대체해서 사용해보세요 문법도 리코일이랑 비슷하네요  

안녕하세요 강의를 듣다가 여행 숙박 사이트 부분의 강의를 보고 싶은데 이 부분은 어디서부터 보면 되나요?

감정 일기 프로젝트에서 "Edit 페이지 구현하기"까지 공부한 상황입니다. 구현하고 나서 강사님 설명대로 동작 시켜 보니 잘 동작하더군요. 그런데 제가 이것 저것 동작을 체크하면서 방금 생성한 일기를 다시 수정하고 나서 작성완료 버튼을 눌렀더니, Diary list에 방금 수정한 목록이 두 개가 나타나고, 이전 달의 Diary list가 사라지는 현상이 발생하였습니다. 그래서 제가 어느 부분을 잘못 코딩하였는지 확인하고자 강사님이 제공한 Git 사이트의 코드와 제가 작성한 코드를 일일이 비교해 보았지만 차이점을 발견하지 못하였습니다. 강사님은 이런 현상이 발생하지 않았는지요? 또한 어떻게 이 문제를 해결할 수 있을까요?