정말 친절하고 세세한 강의~ 감동 받으면서 잘 듣고 있습니다.한가지 궁금한 점은..강사님은 Vite로 강의하시는데.. Create React App도구를 사용하는 것과 차이가 많이 있을까요?Create React App으로 강의를 들어도 무방한지도 알고 싶습니다.감사합니다^^

import "./TodoItem.css"; import { memo } from "react"; const TodoItem = ({ id, isDone, content, date, onUpdate, onDelete }) => { const onChangeCheckbox = () => { onUpdate(id); }; const onClickDeleteButton = () => { onDelete(id); }; return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} //button이 아닌 input태그이기 때문에 onChange를 사용 readOnly checked={isDone} type="checkbox" /> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}>삭제</button> </div> ); }; export default memo(TodoItem, (prevProps, nextProps) => { // 반환값에 따라, Props가 바뀌었는지 안바뀌었는지 판단 // T -> Props 바뀌지 않음 -> 리렌더링 X // F -> Props 바뀜 -> 리렌더링 O if (prevProps.id !== nextProps.id) return false; if (prevProps.isDone !== nextProps.isDone) return false; if (prevProps.content !== nextProps.content) return false; if (prevProps.date !== nextProps.date) return false; return true; // 네 개의 값이 바뀌지 않으면 });코드를 따라 치면서 실습을 했는데 위처럼 바꿔도 모든 list가 리렌더링된다고 하이라이트가 뜹니다. 뭐가 문제인지 모르겠습니다ㅜㅜ

안녕하세요 /* */ 맥북에서의 여러줄 주석 처리 단축키 알려주세요.

