package.json 파일 보시면 리액트 버전이 나오실텐데 저는 19 버전이라 위같은 에러가 뜨네요. 따라서, 기존 코드를 (리액트 17버전 이하에서 정상작동)..const ReactDom = require('react-dom'); ReactDom.render(<WordRelay />, document.querySelector('#root')); 아래처럼 변경해주셔야 합니다.import { createRoot } from 'react-dom/client'; createRoot(document.querySelector('#root')).render(<WordRelay />);

채찍피티에게 물어보니 try/catch로 처리하라고 하는데 이게 최선일까요..?

eslint.config.js (flat config): eslint.config.js 파일에서 eslint-config-prettier를 import한 후, 다른 설정을 재정의할 수 있도록 설정 배열의 마지막에 추가합니다.에서 어떻게 import해야하는가요? import eslint-config-prettier from 'eslint-config-prettier';로 하면 오류가 납니다.

.prettierrc를 적용했는데 저장하니 ;이 왜 안생길까요?

안녕하세요 !강의를 듣기전부터 궁금했던 내용인데 강의를 듣고나서도 답을 찾지 못해서 질문을 남깁니다..!개발자도구 > Network 탭 > 문서 > 응답이나 소스보기에 서버사이드에서 불러온 데이터가 HTML로 만들어져있으면 SEO에 영향을 주는 데이터라고 알고 있어요제가 혼자 테스트해보려고 만든 스트리밍에서는 <script /> 내부에만 서버 사이드에서 패치한 데이터가 들어가있고 HTML로 만들어지지는 않았더라고요( 아마 <script />에 있는 정보가 RSC Payload겠죠..? )그래서 이게 SEO에 영향이 가는 데이터일지 궁금해서 여기저기 찾다가 발견한 Next Playground에서는 HTML로도 만들어지고 <script />에도 들어가있더라고요최종적으로 궁금한것은 <script />에만 들어있는 스트리밍된 데이터도 SEO에 영향을 주는지가 궁금해요그리고 영향을 주든 안주든 이런 정보는 어디서 찾아봐야하는지 어떻게 검증하는지 알고 싶습니다..!( 참고로 Playground에서 패치하는 첫번째 리스트의 이름인 Fusce commodo porta로 확인해봤습니다! )

스프링부트와 리액트를 연동하는 강의를 본격적으로 듣기전에 궁금한게 있어서 글을 남깁니다.스프링부트로만 작업을 할경우 저희에겐 타임리프라는 SSR 기술이있어서 서버의 데이터도 쉽게 웹페이지에 전달할 수 있었습니다. 하지만 리액트의 경우 타입스크립트를 기반으로한 next.js 기술이 있는데 이 기술은 node.js를 상정하고 만들어진 기술인 것 같습니다.  이때 next.js 기술이 스프링부트의 타임리프를 대체할만한 SSR기술인지 아니면 next.js 같은 SSR기술이없어도 서버의 데이터를 쉽게 웹페이지에 전송할 수 있는지 궁금합니다. 기술이 필요하다면 어떤 종류의 기술을 익히는 것이 좋을지 알려주시면 너무 감사드립니다.

최근 취업시장이 리액트와 스프링부트나 넥스트같은 백엔드 기술을 모두 할줄아는 사람을 뽑는 추세가 강해져 저도 리액트 관련기술을 익히고자 강의를 신청했고 현재 수강중입니다. 백엔드쪽은 스프링부트로 확고히 가져가서 만약 이후에 둘을 연동할때 DB의 데이터를 가져오거나 서버와 연동해서 데이터를 가져오거나 통신할때 next.js 기술이 필수인지 아닌지 궁금해서 질문 남깁니다.필수가 아니라면 도움이 되는 지 궁금합니다. 제가 강사님 next,js 소개글을 봤는데 node.js가 필요기술에 있어서 node.js만을 위한 ssr기술인지 궁금합니다.

