글 수정기능을 추가하고 useReducer로 바꿔서 했는데 글을 추가해도 새로운 내용이 나타나지 않고, 마지막 요소가 다시 추가되었습니다. [{content:"To1"}, {content:"To1"}] 확인해보니 컴포넌트에서 받은 props를 useState초기화값으로 넣으면 바뀌지 않는 사실을 알게되었습니다. 하지만 이부분을 useEffect형식으로 바꿔 적어주니 새로운 내용으로 바뀌는 것을 확인했습니다. // props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... } //////////////////////////////////////////// // useEffect 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(""); useEffect(() => { if (content) { setUpcontent(content); } }, [content]); ... } useReducer를 적용하지 않을때 props를 useState초기화값을 넣어도 잘 구동되었습니다. // props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... } 이것이 리액트 라이프 사이클 때문에 이러한 현상이 발생한것인가요?
주기적으로 업데이트한다고 강의 소개에 크게 적어놓으셨는데, 왜 2023년 초 이후로 업데이트가 없나요? 그리고 새로운 버전 강의가 나왔던데, 이전 버전 수강자들에게는 무료로 제공되나요? 이 강의가 저렴한 것도 아니고 몇십만 원이나 하는데, 그 정도 보상은 해주셔야 한다고 생각합니다.
안녕하세요 현재 useReducer를 이용하여 투두리스트 업그레이드 부분중에 몇가지 질문이 있습니다. useReducer에 대해서 어느정도 이해는 했지만 dispatch는 어느 부분에 작성을 해야되는지 조금 헷갈리는데 이 강의에서는 onCreate 함수안에 dispatch를 작성했는데 이 함수에 dispatch를 사용한 이유가 조금 헷갈립니다. 그리고 useRudcer는 비슷한 기능을 하는 함수들을(업데이트, 삭제) 좀 더 간단하게 만들기 위해 사용한다라고 이해하고 있으면 되는지도 궁금합니다. 마지막으로 리덕스와 조금 비슷한것같은데 useReducer와 리덕스는 완전 다른 개념인건가요?
배포했는데 화면에 아무것도 안 뜨고 콘솔창에 아래와 같은 오류가 뜹니다. ▶ ReferenceError: require is not defined 검색해보니 vite가 require를 지원하지 않아서 라는데, 해결방법이 있을까요? (+) 구글링 했더니 package.json에 아래 코드를 추가하면 된다는데, 이 방법도 아닌 것 같아요. "type": "commonjs",
안녕하세요 어제에 이어 강의 내용을 따라 가고 있는데요. 강의 내용대로 PostModelViewSet을 선언하고 (영상기준 8분30초까지 진행) pytest를 실행앴더니 test_unauthenticated_user_cannot_create_post 에서 assert 403 == 400 test_non_author_cannot_update_post 에서 assert 403 == 200 test_nonauthor_cannot_delete_post 에서 assert 403 == 204 오류가 각기 발생합니다. 강의를 따라가고 있는데 이런식으로만 오류가 발생하니 원인이 어디인지 찾기가 너무 힘든거 같습니다. 원인이 뭐고 이런 오류를 잡으려면 어떻게 해야할까요?
안녕하세요! 제가 강의를 모두 수강하고 프로젝트에서 리액트 쿼리를 통해 SSR을 적용하려고 하고 있습니다. 아래 코드는 fetchAPISever 함수를 통해 백엔드 api로부터 데이터를 요청하는 함수입니다. 이때 fetchAPIsever 함수는 next/header 의 cookies() 를 통해 사용자의 토큰이 있으면 토큰을 넣어서 api를 요청하는 함수입니다. export const getBestAndPendingReviews = async (): Promise<ReviewePageResponse> => { const res = await fetchAPIServer('/api/review', 'GET'); if (res.code === 'SUCCESS') { return res.result; } throw new Error( `리뷰 페이지 데이터 불러오기 실패 ${res.code}-${res.message}`, ); }; 아래 코드는 리뷰 페이지에서 서버 사이드 렌더링으로 보여주기 위해 리액트 쿼리로 Hydration을 적용한 코드입니다. // src\app\reviews\page.tsx import { HydrationBoundary, QueryClient, dehydrate, } from '@tanstack/react-query'; import ReviewDashboard from './_components/ReviewDashboard'; import { getBestAndPendingReviews } from './_lib/getBestAndPendingReviews'; export default async function ReviewsPage() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['reviews', 'best'], queryFn: getBestAndPendingReviews, }); const dehydrateState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydrateState}> <ReviewDashboard /> </HydrationBoundary> ); } ' <ReviewDashboard/> 컴포넌트에서 UserInfo 컴포넌트를 반환하도록 설정하고 useQuery 훅을 사용하려 했으나, fetchAPIServer 함수에서 next/headers 를 import하고 있어서 클라이언트 컴포넌트에서 사용할 수 없다는 에러가 발생했습니다. 그러면 SSR을 적용하기 위해서는 getQueryData 를 사용해야하는 걸까요..? import { QueryClient } from '@tanstack/react-query'; import { ReviewePageResponse } from '../_lib/getBestAndPendingReviews'; export default function UserInfo() { const queryClient = new QueryClient(); const reviews = queryClient.getQueryData<ReviewePageResponse>([ 'reviews', 'best', ]); const { total } = reviews!; if (!reviews) return <p>리뷰가 없습니다.</p>; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; } 또는 useQuery를 쓰되 쿼리 함수를 Promise.Resolve()로 서버에서 전달 받은 데이터를 받는게 나은가 요? 'use client'; import { useQuery } from '@tanstack/react-query'; export default function UserInfo() { const { data: reviews, isLoading } = useQuery({ queryKey: ['reviews', 'best'], queryFn: () => Promise.resolve(), // 서버 데이터 재활용 }); if (isLoading) return <p>Loading...</p>; if (!reviews) return <p>리뷰가 없습니다.</p>; const { total } = reviews!; console.log('reviews', reviews); return <p>작성한 리뷰 {total || 0}</p>; }
투두리스트를 만들고 있는데 여기서 만약 삭제버튼 옆에 수정버튼을 추가하여 todo list에 입력한 content 내용을 수정할 수 있는 기능을 추가하려면 todolist 내용 요소를 div요소에서 input text 요소로 바꾸고 보이기는 input value사용하고, 수정은 OnChange 이벤트를 사용하면 될까요?
안녕하세요. 작성한 일기를 언제 작성했는지 필터링 하기 위한 getMonthlyDate 함수에 대해 질문이 있습니다. 강의 내용에서는 작성한 일기가 언제 작성했는지를 알기 위해서 beganTime, endTime을 두고 시간까지 비교를 하였는데요. 간단하게 getMonth()를 활용해서 작성한 일기를 해당하는 '월'로만 비교를 할 수는 없는 건지 궁금합니다!
데이터 캐시 설정을 force-cache 로 했을 때 이걸 갱신하기 위한 방법으로 revalidate 옵션을 주거나 revalidateTag, revalidatePath 등이 있다고 하셨는데요. 그러면 RequestMemoization에 의해서 캐싱된 데이터는 브라우저 새로고침 등을 하면 다시 fetch 하면서 갱신이 되는건가요? RequestMemoization 에 의해서 캐싱된 데이터는 언제 갱신되는지 궁금합니다. 그런데 제가 이해한 바로는 유저가 처음 브라우저를 통해 애플리케이션에 접근해서 해당 url 에서 요청을 보냈을 때 특정 데이터를 페칭하는 함수가 여러 컴포넌트에 있어서 그 데이터를 불러오기 위한 요청을 한 번만 함으로써 서버에 요청이 가는 것을 줄여주는것이 RequestMemoization 이라고 저는 이해를 했는데요. 어차피 처음에 같은 데이터를 보여주기 위해 여러 번의 요청을 하는 것은 불필요한 네트워크를 타게 되고 성능상에 좋지 않으니까요. 이런 경우라면 사실 RequestMemoization 은 캐싱된 데이터를 갱신할 필요가 없을 수도 있겠다는 생각이 듭니다. 그래서 제로초님이 별다른 언급이 없으셨나? 하는 생각도 드네요. 감사합니다.
