강의 내용은 ReactDom.render인데오늘 설치 해보니 ReactDom.createRoot가 추가됬네여

강의에서는 깃허브 참고하라 하시고 깃허브 링크를 안 올려놓으셔서개인적으로 이메일도 보냈으나 묵묵부답이십니다코드 좀 보고싶은데 제발 회신 좀 해주세요~~~~!~!~!~

안녕하세요. React Immer 적용시 나타나는 에러인데확인한번 부탁드려도 될까요?Immer 적용 전까지 코드는 잘 돌아갔는데, 에러 추적이 힘드네요. 웹 팩 환경설정 문제일까요? immer module은 잘 설치되어 있습니다. 에러내용소스코드front/reducers/user.jsimport produce from 'immer'; export const initialState = { logInLoading : false, // 로그인 시도중 logInDone : false, loginError : null, logOutLoading : false, // 로그아웃 시도중 logOutDone : false, logOutError : null, signUpLoading : false, // 회원가입 시도중 signUpDone : false, signUpFailure : null, changeNicknameLoading : false, // 닉네임 변경 시도중 changeNicknameDone : false, changeNicknameFailure : null, me : null, signUpData : {}, loginData : {}, }; const dummyUser = (data) => ({ ...data, nickname : '제로초', id : 1, Posts : [{ id : 1}], Followings : [{nickname : 'AAA'}, {nickname : 'BBB'}, {nickname : 'CCC'}], Followers : [{nickname : 'AAA'}, {nickname : 'BBB'}, {nickname : 'CCC'}], }); export const LOG_IN_REQUEST = 'LOG_IN_REQUEST'; // 액션의 이름 export const LOG_IN_SUCCESS = 'LOG_IN_SUCCESS'; export const LOG_IN_FAILURE = 'LOG_IN_FAILURE'; export const LOG_OUT_REQUEST = 'LOG_OUT_REQUEST'; // 액션의 이름 export const LOG_OUT_SUCCESS = 'LOG_OUT_SUCCESS'; export const LOG_OUT_FAILURE = 'LOG_OUT_FAILURE'; export const SIGN_UP_REQUEST = 'SIGN_UP_REQUEST'; export const SIGN_UP_SUCCESS = 'SIGN_UP_SUCCESS'; export const SIGN_UP_FAILURE = 'SIGN_UP_FAILURE'; export const CHANGE_NICKNAME_REQUEST = 'CHANGE_NICKNAME_REQUEST'; export const CHANGE_NICKNAME_SUCCESS = 'CHANGE_NICKNAME_SUCCESS'; export const CHANGE_NICKNAME_FAILURE = 'CHANGE_NICKNAME_FAILURE'; export const FOLLOW_REQUEST = 'FOLLOW_REQUEST'; export const FOLLOW_SUCCESS = 'FOLLOW_SUCCESS'; export const FOLLOW_FAILURE = 'FOLLOW_FAILURE'; export const UNFOLLOW_REQUEST = 'UNFOLLOW_REQUEST'; export const UNFOLLOW_SUCCESS = 'UNFOLLOW_SUCCESS'; export const UNFOLLOW_FAILURE = 'UNFOLLOW_FAILURE'; export const ADD_POST_TO_ME = 'ADD_POST_TO_ME'; export const REMOVE_POST_OF_ME = 'REMOVE_POST_OF_ME'; export const signUpAction = (data) => { return { type: SIGN_UP_REQUEST, data, }; }; export const changeNicknameAction = (data) => { return { type: CHANGE_NICKNAME_REQUEST, data, }; }; export const loginRequestAction = (data) => { return { type: LOG_IN_REQUEST, data, } }; export const logoutRequestAction = { type: LOG_OUT_REQUEST, }; const reducer = (state = initialState, action) => produce(state, (draft) => { switch (action.type) { // 로그인 case LOG_IN_REQUEST: draft.state = true; draft.loginError = null; draft.logInDone = false; break; case LOG_IN_SUCCESS: draft.logInLoading = false; draft.logInDone = true; draft.me = dummyUser(action.data); break; case LOG_IN_FAILURE: draft.logInLoading = false; draft.loginError = action.error; break; // 로그아웃 case LOG_OUT_REQUEST : draft.logOutLoading = true; draft.logOutError = null; break; case LOG_OUT_SUCCESS : draft.logOutLoading = false; draft.logOutDone = false; draft.me = null; break; case LOG_OUT_FAILURE : draft.logOutLoading = false; draft.logOutError = action.error; break; // 회원가입 case SIGN_UP_REQUEST : draft.signUpLoading = true; draft.signUpDone = false; draft.signUpError = null; break; case SIGN_UP_SUCCESS : draft.signUpLoading = false; draft.signUpDone = true; break; case SIGN_UP_FAILURE : draft.signUpLoading = false; draft.signUpData = action.error; break; // 닉네임 변경 case CHANGE_NICKNAME_REQUEST : draft.changeNicknameLoading= true; draft.changeNicknameDone= false; draft.changeNicknameError= null; break; case CHANGE_NICKNAME_SUCCESS : draft.changeNicknameLoading = false; draft.changeNicknameDone = true; break; case CHANGE_NICKNAME_FAILURE : draft.changeNicknameLoading = false; draft.changeNicknameData = action.error; break; // 게시글 등록시 사용자 dummy Data에 동기화 case ADD_POST_TO_ME : draft.me.Posts.unshift({ id : action.data}) break; // return { // ...state, // me : { // ...state.me // Posts: [ { id.action.data}, ...state.me.Posts] // } // } // 게시글 삭제 case REMOVE_POST_OF_ME : draft.me.Posts = draft.me.Posts.filter((v) => v.id !== action.data) break; // return { // ...state, // me : { // ...state.me, // Posts : state.me.Posts.filter((v) => v.id !== action.data) // } // } default: break; } }); export default reducer; 

Unexpected Application Error!No QueryClient set, use QueryClientProvider to set oneError: No QueryClient set, use QueryClientProvider to set one at useQueryClient (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:2826:11) at useBaseQuery (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:3003:23) at useQuery (http://localhost:3000/node_modules/.vite/deps/chunk-PPRRYNMJ.js?v=afce5f27:3051:10) at ProductList (http://localhost:3000/src/pages/products/index.tsx?t=1694339505145:26:7) at renderWithHooks (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:12169:26) at mountIndeterminateComponent (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:14919:21) at beginWork (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:15900:22) at beginWork$1 (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19747:22) at performUnitOfWork (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19192:20) at workLoopSync (http://localhost:3000/node_modules/.vite/deps/chunk-MMW4JUSU.js?v=afce5f27:19131:13)import { Suspense, useEffect } from "react"; import { getClient } from "./queryClient"; import { QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { routes } from "./routes"; import { useRoutes } from "react-router-dom"; const App = () => { const elem = useRoutes(routes); const queryClient = getClient(); console.log("QueryClient:", queryClient); // useEffect(() => { console.log("QueryClientProvider is mounted."); }, []); return ( <QueryClientProvider client={queryClient}> <Suspense fallback={<div>Loading...</div>}>{elem}</Suspense> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> ); }; export default App; import React from "react"; export const DynamicIndex = React.lazy(() => import("./pages/index")); export const DynamicProductsIndex = React.lazy(() => import("./pages/products/index")); export const DynamicProductsId = React.lazy(() => import("./pages/products/[id]"));import GlobalLayout from "./pages/_layout"; import * as Lazy from "./Lazy"; export const routes = [ { path: "/", element: <GlobalLayout />, children: [ { path: "/", element: <Lazy.DynamicIndex />, index: true }, { path: "/products", element: <Lazy.DynamicProductsIndex />, index: true }, { path: "/products/:id", element: <Lazy.DynamicProductsId /> }, ], }, ]; export const pages = [{ route: "/" }, { route: "/products" }, { route: "/products/:id" }]; queryclient와 queryprovider를 잘 설정한것 같은데 에러가 발생하고 있습니다. 거의 4시간 가까이 찾아본것 같습니다.. Lazy부분은 따로 분리를 안하면 경고를 띄워서 분리를 했습니다. 이리저리 만져서 tool도 안뜨는걸 뜨게 했는데 저 에러는 도저히 해결이 안되네요 ... https://github.com/littleduck1219/Web_Toy_Project/tree/main/shopping-mall  

TypeError: Cannot read properties of undefined (reading 'target') 이런 오류를 어떻게 해결해야 할 지 모르겠습니다!

이 부분에서 a -= b와a /= b 부분의 정답을 보여주는 주석에 오류가 있어 문의드립니다. 각각 -2와 0.5가 맞는 답일까요?답변 부탁드립니다!!:)

이렇게 나왔습니다 무엇이 문제일까요? 

후.. 프로젝트 생성은했고 패키지 그대로 다운받았는데화면에 에러가 뜨네요...뭐가 문제인건가요 . 

질문있습니다 강사님,instagram /serializers.py 에서AuthorSerializer 클래스의 avatar_url_field 메서드는두번째 인자로 author 를 받아서 처리해주고 있는데AuthorSerializer 내부에서 author를 정의해준 부분이 없는데어떻게 author를 인자로 받을 수 있는걸까요? 마찬가지로 PostSerializer 클래스의 is_like_field 메서드의 두번째 인자인 post도 어떻게 받아 처리하는 건지 궁금합니다. 

안녕하세요 6-12까지 수강한 상태입니다. 강의를 따라해서 다른 부분은 다 강의대로 똑같이 진행되는데 저는 사이트를 새로고침시 여전히 렌더링이 2번 진행됩니다. 전에 컴포넌트 id를 확인했을 때 0부터가 아닌 20부터 id가 시작되는 걸 확인했어서 그것과도 연관이 있는 것 같은데 정확한 원인을 도무지 못 찾겠어서 질문드립니다ㅠㅠ아래는 코드샌드박스 링크입니다. 감사합니다!https://codesandbox.io/s/ecstatic-firefly-87mcs4?file=/src/App.js

이전 강의 섹션 7 "실무용 폴더구조와 props"에서 21분 3초쯤에 src > components에서 한 번만 사용되는 컴포넌트들은 units, 두 번 이상 사용되는 컴포넌트들은 commons폴더에 만들어 준다고 하셨는데 섹션 7 "컴포넌트 재사용성"에서는 만들 컴포넌트는 등록페이지와 수정페이지 두 곳에서 사용되는데 12분 50초쯤에 src > components > commons이 아니라 src > components > units 폴더에 만드시던데 2번 이상 사용될 컴포넌트는 commons안에 만드는 거 아니었나? 혼란스러워서 저도 units 폴더에 따라 만들긴 했지만 제가 제대로 이해못한 것 같습니다... 이 부분에 대해서 한 번 더 설명해 주시면 감사드리겠습니다!

안녕하세요! css 싸이월드 1일차 과제 중에 아이콘과 글자 사이의 간격을 조절할 수 있는 방법이 있는 지 궁금해져 질문 드립니다!아래는 제가 작성한 html 코드이고아래는 라이브서버 화면입니다!별과 인스타그램 사이 간격이 위 3개의 글자보다 넓어 신경이 쓰이네요... 차이를 알고자 배경색을 깔아둔 것입니다. 답변 주시면 감사하겠습니다 :)

