이 강의가 restAPI 기반인지, graphQL 기반 CRUD 구현인지 궁금합니다.

예제코드 다운받은거 실행시킬때는 04-04, 04-05와 같이 폴더 기준으로 다음예제 넘어갈때마다 npm install, npm run dev두개명령어 쳐서 실행시키는거 맞나요? 추가로 예제 코드에서 안하고 직접 처음부터 만들어서 하려면 처음에 했던 npm create vite@latest . 이 명령어로 하는거 맞죠?

안녕하세요 쌤!redux 사용을 이번 예제를 통해 처음 알게되었는데요.console.log 로 찍을때는 잘 내려오던 user 정보가 redux 에서는 안찍히고 isLogin 값만 보여서요 ㅠㅁㅠ 여러번 돌려봤지만 어떤 부분에서 놓친 것인지 잘 모르겠어서 질문드립니다! zustand, immer 모두 설치 잘되었는데 연결이 안된 문제일까요?.? 카카오 구현하기 6까지 끝낸 상태이고 모든 기능은 잘 동작해요(로그인, 로그아웃, 프로필 가져오기 등) 혹시 몰라 github 링크도 첨부해봅니다!https://github.com/YounaJ00/blog

window 10을 사용하고 있는 학생인데 react작동안됩니다ㅜㅜ ctrl 하고 마우스 왼쪽해도 실행이 안되네요 로딩이 오래 걸려요 

 import FirstCount from "./firstCount"; import SecondCount from "./secondCount"; import { useState } from "react"; export default function Main() { const [count, setCount] = useState(0); const handleSetCount = () => { setCount((prev: number) => prev + 1); }; return ( <> <h1>Main Component</h1> <FirstCount count={count} setCount={handleSetCount} /> <SecondCount count={count} setCount={handleSetCount} /> </> ); } import type { MouseEventHandler } from "react"; interface FirstCountProps { count: number; setCount: MouseEventHandler<HTMLButtonElement>; } export default function FirstCount({ count, setCount }: FirstCountProps) { return ( <> <h1>firstCount Component</h1> {count} <button onClick={setCount}>increase</button> </> ); } import type React from "react"; interface SecondCountProps { count: number; setCount: React.MouseEventHandler<HTMLButtonElement>; } export default function SecondCount({ count, setCount }: SecondCountProps) { return ( <> <h1>secondCount Component</h1> {count} <button onClick={setCount}>increase</button> </> ); } 맨 위에 코드가 부모컴포넌트인데 부모컴포넌트에서 증가 함수를 정의하고 그 아래에 props로 내려주는 패턴은 잘 쓰이지 않는 패턴인가요? 강의에서는 각 자식 컴포넌트에서 카운트 증가 로직이 있어서 중복되는거 같아요 그래서 부모에 하나로 정의하고 props로 내려주었는데 어느게 맞는 패턴인가요?

 export const requireAuth = () => { const token = sessionStorage.getItem("access_token"); if (!token) { return redirect("/auth/login"); } };export const fetchPostModify = async ({ params }: LoaderFunctionArgs) => { try { const auth = requireAuth(); if (auth) return auth; const { data } = await axiosInstance.get(`/posts/${params.id}`); return data; } catch (e) { console.error(e); } };fetchPostModify에서 requireAuth를 import 해서 reponse를 리턴해주고 있는데 여기서 어떤식으로 auth를 리턴시켜 requireAuth를 통해 redirect가 되는건지 조금 헷갈립니다

zustand에서 값을 가져올때 useStore((state) => state...) 이거랑 useStore.getState()... 이거랑 어떤 차이인가요?전자가 컴포넌트안에서 렌더링할때 가져오는 방식이고 후자는 단순히 현재시점의 스냅샷을 가져오는 건가요?

todoListItem을 React.memo로 메모이제이션 했음에도 todo를 추가했을때 리렌더링이 되는데 이때 todo 자체는 변한것이 아니고 todolist 컴포넌트에서 map으로 쓰고있기 때문에 전달받은 props가 변해서 리렌더링이 된것은 아니다 라고 하셨는데 그러니까 리스트아이템에서는 todo 배열 전체를 받은것이 아니고 todolist 컴포넌트에서 map으로 배열의 요소(객체)를 todolisitem에서 props로 전달받았기때문에 todo가 변한것이 아니다 이렇게 이해했는데 정확한 이해인지 궁금합니다

비제어 컴포넌트 - 라디오 수업 2:40 경const formData = new FormData(formElRef.current!);에서 !이 null 아님을 보장해 주신다 했는데 의미를 자세히 알고 싶은데 뭐라고 검색해서 찾아볼수 있을까요?