뭔가 잘 모르겠는데.. 아래 확인 부탁드려도 될까요?설정한것도 없는것 같은데 기본 생성 명령어자체가 실행이 안된다니..ㅠㅠㅠㅠ manijang2@gimseonman-ui-MacBookAir VSProjects % npx create-react-app cra-react-app Creating a new React app in /Users/manijang2/VSProjects/cra-react-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... added 1324 packages in 40s 268 packages are looking for funding run `npm fund` for details Initialized a git repository. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: cra-react-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /Users/manijang2/.npm/_logs/2025-02-03T13_23_36_276Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/manijang2/.npm/_logs/2025-02-03T13_23_36_276Z-debug-0.log `npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed manijang2@gimseonman-ui-MacBookAir VSProjects %

선생님 보통의 리액트경우 새로고침이 일어나지 않기 때문에 서브밋 됬을시 보통 상태값을 초기화 하지 않는 이상 input값의 value가 원래 남아 있지 않나요?button 태그때문에 새로고침이 일어난건지 제가 이해한 랜더링 방식과 좀 다른건가요?

yarn codegen을 입력하면 이런 에러가 뜹니다 Not all operations have an unique name: fetchBoard:success Saved 1 new dependency.info Direct dependencies└─ @graphql-codegen/cli@5.0.4info All dependencies└─ @graphql-codegen/cli@5.0.4코드젠은 이렇게 잘 설치가 되었고 package.json 에도 이렇게 추가해 놓았습니다"codegen": "graphql-codegen --config codegen.ts"  PS C:\Users\young\Desktop\frontend\class-example\my-app> yarn codegenyarn run v1.22.22warning ..\..\..\..\package.json: No license field$ graphql-codegen --config codegen.ts✔ Parse Configuration❯ Generate outputs ❯ Generate to ./src/commons/graphql/ ✔ Load GraphQL schemas ✔ Load GraphQL documents ⠏ Generate[client-preset] the following anonymous operation is skipped: mutation { createBoard(writer: "윰", title: "작성중", contents: "내용작성중") { _id number message } }[client-preset] the following anonymous operation is skipped: query { fetchBoard(number: 1) { number writer title contents } }[client-preset] the following anonymous operation is skipped: query { fetchBoard(number: 2) { number writer title contents } }[client-preset] the following anonymous operation is skipped: query { fetchBoards { number writer title contents } }[client-preset] the following anonymous operation is skipped: query { fetchBoards { number✔ Parse Configuration⚠ Generate outputs ❯ Generate to ./src/commons/graphql/ ✔ Load GraphQL schemas ✔ Load GraphQL documents ✖ Not all operations have an unique name: fetchBoard: * fetchBoard found in: - C:/Users/young/Desktop/frontend/class-examp…error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

페이지처리하는 부분 오류 발생하여 질문 드립니다.  import React, { useEffect, useState } from "react"; import { getList } from "../../api/todoApi"; import useCustomMove from "../../hooks/useCustomMove"; import PageComponent from "../common/PageComponent"; const initState = { dtoList: [], pageNumList: [], pageRequestDto: null, prev: false, next: false, totalCount: 0, prevPage: 0, nextPage: 0, totalPage: 0, current: 0, }; const ListComponent = () => { const { moveToList, page, size } = useCustomMove(); const [serverData, setServerData] = useState(initState); useEffect(() => { getList({ page, size }).then((data) => { setServerData(data); }); }, [page, size]); return ( <div className="border-2 border-blue-100 mt-10 mr-2 ml-2"> <div className="flex flex-wrap mx-quto justify-center p-6"> {serverData.dtoList.map((todo) => ( <div key={todo.tno} className="w-full min-w-[400px] p-2 m-2 rounded shadow-md" > <div className="flex"> <div className="font-extrabold text-2xl p-2 w-1/12"> {todo.tno} </div> <div className="text-1xl m-1 p-2 w-8/12 font-extrabold"> {todo.title} </div> <div className="text-1xl m-1 p-2 w-2/10 font-medium"> {todo.dueDate} </div> </div> </div> ))} </div> <PageComponent serverData={serverData} movePage={moveToList} ></PageComponent> </div> ); }; export default ListComponent;listComponent에서 initState 생성하고, setServerData 해서 pageComponent로 전달.  const PageComponent = ({ serverData, movePage }) => { console.log("data.prev: " + serverData.prev); return ( <div className="m-6 flex justify-center"> {serverData.prev ? ( <div className="m-2 p-2 w-16 text-center font-bold text-blue-400 " onClick={() => movePage({ page: serverData.prevPage })} > Prev{" "} </div> ) : ( <></> )} {serverData.pageNumList.map((pageNum) => ( <div key={pageNum} className={`m-2 p-2 w-12 text-center rounded shadow-md text-white ${ serverData.current === pageNum ? "bg-gray-500" : "bg-blue-400" }`} onClick={() => movePage({ page: pageNum })} > {pageNum} </div> ))} {serverData.next ? ( <div className="m-2 p-2 w-16 text-center font-bold text-blue-400" onClick={() => movePage({ page: serverData.nextPage })} > Next </div> ) : ( <></> )} </div> ); }; export default PageComponent;pageComponent에서 serverData받아서 데이터 사용하는 부분.이러한 오류 발생합니다...아무리 봐도 어느 부분이 문제 인지 모르겠어요.serverData.prev 로그 찍어봐도 false라고 남는데.. 그리고 또 렌더링을 해서 undefined상태인건지... 어느 부분이 문제일가요 ㅠㅠ? prev를 부분을 지우면 pageNumList 에서 문제가 발생하여 prev만의 문제가 아니라 serverData자체를 받아오지 못하는거같습니다..

안녕하세요 공통 컴포넌트 구현하기 강의 부분에서 Header 컴포넌트에 대해 여쭤볼게 있어 질문을 드립니다. Header컴포넌트가 App컴포넌트에 import 되어 있고 props로 title, leftChild, rightChild가 전달이 되는데 leftChild, rightChild는 버튼이니 만들어 놓은 버튼 컴포넌트를 전달해서 들어갈 내용을 동적으로 바꿔주는건 이해가 되지만 title 부분은 그냥 props로 전달하지 않고 Header 컴포넌트 내부에 그냥 작성을 해도 될것같은데 이렇게 title props로 전달하는 이유가 궁금합니다.

안녕하세요.현재 슬리액트, '회원가입 페이지 만들기' 파트를 듣고 있습니다.회원가입을 누르면,'TypeError: Cannot read properties of null'라는 에러가 발생합니다.DB, users 폴더에는 새로운 회원정보가 잘 드렁가 있습니다.DB에는 잘 저장되는데, 프론트엔드에서 발생하는 에러일까요? 코드는 제가 거의 건든게 없습니다. 현재 제로초님이 Github 에 올려주신 코드에서 '비밀번호가 입력이 잘못되었습니다' 이부분 검증하는 부분은 추가되어 있습니다.

<ClientComponent> <ServerComponent /> </ClientComponent>export default function ClientComponent({children}: {children: ReactNode}) { Return <div>{children}</div> }위는 강의에서 나왔던 클라이언트 컴포넌트에 서버 컴포넌트를 children으로 주는 코드입니다.여기서 클라이언트 컴포넌트에 여러개의 서버 컴포넌트를 children으로 보내고 싶으면 어떻게 해야하나요?

ISR 을 보면서 SSR과 SSG의 각각의 단점을 모두 커버할 수 있는 기술이라 생각이 되었습니다. 진짜, 이 외에는 쓸 필요가 있나 싶을 정도인데요.. 한가지 여쭤보고 싶은 것은,ISR 을 API 로 호출해서 한다고 했을 때예를 들면, 어떤 게시물이 등록이 되면그 시점에 이 API를 호출하고 그 후 해당 페이지가 재생성 될 것입니다. 그렇다면, 게시물을 동시에 여러개 작성하게 된다면(서비스의 비즈니스 로직에 따라..) 어쩔 수 없이 이 API 엔드포인트에 트래픽이 몰리게 될 텐데 그로 인한 서버부하 는생각 안해도 되는것이지 여쭤보고 싶습니다.

안녕하세요,강의 2.14에서 이전에 SSR로 만들었던 페이지를 SSG로 변경하는 것 관련하여 질문이 있습니다.SSG에서는 빌드타임에 페이지를 생성하기 때문에 쿼리스트링을 불러올 수 없어서 SSG로 만들고 싶다면 쿼리스트링 가져오는 부분은 클라이언트 사이드쪽에 코드를 추가해주면 가능하다고 하셨는데, 그럼 이 프로젝트의 검색페이지 같은 경우는 SSR를 사용하는게 나은지 SSG를 사용하는게 나은지 궁금합니다. 둘다 장단점이 있기 때문에 개발자의 판단에 달려있는걸까요? 쿼리스트링을 사용하는 페이지에서 어떤 경우에는 SSR로 만드는게 낫고 어떤경우에는 SSG로 만드는게 나을지 그 기준에 대해서도 궁금합니다.강의 너무 잘 듣고 있습니다. 감사합니다. ++다른 비슷한 질문에 답변 다신 것 읽어봤는데 SSG는 식당에서 반찬을 먼저 주는 것과 같다고 말씀하셔서 이해가 잘되었습니다. 근데 SSG의 단점이 최신 데이터의 반영은 어려운것이기 때문에 데이터가 잘 변경되지 않는 페이지에서 사용하는 것이 좋다고 하셨는데, 그럼 검색페이지의 검색결과가 계속 바뀐다고 가정하면 (책 데이터가 계속 추가됨) SSR을 사용하는게 나은가요? 아니면 그 부분은 어차피 클라이언트 사이드에서 쿼리스트링 추가해서 다시 새로 불러오기 때문에 SSG로 사용해도 무방한가요? 거의 다 이해한 것 같은데 조금 헷갈리네요 ㅎㅎ

안녕하세요 선생님 const nextState = formReducer(state, {type : "VALIDATE", validate })로 nextState를 정의하셨는데 애초에 SET_TOUCHED_ALL 디스패치가 실행되면 리렌더링VALIDATE 디스패치가 실행되면 또 리렌더링 되어 onSubmit 함수가 정상 동작해야 될거 같은데.. 그렇게 생각하면 안되는 이유가 궁금합니다.!

composers 기능이 현재는 다른 이름으로 대체되거나 없어졌나요?찾을 수가 없네요

error.tsx 핸들링에서 막국수를 검색할때 error.tsx component가 보이지 않습니다. 혹시 변경된부분이 있나요..?    현재 api주소로 직접 던져보니 빈배열을 받아와서 error처리가 안됬네요, 혹시 강사님께서는 이런에러처리를 어떻게하셨나요? 보통 어떻게하는게 좋을지를 몰라서요..  아 죄송합니다. 백엔드 server를 중단안했네요.하하하 참 정신이없네요. 그나저나 위의 저 빈배열은 보통 에러처리가 어떻게하는지는 궁금합니다.

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

왜 안되는 것인지 잘 모르겠습니다.  https://onebite-books-page-l47231g07-min-jiyeongs-projects.vercel.app/ 화면은 보였다가 안보였다가 하고, book id 별로 보이는 것도 있고 보이지 않는 것도 있습니다

/book/3만 "존재하지 않는 페이지 입니다."라고 뜨는데 이유를 잘 모르겠습니다.아래는 npm run build 결과입니다.> section02@0.1.0 build> next build ▲ Next.js 15.1.6./src/components/book-item.tsx17:7 Warning: Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element./src/pages/book/[id].tsx51:9 Warning: Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image or a custom image loader to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element @next/next/no-img-element./src/pages/search/index.tsx20:6 Warning: React Hook useEffect has a missing dependency: 'fetchSearchResult'. Either include it or remove the dependency array. react-hooks/exhaustive-depsinfo - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/app/api-reference/config/eslint#disabling-rules ✓ Linting and checking validity of types Creating an optimized production build ... ✓ Compiled successfully ✓ Collecting page data 인덱스 페이지 렌더링fetchOneBook error Error: 서버 상태 오류 at u (.next/server/pages/book/[id].js:1:634) at async x (.next/server/pages/book/[id].js:1:873) ✓ Generating static pages (8/8) ✓ Collecting build traces ✓ Finalizing page optimization Route (pages) Size First Load JS┌ ● / (ISR: 3 Seconds) 1.05 kB 95.7 kB├ /_app 0 B 94.6 kB├ ○ /404 322 B 94.9 kB├ ƒ /api/hello 0 B 94.6 kB├ ƒ /api/revalidate 0 B 94.6 kB├ ● /book/[id] (5318 ms) 705 B 95.3 kB├ ├ /book/3 (5072 ms)├ ├ /book/1├ └ /book/2└ ○ /search 1.11 kB 95.7 kB+ First Load JS shared by all 96.9 kB ├ chunks/framework-a4ddb9b21624b39b.js 57.5 kB ├ chunks/main-d4c20200ddabac7f.js 33.7 kB └ other shared chunks (total) 5.68 kB○ (Static) prerendered as static content● (SSG) prerendered as static HTML (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps)ƒ (Dynamic) server-rendered on demand// book/[id].tsx// index.tsx

 안녕하세요, 인프런 AI 인턴입니다.장우진님, 리액트 네이티브로 웹앱을 구현한 후에 구글 로그인 기능을 추가하고자 하신다면 파이어베이스를 통해 이 기능을 제공할 수 있습니다. 파이어베이스는 웹과 모바일 애플리케이션 모두를 지원하는 강력한 플랫폼입니다. 리액트 네이티브에서는 파이어베이스의 Authentication 모듈을 사용하여 쉽게 구글 로그인 기능을 구현할 수 있습니다.과정은 일반적으로 다음과 같습니다:1. 파이어베이스 콘솔에서 해당 프로젝트에 구글 로그인 기능을 활성화합니다.2. 리액트 네이티브 앱에 필요한 파이어베이스 SDK를 설치하고 구성합니다.3. 파이어베이스 Authentication 모듈을 사용하여 구글 로그인 기능을 구현합니다.구글 로그인 기능은 웹앱에서 구현 가능하며, 리액트 네이티브에도 동일하게 적용할 수 있다는 점에서 효율적인 개발이 가능합니다. 구체적인 코드 및 구현 방법은 다음의 문서를 참조해 보세요:- 파이어베이스 웹으로 구글 로그인 구현하기프로젝트의 구체적인 요구 사항에 따라 추가적인 설정이나 코드가 필요할 수도 있습니다. 따라서 더 자세한 구현 방법은 위의 공식 문서나 관련 블로그 글을 참고하시길 바랍니다.저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.이런 너의 대답은 알겠어!그런데 내가 궁금한거는 강의에서는 파이어베이스 프로젝트를 만들때 웹 애플리케이션으로 만들어서 진행했는데 구글 로그인 환경도 웹 애플리케이션으로 진행할 수 있는지 물어보는거야! 아니면 안드로이드 환경으로 프로젝트를 다시 만들어야해? reactnative야!