안녕하세요.. 매번 사소한걸로 질문드리고 있어욥...싸이월드 만들기 2탄 수업들으면서 같이 실습하고 있는데 html에는 제대로 입력을 한것같은데 화면에는 제대로 안떠서 문의글 남깁니다... 머가 문제인지 모르겠어요ㅠㅠ

react랑 redux 연결해서 화면 처음 띄우고 있는데 이처럼 강의랑 똑같이 코딩했는데,화면이 나오질않고있습니다. ㅠ 뭐가 문제일까요? 

const setGraphql = gql` mutation createBoard($writer: String, $title: String, $contents: String) { createBoard(writer: $writer, title: $title, contents: $contents) { _id number message } } `; export default function GraphqlMutationPage() { const [createBoardMutation] = useMutation(setGraphql); const onClickSubmit = async () => { try { const result = await createBoardMutation({ // await 을 빼주면 promise 상태로 변환 variables: { // variables => $ 역할을함 writer: '훈이', title: 'ㅎㅇ', contents: '반갑습니다', }, }); console.log(result); } catch (error) { console.error(error); } }; 다음과 같이 코드를 작성해보았습니다. 데이터 요청은 보내지지만 variables 값들이 바뀌질 않습니다.

npx lite0server --baseDir 1-vanilla터미널에서 실행 후, localhost:3000접속하면Cannot GET / 이라고 뜨고 개발자도구에는 404에러라고 뜹니다. 터미널에도 404 에러구요.. 어떻게 하면 화면 띄울수있을까요?Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults... ** browser-sync config ** { injectChanges: false, files: [ './**/*.{html,htm,css,js}' ], watchOptions: { ignored: 'node_modules' }, server: { baseDir: './', middleware: [ [Function (anonymous)], [Function (anonymous)] ] } } [Browsersync] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://192.168.0.102:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 -------------------------------------- [Browsersync] Serving files from: ./ [Browsersync] Watching files... 23.09.07 15:29:32 404 GET /index.html 23.09.07 15:29:35 404 GET /index.html 23.09.07 15:33:58 404 GET /index.html

image upload 의 주소가 google로 되어있다고 설명해주셨는데 백엔드 개발자가 google 쪽으로 설정한 것인지 아니면 graphql 에서 기본적으로 google 주소를 가지고 있는 것인지 궁금합니다

아래 그림과 같이 한 화면에 검색창과 입력창을 동시에 구현하는 방법에 관해 조언을 구하고 싶습니다.위쪽이 input form이고 아래쪽이 검색창입니다. 사용자가 값을 입력하는 중 자료를 검색하여 그 결과를 참고해서 입력할 수 있도록 구현하고자 합니다.GET 방식으로 검색기능을 구현했을 때, 검색이 되면 그동안 사용자가 입력하던 텍스트가 사라집니다.사용자가 입력하고 있던 값들도 그대로 유지한 채 사용자가 중간중간 검색을 하면서 값을 입력하고 최종적으로 한 번에 저장할 수 있도록 하는 방법이 있을까요?답변 기다리겠습니다.감사합니다.

posts, counter 가 생기면서 어떤 차이가 생긴건지 잘 이해가 되지 않습니다.작성된 대상들은 counter num을 가지고 이제 post num을 사용할 수 있다는데 잘 이해가 되지 않습니다...counter을 추가하면서 얻어진 효과가 뭔지 알 수 잇을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 미니 블로그 실습을 진행하던 중 위와 같은 오류를 발견하였습니다. commentList 파일의 map함수를 보았는데, 분명 배열이여서 map함수가 실행이 되어야 하는데 찾이 못하더라구요  import React from "react"; import styled from "styled-components"; import CommentListItem from "./CommentListItem"; const Wrapper = styled.div` display: flex; flex-direction: column; align-item: flex-start; justify-content: center; & > * { :not(:last-child){ margin-bottom: 16px; } } `; function CommentList(props){ const { comments } = props; return ( <Wrapper> {comments.map((comment, index) => { return <CommentListItem key={comment.id} comment= {comment}/> })} </Wrapper> ) } export default CommentList;혹시 힌트를 알 수 있을까요?