리액트 강의를 듣고 스프링부트랑 연동해서 리액트 코드를 짜고 있습니다. 지금 로그인 부분 처리하다가 막혀서 정말 구글링도 해보고 며칠째 하다가 도저히 해결이 안돼서 질문 드립니다.지금 로그인처리가 되면 sessionStorage에 로그인 회원 정보를 담고 navigate함수를 이용해 Main컴포넌트로 보냈습니다. 근데 다른 컴포넌트들에서도 이 로그인회원 정보를 사용하기 위해 최상위컴포넌트인 App컴포넌트에서 sessionStorage.getItem()해서 state값에 저장하고 그걸 context로 하위 컴포넌트들에게 제공했는데 로그인되고 navigate함수로 Main컴포넌트로 가면 context로 저장한 state값이 null이 되고 새로고침해보면 state값이 잘 들어오더라고요ㅠㅠ 비동기함수인것과 관련있을까요??새로고침없이 컴포넌트에서 바로 state값을 이용하고 싶으면 어떻할까요? state값 이용해서 바로 화면에도 렌더링도 해야하는 상황입니다 ㅠㅠ강의와 관련된 내용은 아니지만 프로젝트를 혼자 만들다보니 잘 안되는 부분이 많아 질문드립니다 !

login 시 let setCookie = response.headers.get('Set-Cookie'); 가져오려고 할 때 response.headers에는 뜨는데 samesite 때문에 cookie를 가져올 수 없습니다.  개발자도구에서 samesite 에러 어떻게 해결할 수 있을까요??아래와 같이 수정했는데 같은 오류가 발생합니다. if (setCookie) { const parsed = cookies.parse(setCookie); cookies().set('connect.sid', parsed['connect.sid'], { sameSite: 'None', secure: true }); } 

안녕하세요 강사님 강의를 보면서 따라하는 도중에오타가 없는거같은데 오류가 발생해서 질문드립니다.value값을 onChange 있는곳에 써야하는데 쓰지 않아서 발생하는 문제인거 같은데 해당 오류 때문에 TextArea도 정상적으로 css부분이 적용되지 않습니다.

안녕하세요 선생님~ 2.1 강의 5분 30초부터 질문드립니다!작업 파일에 새로운 폴더를 하나 만들고, 그 폴더를 열어서 선생님과 모든 것을 똑같이 했는데 저는 `npx create-next-app@14 section02`라고 치니까 맨 아래 제가 첨부한 것과 같은 에러가 떴어요! gpt 검색해서 `mkdir C:\Users\wlgp1\AppData\Roaming\npm` 경로를 수동으로 하나 만들고 다시 하니까 터미널에서 "뭐 설치해야 하는데 계속할거냐"고 질문해서 y 눌렀더니 그 다음부터 다시 선생님과 동일하게 타입스크립트 사용할 거냐고 질문이 나왔습니다~ (이후 동일) 문제는 해결되었지만, 무엇이 달라서 선생님과 차이가 난 것인지가 궁금합니다! ```PS C:\workspace\onebite-next> npx create-next-app@14 section02 npm error code ENOENT npm error syscall lstat npm error path C:\Users\wlgp1\AppData\Roaming\npm npm error errno -4058 npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\wlgp1\AppData\Roaming\npm' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\wlgp1\AppData\Local\npm-cache_logs\2024-09-30T04_18_06_975Z-debug-0.log```

6장 실습중 이미지가 안보이는 이유가 무엇일까요?빠른 답변 좀 부탁드립니다.