강의랑 다른 부분 1. tailwind 설치 커맨드: 커맨드가 간단해졌어요.npm install tailwindcss @tailwindcss/vite 강의랑 다른 부분 2. vite.config.ts : 이제 ***.tsx, ***.jsx 를 일일히 넣지 않아도 됩니다.import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) 강의랑 다른 부분 3. @import ~ 3줄 @import "tailwindcss";한 줄로 초간단해짐.. 강의랑 다른 부분 4. tailwind.config.js: config.js 가 없어졌습니다. (자세한 내용: https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration)대신 index.css 에 아래와 같은 형식으로 theme 을 적용할 수 있습니다.@import 'tailwindcss'; @theme { --color-primary: #1d2745; --color-secondary: #1de5d4; --color-tertiary: #1d2745; --color-white: #ffffff; --color-mono100: #f1f1f1; --color-mono200: #bebebe; --color-mono300: #d6d7d9; --color-error: #d01e1e; --color-social: #395997; }

IndexPage.js 에서 <Outlet/>을 했는데 todo메뉴를 클릭하면 "/list" 페이지로 이동을 안 합니다.console창을 보니 This means it will render an <Outlet /> with a null value by default resulting in an "empty" page 문구가 뜨는데 왜 그러는걸까요?

안녕하세요 덕분에 next.js를 깊게 공부할 수 있었습니다.next.js는 기존 리액트와 다르게 jsbundle(청크) 파일을 나누어 받아 옵니다.강의에서 본 것처럼 청크 파일들이 각각의 유니크한 해쉬 값을 가지는 것도 확인했습니다.시나리오next 프로젝트를 빌드배포 된 웹페이지를 오픈next 프로젝트를 다시 빌드기존의 웹페이지를 새로고침 하지 않고, 페이지 이동기존 리액트 프로젝트에서는 하나의 청크 파일을 처음 한 번에 받아서 새로고침 전까지 1번의 이전 빌드된 웹페이지로 동작이 되는 것으로 알겠는데요.next프로젝트에서는 jsbundle과 rsc_payload를 필요한 시점에 받으니까 새로 빌드한 파일엔 기존 청크해시 값과 달라서 문제가 생기지 않을까? 라는 생각이 들었습니다. 그런데 테스트 해보니 별다른 문제가 생기지 않는 것 같더라구요.. jsbundle과 rsc_payload의 유니크한(해쉬) 파일 이름이 도중에 변경 되더라도 next 서버측에서 찾을 수 있게 조치가 되어 있는 걸까요?

 안드로이드 버전 14해당 강의 자료를 받아서 실행해봤는데, 로그인 텍스트가 왼쪽으로 쏠려있고홈화면 버튼이 동작하지 않습니다. 왜이러는걸까요 ???

안녕하세요npx create-next-app@14 section02 설치 후 (강의 8분49초), npm run dev 실행후 브라우저에 localhost:3000 입력했더니 이미지가 깨져서 나옵니다.해당 프로젝트를 지우고 다시 설치해도 그대로입니다. 

현재 강의와 관련없는거 알지만 혹시나해서 문의남깁니다. 현재 강의 구매한 분들 대상으로[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 90% 할인해서 구매할 수 있었던 것으로 기억하는데, 이미 기간이 끝난거 알지만 지금이라도 할인된 가격으로 구매할 수 있을까 해서 문의남깁니다. 

강의와 같이 구현한다면page.tsx 에서 데이터 fetchPostRecommends.tsx 에서 는 다시 데이터를 fetch 하지 않고 HydrationBoundary를 통해 넘어온 데이터를 사용이렇게 page.tsx 에서만 데이터가 fetch 되어야 맞는거지요 ?제가 구현한 소스코드에서는 getPostRecommends 쪽에 로그를 찍어서 확인해보니 page.tsx 에서도 한번 호출하고 PostRecommends.tsx 에서도 한번 호출해서 총 2번 로그가 찍히더라구요.이론대로라면 page.tsx 에서 1번 호출했을 때만 로그가 찍혀야 하는 것이 맞는거죠?아 강의는 " 클라이언트 react-query" 입니다.

heidisql로 mariadb 연결하는 방법도 알려주실수 있나요? 인터넷에 검색해봐도 잘 안나와서 모르겠습니다.

eas와 notification 설정 후에는 로그인 시에 android emulator 상에서 코딩해주신 대로 '실제기기를 사용해주세요' 문구가 나옵니다.ios 는 개발자모드 설정을 구매해야 한다고 해서 기기는 안드로이드로 진행하려고 하는데 android 기기가 따로 없고emulator 로는 실행이 안되는 걸까요? expopushToken만 보내고 로그인이 되지는 않습니다.

안녕하세요 선생님, 질문이 있어서 남깁니다.만약 book/4를 URL로 요청하면 과정이  URL로 book/4 요청 시 Link 등이 없으므로 프리페칭은 안됨- 서버에서 JS 실행 (렌더링)- 렌더링 된 HTML 브라우저에 넘김- 브라우저에서 화면에 렌더링- 서버에서 JSBundel, RSC payload 브라우저에 넘김- 수화과정- 상호작용 가능 이게 맞나요? book/1~3은 staticPage로 풀라우트캐시되어있으니URL로 요청하면 풀라우트캐시에서 바로 HIT해서 주는거고요?

강의내용에 보면 todos가 변경될 때 Editor는 변경이 않되야하는 것 같은데 리렌터링이 됩니다.소스는 같은데 머가문제인지 알 수있을까요?<Editor.jsx>const Editor = () => { const { onCreate } = useContext(TodoDispatchContext); const [content, setContent] = useState(""); const contentRef = useRef(); const onChangeInput = (e) => { setContent(e.target.value); }; const onKeyDown = (e) => { if (e.keyCode === 13) { onSubmit(); } }; const onSubmit = () => { if (content === "") { contentRef.current.focus(); return; } onCreate(content); setContent(""); }; return ( <div className="Editor"> <input ref={contentRef} value={content} onKeyDown={onKeyDown} onChange={onChangeInput} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default Editor;<App.jsx>import "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer, useMemo, useCallback, createContext, } from "react"; const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().toLocaleDateString(), }, { id: 1, isDone: false, content: "빨래하기기", date: new Date().toLocaleDateString(), }, { id: 2, isDone: false, content: "청소하기", date: new Date().toLocaleDateString(), }, ]; const reducer = (state, action) => { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((todo) => todo.id === action.data.id ? { ...todo, isDone: !todo.isDone } : todo ); case "DELETE": return state.filter((todo) => todo.id !== action.data.id); default: return state; } }; export const TodoStateContext = createContext(); export const TodoDispatchContext = createContext(); function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", data: { id: targetId } }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", data: { id: targetId } }); }, []); const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); return ( <div className="App"> <Header /> <TodoStateContext.Provider value={{ todos }}> <TodoDispatchContext.Provider value={memoizedDispatch}> <Editor /> <List /> </TodoDispatchContext.Provider> </TodoStateContext.Provider> </div> ); } export default App;

매강좌마다 깃허브 링크가있던데요 매강마다 소스코드를 일일히 다운받아야하나요??? 아니면 한번에 다운받아도되는걸 제가 착각하고있는건가요??? 강의가 진행되어질수록 그만큼 코드변경된흐름을 깃허브 트리로 펼쳐놓으신것같은데.... 하나만받아도되는건지 매강마다 깃허브가서 소스코드를 매강마다 다운받아야하는건지 궁금합니다.

문제상황: ch6 마지막 파일 다운 받은 후 npm i react react-dom 하고 npm start 했습니다.product와 todo를 누르면 아래와 같은 상황이 나옵니다. 혹시 첨부 파일이 잘못된거 아닐까요?ERRORCannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') at ListComponent