그 선생님은 지금 문제에서 상태 변경할떄setCount((count) => count +1); 로해주셨는데지금 상황에서는 그냥setCount((count+1)) 로 해도 문제 없지않나용?버튼 한번 눌렀을때 count+1 되는건 한번이니깐..?연속으로 +1 증가하는 로직이 아니라서 이렇게 생각되는데 혹시 제가 뭘 놓치고있는건가요?

서비스를 보다보면 상품 리스트의 "더보기"나 상품 상세 설명에서의 "더보기" 와 같은 기능이 있는데, 이럴 때 React.lazy() 가 사용되는 건가요?

계속해서 학습을 진행중인데, 함수값을 넘길때에는 useCallback을 사용해야한다는 것으로 알고있었는데,>>밑에는 실제 강의 중 공유해 주신 ContextProvider 안에 함수들 const increment = () => { setCount((count) => count + 1); }; const decrement = () => { setCount((count) => count - 1); }; const reset = () => { setCount(0); }; const memoization = useMemo(()=>({ increment, decrement, reset }),[]);>>제가 생각했던 방식const increment = useCallback(() => { setCount((count) => count + 1); },[]); const decrement = useCallback(() => { setCount((count) => count - 1); },[]); const reset = useCallback(() => { setCount(0); },[]); const memoization = useMemo(()=>({ increment, decrement, reset }),[increment, decrement, reset]);저는 밑에 memoization 변수를 빼고 바로 useCallback을 이용해서 객체값으로 넘겨주는 식으로 작성해야 한다고 생각을 했었습니다. 코드를 작성하는 방법에는 정답은 없지만, 당장은 기본에 입각한 학습을 해야하기에 어떤 방법이 조금 더 효율적인지 여쭤보고 싶습니다.

강의를 다 들었는데 섹션4의 퀴즈가 활성화 되지 않아 수료증을 못받고 있습니다 ㅠㅠ 혹시 뭐 빠트렸나 해서 섹션 4번 강의 다시 다 들었는데도 안되네요.. 확인부탁드립니다

안녕하세요 css 쪽 학습 중에 있는데, style-component에 작성중인데 강사님의 화면과 다르게 실행은 제대로 되나 아래 화면과 같이 그냥 문자열처럼 갈색 표시가 되는데 그래서 css 문구 추천이 안되는 것 같은데 어떤 문제인가요? 

섹션 4번 수업을 다 봤는데 퀴즈가 활성화가 안됩니다 ㅠㅠ 어떻게 하면 될까요>?

<BrowserRouter> <Routes> <Route path="home" element={<AdminHome />} /> <Route path="post" element={<AdminPost />} /> <Route path="update/:id" element={<AdminUpdate />} /> </Route> </BrowserRouter>Q1. 저는 항상 app.js 위에 코드와 같이 작성하는 편인데 강의에서는 주로 CreateBrowserRouter를 따로 이용하시는데 특별한 이유가 있나요?Q2. 간혹 프로젝트 중간중간 Header나 Footer 컴포넌트를 몇몇 페이지에서는 안보이거나 다른 header, footer 컴포넌트가 보이게끔 하고 싶은데 이런 경우 주로 어떻게 하실지 생각(?) 아이디어(?) 가 궁금합니다. 저는 안보이게 하고 싶은 페이지를 url로 구분하는 편인데 다른 좋은 방법이 있을까요?

SECTION18 > 08-18(MISSION) > quiz.md 예제코드가 어디 있을까요? 

[MONGOOSE] Warning: Duplicate schema index on {"email":1} found. This is often due to declaring an index using both "index: true" and "schema.index()". Please remove the duplicate index definition. 백엔드 시작 시 위와 같은 경고 메시지가 나옵니다. 작동은 문제가 없습니다.

useEffect(() => { const controller = new AbortController(); const fetchPosts = async () => { try { setIsLoading(true); const { data } = await axiosInstance.get( `/posts?_page=${currentPage}&_limit=${limit}&q=${encodeURIComponent(searchText)}`, { signal: controller.signal, }, ); setPosts(data); } catch (e) { console.log(e); if (e instanceof Error && e.name !== "CanceledError") { if (e.message.includes("timeout")) { setError("timeout 오류 발생"); } else { setError(e.message); } } } finally { if (!controller.signal.aborted) setIsLoading(false); } }; fetchPosts(); return () => { controller.abort(); }; }, [currentPage, limit, searchText]);처음 실행 시(새로고침) console.log(e)에서 CanceledError {message: 'canceled', name: 'CanceledError', code: 'ERR_CANCELED', config: {…}, request: XMLHttpRequest, …}이렇게 무조건 잡히는데 왜 그럴 까요? 물론 프로그램 실행 에는 문제가 없습니다.