안녕하세요. 조은님, 강의 잘 듣고 있습니다 :)PPR 적용하기 전에는 서버에 문제가 없었는데, PPR 적용 후 예상치 못한 현상이 발생하여 여러 가지 방법으로 해결해보려고 이것저것 시도하고 있는데 아직 해답이 없네요. PPR 커밋하고 푸쉬한 것을 취소하고 이전 상태로 되돌렸지만, 여전히 에러가 납니다. T_T 지금도 찾아보는 중입니다. 같이 고민해주시면 감사하겠습니다. { "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "@types/node": "20.11.17", "@types/react": "18.2.55", "@types/react-dom": "18.2.19", "@vercel/analytics": "^1.1.3", "@vercel/postgres": "^0.10.0", "@vercel/speed-insights": "^1.0.9", "geist": "1.2.2", "next": "^14.2.13", "next-mdx-remote": "^4.4.1", "react": "18.2.0", "react-dom": "18.2.0", "sugar-high": "^0.6.0", "typescript": "5.3.3" }, "devDependencies": { "autoprefixer": "^10.4.20", "postcss": "^8.4.35", "tailwindcss": "3.4.13" } }

선생님~ 안녕하세요 :)강의 유익하게 잘 듣고 있습니다. 새로 리뉴얼된 섹션 1~12까지 강의 중에,notification 부분이 없어서 질문 드립니다. notification 부분을 들으려면,이전 강의인 섹션 20으로 대체해야 하는 걸까요? 섹션 13부터는 예전 강의로,Deprecated라고 써져 있는데,notification 사용방법은 그것을 따라하면 되는지궁금해서 글을 씁니다. 혹시, 달라졌다면 어느 부분을 참고해서 공부하면 좋을지조언도 조금만 부탁드립니다. ^^

PS C:\_programming\react-slack-app> npm run build> react-slack-app@0.0.0 build> vite buildvite v5.4.3 building for production...✓ 405 modules transformed.dist/index.html 0.46 kB │ gzip: 0.29 kBdist/assets/index-Dv9iUpv1.css 234.57 kB │ gzip: 31.34 kBdist/assets/index-DB02uby9.js 766.67 kB │ gzip: 210.93 kB(!) Some chunks are larger than 500 kB after minification. Consider:- Using dynamic import() to code-split the application- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.✓ built in 4.58s강의도 다시 다 보고 확인해봤는데 다른 점은 없는거 같습니다. 경고만 뜨는건줄 알았는데 build자체가 중단됩니다. 어떻게 해결해야하나요?

처음에 인덱스 페이지는 정적 페이지인데 그 안에 있는 useSearchParams 훅을 사용해서 오류가 난 걸 해결했잖아요 근데 그 후 빌드를 실행하고 결과를 보니 not found 페이지 외에는 다 동적 페이지로 나오는데 그럼 인덱스 페이지는 정적 페이지인 건가요 동적 페이지인 건가요?

function main(value) { value(); } function sub() { console.log("sub"); } main(sub);여기서 main() 을 호출하면 main 함수를 호출하게 되고,main 함수에서는 매개변수로 value를 받고 있는데main(sub)를 호출하게 되면 main() 함수가 실행이 되고,여기서 main 함수 안에 있는 value()는 매개변수로 받은 값이 value라서 value()이렇게 매개변수로 받은 이름으로 함수를 호출하는걸까요? 그럼 만약 매개변수로 aaa를 받았다면 main 함수 안에서 aaa()를 호출하게 되면 동일하게 sub() 함수가 호출되는걸까요? main 함수 안에서 매개변수로 받은 value()를 호출하는것과함수 sub()를 바로 호출하는것과의 장단점이 있을까요? 그리고 main 함수 안에서 value를 호출하는것과 value()를 호출하는것의 차이가 어떤게 있을까요??value()를 호출할때는 매개변수로 받은 콜백함수를 호출해서 실행을 하는걸로 이해를 하고 있는데 value를 호출을 하면 아무런 변화가 없는데 value를 호출하는 경우도 자주 보이던데 이렇게 호출을 하는 이유가 무엇일까요?  

컴포넌트를 새로 만들때 자꾸 React가 없습니다란 TS에러가 납니다...그래서 React를 import해주면 TS에러가 해결되는데 검색해봐도 모르겠어서 질문남깁니당import React from 'react' const Loading = () => { return( <div> Loading... </div> ) } export default Loading;

강의 PDF 파일이 제공된다고 대시보드에 써있는데 혹시 어디서 다운 받을 수 있을까요?강의를 다 보고 나서 PDF파일로 복습하려고 하는데 어디 있는지 못찾겠습니다.

import "./List.css"; import TodoItem from "./TodoItem"; import { useState } from "react"; const List = ({ todos, deleteTodo, updateTodos }) => { const [filtered, setFiltered] = useState(""); const onChange = (e) => { setFiltered(e.target.value.toUpperCase()); }; const getfiteredData = () => { return todos.filter((todo) => { return todo.content.toUpperCase().includes(filtered); }); }; const filteredTodos = getfiteredData(); return ( <div className="list"> <h4>Todo List 🌱</h4> <input type="text" placeholder="검색어를 입력하세요" onChange={onChange} /> <div className="todoWrapper"> {filtered ? filteredTodos : todos.map((todo) => { return ( <TodoItem {...todo} key={todo.id} deleteTodo={deleteTodo} updateTodos={updateTodos} /> ); })} </div> </div> ); }; export default List; 이렇게 하니까Uncaught Error: Objects are not valid as a React child (found: object with keys {id, isDone, content, date}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom_client.js?v=6a67398a:9932:17) at updateSlot (react-dom_client.js?v=6a67398a:10153:15) at reconcileChildrenArray (react-dom_client.js?v=6a67398a:10249:30) at reconcileChildFibers2 (react-dom_client.js?v=6a67398a:10557:24) at reconcileChildren (react-dom_client.js?v=6a67398a:14290:37) at updateHostComponent (react-dom_client.js?v=6a67398a:14805:11) at beginWork (react-dom_client.js?v=6a67398a:15933:22) at beginWork$1 (react-dom_client.js?v=6a67398a:19751:22) at performUnitOfWork (react-dom_client.js?v=6a67398a:19196:20) at workLoopSync (react-dom_client.js?v=6a67398a:19135:13)콘솔에 이런 오류가 뜨더라구요... 객체를 보내지도 않았는데 이렇게 하면 안되는 이유가 있나요?

PS C:\ONEBITE-REACT> npm installnpm error code ENOENTnpm error syscall opennpm error path C:\ONEBITE-REACT\package.jsonnpm error errno -4058npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\ONEBITE-REACT\package.json'npm error enoent This is related to npm not being able to find a file.npm error enoentnpm error A complete log of this run can be found in: C:\Users\imij0\AppData\Local\npm-cache\_logs\2024-09-25T12_36_16_923Z-debug-0.log 지금 이런 에러가 뜨는데 이거 배우기 전에 node.js 깔았는데 이거 굳이 npm install은 안해도 되나요?>적용도 다 해둔 상황이긴 한데 괜찮은건가요?

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

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

프로젝트 세팅할때는 yarn을 쓰셨는데요.shadcn에서 avatar 설치할때는 npx을 쓰셔서요.같이 써도 문제가 없나요?

16분 그림을 기준으로 초기 접속 시(SSR방식) : JS번들링(html 렌더링)하고 hydration으로 상호작용이 가능한 페이지로 변환페이지 이동 시(CSR방식) : 브라우저가 서버에게 별도의 페이지를 추가로 요청하지않고 js를 실행해서 컴포넌트를 교체뒤에 나오는 섹션의 데이터페칭과 프리페칭에 관해 궁금합니다.SSR에서의 데이터 페칭은 서버가 접속요청을 받고 백엔드 서버로부터 API를 주고받고 JS를 실행해서 렌더링된 HTML을 브라우저에 렌더링하는 것으로 알고 있는데 페이지 이동시에는 CSR방식으로 처리된다고 하셔서 이럴때는 브라우저에 렌더링 후에 데이터페칭을 하는것인지 궁금합니다. 위의 질문과 유사한데 프리페칭이 현재 페이지에 걸려있는 링크들에 대해서 JS번들링을 미리 가져오는것으로 알고있습니다. 그러면 이것들도 데이터 페칭되지 않은 해당 페이지의 리액트 컴포넌트들만을 가져오는 것인가요? 

안녕하세요 제로초님. 강의 잘 보고 있습니다. <img src={photo.link} alt={photo.Post?.content} /><div className={style.image} style={{backgroundImage: `url(${photo.link})`}} />여기서 css를 보니 img에 display none을 주고 div에 style의 bg로 이미지를 주셨던데 왜 이렇게 하신건지 특별한 이유가 있나요? 궁금합니다.

병렬 라우팅에 문제가 있는 거 같아 문의 드립니다.강의 그대로 패러렐 라우트, 인터셉터 라우트까지 모두 따라했었는데,"Application error: a client-side exception has occurred (see the browser console for more information)."브라우저에 이런 에러가 뜨면서, 콘솔창에는 아래와 같이 에러가 뜨더라구요.app-index.js:33 Warning: Cannot update a component (`HotReload`) while rendering a different component (`Router`). To locate the bad setState() call inside Router, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)window.console.error @ app-index.js:33Show 1 more frameShow lessUnderstand this errorreact-dom.development.js:9126 Uncaught TypeError: initialTree is not iterable at applyPatch (apply-router-state-patch-to-tree.js:17:53) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:74:30) at applyRouterStatePatchToTree (apply-router-state-patch-to-tree.js:76:30) at eval (navigate-reducer.js:142:88)Understand this errorapp-index.js:33 The above error occurred in the <Router> component: at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler. 그래서 어디서 난 에러인지 추리려고 인터셉터 라우트 부분은 아예 빼버리고,패러랠 라우트 부분으로 확인해보는데, 패러랠 라우트 부분부터 아예 에러가 나서 이것이 문제인 거 같더라구요. { "name": "z-com", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "classnames": "^2.5.1", "dayjs": "^1.11.13", "next": "14.2.11", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.4.20", "eslint": "^8", "eslint-config-next": "14.2.11", "postcss": "^8.4.47", "tailwindcss": "^3.4.12", "typescript": "^5" } }  package.json과 디렉토리 구조는 이런 상태이구요.@modal/compose/tweet/page.tsx@modal/compose/tweet/modal.module.css@modal/default.tsx이 세 파일은 깃헙 ch2-2 에 나온대로 그대로 적었습니다. import {ReactNode} from "react"; import style from '@/app/(afterLogin)/layout.module.css'; import Link from "next/link"; import Image from "next/image"; import ZLogo from '../../../public/zlogo.png'; import NavMenu from "@/app/(afterLogin)/_component/NavMenu"; import LogoutButton from "@/app/(afterLogin)/_component/LogoutButton"; import TrendSection from "@/app/(afterLogin)/_component/TrendSection"; import FollowRecommend from "@/app/(afterLogin)/_component/FollowRecommend"; // import RightSearchZone from "@/app/(afterLogin)/_component/RightSearchZone"; type Props = { children: ReactNode, modal: ReactNode } export default function AfterLoginLayout({ children, modal }: Props) { return ( <div className={style.container}> <header className={style.leftSectionWrapper}> <section className={style.leftSection}> <div className={style.leftSectionFixed}> <Link className={style.logo} href="/home"> <div className={style.logoPill}> <Image src={ZLogo} alt="z.com로고" width={40} height={40} /> </div> </Link> <nav> <ul> <NavMenu /> </ul> <Link href="/compose/tweet" className={style.postButton}> <span>게시하기dd</span> {/* <svg viewBox="0 0 24 24" aria-hidden="true" className="r-jwli3a r-4qtqp9 r-yyyyoo r-1472mwg r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp"><g><path d="M23 3c-6.62-.1-10.38 2.421-13.05 6.03C7.29 12.61 6 17.331 6 22h2c0-1.007.07-2.012.19-3H12c4.1 0 7.48-3.082 7.94-7.054C22.79 10.147 23.17 6.359 23 3zm-7 8h-1.5v2H16c.63-.016 1.2-.08 1.72-.188C16.95 15.24 14.68 17 12 17H8.55c.57-2.512 1.57-4.851 3-6.78 2.16-2.912 5.29-4.911 9.45-5.187C20.95 8.079 19.9 11 16 11zM4 9V6H1V4h3V1h2v3h3v2H6v3H4z"></path></g></svg> */} </Link> </nav> <LogoutButton /> </div> </section> </header> <div className={style.rightSectionWrapper}> <div className={style.rightSectionInner}> <main className={style.main}>{children}</main> <section className={style.rightSection}> {/* <RightSearchZone /> */} <TrendSection /> <div className={style.followRecommend}> <h3>팔로우 추천</h3> <FollowRecommend /> <FollowRecommend /> <FollowRecommend /> </div> </section> </div> </div> {modal} </div> ) }layout.tsx도 위에 코드와 같이 거의 그대로 적었구요. 참고로 layout.tsx에서 console.log(modal) 했을 때, undefined 뜹니다.근데 또 explore로 이동한 뒤 게시하기 버튼을 누르면 modal이 뜹니다.이것 저것 다해보다가 도저히 안풀려서 문의드립니다.제가 어디서 놓친 걸까요...