선생님 혹시 next-theme 사용 안 하시는 이유가 있을까요? 궁금합니다...!!

const Diary = () => { const params = useParams(); const nav = useNavigate(); const currentDiaryItem = useDiary(params.id); if (!currentDiaryItem) { return <div>데이터로딩중</div>; } const { createdDate, emotionId, content } = currentDiaryItem; const Edit = () => { const nav = useNavigate(); const { onDelete, onUpdate } = useContext(DiaryDispatchContext); const params = useParams(); const currentDiaryItem = useDiary(params.id);Diary컴포넌트와 Edit컴포넌트 둘 다 useDiary로부터 currentDiaryItem을 받아오고 있는데, Diary는 undefined일 때경우를 처리해주고 있는데, Edit컴포넌트는 그렇지 않습니다. useEffect(() => { if (initData) { // undefined일 때 setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } }, [initData]);위코드는 Editor컴포넌트 안의 코드입니다. 여기서 undefined룰 걸려주기 때문에 Edit컴포넌트에서 처리를 안해도 되는 건가용?

import { useContext, useState, useEffect } from "react"; import { DiaryStateContext } from "../App"; import { useNavigate } from "react-router-dom"; const useDiary = (id) => { const data = useContext(DiaryStateContext); const [currentDiaryItem, setCurrentDiaryitem] = useState(); const nav = useNavigate(); useEffect(() => { const currentDiaryItem = data.find( (item) => String(item.id) === String(id) ); if (!currentDiaryItem) { window.alert("존재하지 않는 일기입니다."); nav("/", { replace: true }); } setCurrentDiaryitem(currentDiaryItem); }, [id, data]); //data는 왜쓰는지? return currentDiaryItem; }; export default useDiary; 강의 내용코드입니다. 현재의 일기를 가져오는 커스텀훅입니다.여기서 문제는 "존재하지 않는 일기입니다"라는 경고창이 2번뜹니다. http://localhost:5173/diary/1234 처럼 아무숫자나 입력했을 때 그리고 http://localhost:5173/ 으로 이동한 후에 경고창이 한번 더 뜹니다. useEffect가 id가 변함에 따라 계속 실행되어서라는 이유로 알고 있습니다. 그러면 왜 선생님코드에서는 경고창이 2번 뜨지 않았을까용?그리고 의존성 배열에 [id, data] 2가지를 담는 이유가 궁금합니다. 현재 prams.id가 바뀔 때만 작동하게 해도 되지 않을까요? 사용자가 data를 수정하면서 페이지의 파라미터가 바뀌는 상황이 동시에 일어나지 않을 거 같아서요

does not provide an export named 'userReducer'라는 에러가 뜹니다.맞게 작성한거 같은데...설정을 잘못했을까요?

안녕하세요 어느 날 갑자기 로그인 페이지가 무한 새로고침 현상이 발생 됩니다 백엔드 쪽에는 로그 /api/users 304로 새로고침마다 계속 응답해줘서 문제가 없는 것 같고 프런트쪽 문제인 것 같은데 개발자 도구를 볼 수 없을정도로 계속 새로고침 되서 당황스럽네요 ㅠㅠ 그래서 제로초님 깃허브 front/App/index.tsx, front/LogIn/index.tsx 코드 전체 붙여넣어도 동일 현상이 발생됩니다... 무언가 라이브러리 충돌이 있나 싶은데 package.json 코드입니다{ "name": "artus-sleact-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "ethan", "license": "MIT", "dependencies": { "@emotion/babel-plugin": "^11.11.0", "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", "@loadable/component": "^5.16.4", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15", "autosize": "^6.0.1", "axios": "^1.7.2", "cross-env": "^7.0.3", "css-loader": "^7.1.2", "dayjs": "^1.11.12", "gravatar": "^1.8.2", "react": "^17.0.2", "react-custom-scrollbars": "^4.2.1", "react-dom": "^17.0.2", "react-mentions": "^4.4.10", "react-refresh": "^0.14.2", "react-router": "^5.3.4", "react-router-dom": "^5.3.4", "react-toastify": "^7.0.4", "regexify-string": "^1.0.19", "socket.io-client": "^4.7.5", "style-loader": "^4.0.0", "swr": "^2.2.5", "ts-node": "^10.9.2", "typescript": "^5.5.3", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4" }, "devDependencies": { "@babel/core": "^7.24.7", "@babel/preset-env": "^7.24.7", "@babel/preset-react": "^7.24.7", "@babel/preset-typescript": "^7.24.7", "@types/autosize": "^4.0.3", "@types/loadable__component": "^5.13.9", "@types/node": "^20.14.9", "@types/react-custom-scrollbars": "^4.0.13", "@types/react-mentions": "^4.1.13", "@types/react-router": "^5.1.20", "@types/react-router-dom": "^5.3.3", "@types/socket.io-client": "^1.4.35", "@types/webpack": "^5.28.5", "@types/webpack-bundle-analyzer": "^4.7.0", "@types/webpack-dev-server": "^4.7.2", "@types/gravatar": "^1.8.6", "@types/react": "^17.0.80", "@types/react-dom": "^17.0.25", "babel-loader": "^9.1.3", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.9.0", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react": "^7.34.4", "fork-ts-checker-webpack-plugin": "^9.0.2", "prettier": "^3.3.2", "webpack": "^5.92.1", "webpack-dev-server": "^4.15.2" } }

const Editor = ({ onSubmit, initData }) => { const nav = useNavigate(); const [input, setInput] = useState({ createdDate: new Date(), // 여기서 그냥 getTime하면 안되나요? emotionId: 8, content: "", }); useEffect(() => { if (initData) { setInput({ ...initData, createdDate: new Date(Number(initData.createdDate)), }); } input의 createdDate와 initData의 createdDate 비교 기준이 new Date()과 new Date().getTime() 로 달라서 useEffect안에서 createdDate: new Date(Number(initData.createdDate)), 이렇게 한다는 건 이해가 갑니다. 다만 처음부터 input의 createdDate를 new Date().getTime()으로 만들면 되지 않을까요?

안녕하세요 6장 상품 등록을 이미지 없이 등록을 해봤는데요 예를 들어 상품번호가 17번이면product_image_list 테이블에 17번(product_pno)이등록되지 않아서  left join이 걸리지 않아 리스트를 호출시 해당 번호의 상품만 호출이 안되더라구요이럴 경우에는 어떠한 방법으로 해결할 수 있을지 궁금하여 질문드립니다.  

보일러플레이트 코드 수업 자료 관련해서 다운받았는데 빈폴더라고 저번 질문에 문의드렸는데 사용중인 os만 물어보시고 답변이 없으셔서 다시 질문드려요 사용중인 os는 윈도우입니다.

안녕하세요. 한가지 문의 드립니다.부록_AWS 빈즈톡, RDS, S3 자료.pdf 를 보고 있습니다.7 (/ 45) 페이지에서 보면 정상적으로 환경 구성이 완료되면 configurations 결과 화면이 잘 출력됩니다.헌데 일부 계정 아마도 최근에 생성한 aws 계정은 이게 정상적으로 진행이 안되고 아래와 같은 메시지가 나옵니다.Creating Auto Scaling launch configuration failed Reason: Resource handler returned message: "The Launch Configuration creation operation is not available in your account. Use launch templates to create configuration templates for your Auto Scaling groups. (Service: AutoScaling, Status Code: 400, Request ID: 850290f7-96b3-4229-81dc-966dbee4d735)" (RequestToken: 44311bf6-616a-3270-9235-5c2d1993a1b7, HandlerErrorCode: GeneralServiceException) AWS EC2 Launch Template을 반드시 생성해야 7 (/ 45) 페이지에서 보이는 환경 구성이 정상적으로 완료가 되고 그 결과 configurations 화면이 잘 출력되는 것으로 최근 변경 된 것 같습니다.문제는 이 AWS EC2 Launch Template 생성에 대한 부분에서 벽에 막힌 상태입니다.어떻게 하면 좋은지 요청 드려 봅니다.감사합니다.    

패키지 매니저를 pnpm으로 사용하고 pnpm i 후 pnpm run build && pnpm run start 시 validator 모듈이 없다고 나와서 rm -rf node_modules pnpm-lock.yaml 후 npm으로 모듈들 설치 및 빌드, 서버 실행이 됩니다. npm이 유령 의존성 이슈가 있다고 들어서 pnpm 또는 yarn을 이용하려 한 건데, 오히려 npm을 사용해야만 문제없이 돌아가는 상황에 대해, 이게 어떤 상황인지 알 수 있을까요?

<input value={getStringedDate(input.createdDate)} name="createdDate" onChange={onChange} type="date" className="bg-[rgb(236,236,236)] font-xl rounded-md px-[20px] py-[10px]" /> 새로운 일기를 만들때 날짜 input에서 value속성을 'getStringedDate(input.createdDate)'이렇게 설정하고 있는데요 저는 value속성을 넣지 않고도 작동을 합니다. value속성 꼭 적어야 할까요? 단순히 초기값을 설정하기 위함일까요? 아니라면 value속성을 적는 것이 권장되는 이유는 뭘까용?  

안녕하세요!저는 fetch를 사용하지않고 axios를 사용해봤는데요!서버에서 prefetch한 데이터가 초기에 useQuery에 값이 없는 이슈가 있어서 디깅을 해보다가 ReactQueryProvider에서 선언한 queryClient와 Home.tsx에서 선언한 queryClient가 달라 캐시한 값을 가져오지 못한다고 생각하는데 혹시 맞을까요? "use client"; import { useState } from "react"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import { isProduction } from "@/app-src/shared/env"; export const ReactQueryProvider = ({ children }: React.PropsWithChildren) => { const [queryClient] = useState( () => new QueryClient({ defaultOptions: { queries: { staleTime: Infinity, gcTime: Infinity, }, }, }) ); return ( <QueryClientProvider client={queryClient}> {children} {!isProduction && <ReactQueryDevtools initialIsOpen={false} />} </QueryClientProvider> ); }; import { PostIndex } from "@/app-src/post/[slug]"; import { API_PATH } from "@/app-src/shared/apis"; import { getPost } from "@/app-src/shared/apis/post/get-post"; import { dehydrate, HydrationBoundary, QueryClient, } from "@tanstack/react-query"; const PostPage = async ({ params }: { params: { slug: string } }) => { const { slug } = params; const queryClient = new QueryClient(); // 서버에서 미리 데이터를 패칭 await queryClient.prefetchQuery({ queryKey: [API_PATH.POST(slug)], queryFn: () => getPost(slug), }); const a = queryClient.getQueryData([API_PATH.POST(slug)]); console.log(a, "a"); // 데이터 직렬화 const dehydratedState = dehydrate(queryClient); return ( <HydrationBoundary state={dehydratedState}> <PostIndex /> </HydrationBoundary> ); }; export default PostPage;"use client"; import { API_PATH } from "@/app-src/shared/apis"; import { getPost } from "@/app-src/shared/apis/post/get-post"; import { useQuery } from "@tanstack/react-query"; import { useParams } from "next/navigation"; export const PostIndex = () => { const { slug } = useParams<{ slug: string }>(); const { data } = useQuery({ queryKey: [API_PATH.POST(slug)], queryFn: () => getPost(slug), }); // 초기에 없음 -> 패칭 -> 있음 console.log(data, "data"); return ( <div> <div>{data?.title}</div> </div> ); };만약 제가 생각한게 맞다면 어떻게 해결해야할까요?

강의 12.3 보다가 의문이 들어서 질문 남깁니다.강의에서 설명하고 사용하셨던 방법과 공식문서에서 BrowserRouter를 사용하는 방법이 달라서 헷갈립니다.두가지 방법이 같은 것인지, 다르다면 어떻게 다른지 알려주세요function App() { return ( <BrowserRouter basename="/app"> <Routes> <Route path="/" /> </Routes> </BrowserRouter> ); }=>공식문서에서는 이렇게 Routes를 BrowserRouter로 감싸서 사용했는데 강의 에서는 그러지 않아서 궁금합니다.!

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요. Nextjs 개념을 다시 공부를 하고 있는데 헷갈리는 부분이 있어서 글을 작성하게 되었습니다.우선 App Router 강의에서 이해 한 내용으로는 초기접속시 서버컴포넌트들은 사전랜더링 작업시 실행이 되면서 HTML로 만들어져서 브라우저로 보내지고 이후에 JSBundle 있다면 JSBundle이 내려가져서 하이드레이션이 이루어진다라고 알고 있습니다. 공식문서 Full Page Reload Client영역 2번 문장이 내용 입니다.https://nextjs.org/docs/app/building-your-application/rendering/client-components#full-page-loadFull page loadThen, on the client:The React Server Components Payload is used to reconcile the Client and Server Component trees, and update the DOM.그런데 해당내용으로 보면 RSC Payload는 클라이언트와 서버컴포넌트 트리를 재조정하는데 사용되어진다라고 하는거 같은데 RSC Payload값도 FullPage리로드시에 내려오는걸까요? 그리고 저기서 말하는 서버컴포넌트 트리라고 말하면 초기에 내려주는 사전랜더링 HTML을 말하는지 궁금합니다. 감감사합니다.

const getMonthlyData = (pivotDate, data) => { //컴포넌트 밖에서 함수를 만드는 이유? const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth() + 1, 0, 0, 0, 0 ).getTime(); return data.filter( (item) => beginTime <= item.createdDate && item.createdDate <= endTime ); };endtime을 0일 23시 59분 59초가 아닌 0일 0시 0분 0초로 설정해도 될까요? 월에서 +1을 했으니 마지막 일도 포함될 거 같아서요!

제목과 같습니다!SSG와 SSR을 동시에 사용할 수 없을 뿐더러요새는 하나의 페이지에 정적인 데이터만 존재하는 페이지는 거의 없다고 생각하거든요 떄문에 과연 프리패칭은 하고 싶지만 정적인 데이터가 너무 커서 SSG를 선택하는 경우의 수가 얼마나 있을까?? 하는 추측이 드는데요.저의 이런 추측이 충분히 가능성 있는 의문인지 궁금합니다!

15:04에 .Editor .emotion_section .emotion_list_wrapper에서 justify-content: space-around;해도 아래 사진과 같이 요소를 화면 중심으로 배치할 수 없어서요. 어떻게 해야하는 건지 답변 부탁드립니다. 

맨 처음 리액트 코드스플리팅 에서 막히는데요,,,ㅠㅠ강의 내용이랑 똑같이 했는데 막히는데 한번봐주실수있으실까요??그리고 코드를 작성하고 리액트화면을 그냥 새로고침하면 코드가적용이되는게 맞죠? 제가하면 지금 mainPage div만 나오고 나머지는 나오지않아서요  import { Suspense, lazy } from "react"; import { createBrowserRouter } from "react-router-dom"; // require 대신 import로 수정 const Loading = <div>Loading...</div>; const Main = lazy(() => import("../pages/mainPage")); // lazy 게으르다 -> 코드 스플리팅 const About = lazy(() => import("../pages/about")); // lazy 게으르다 -> 코드 스플리팅 const root = createBrowserRouter([ { path: '', element: <Suspense fallback={Loading}><Main /></Suspense> }, { path: 'about', element: <Suspense fallback={Loading}><About /></Suspense> } ]); export default root;  import React from 'react' import { Link } from 'react-router-dom' const mainPage = () => { return ( <div className = 'text-3xl'> <div className={'flex'}> <Link to ={'/about'}>About</Link> </div> <div>mainPage</div> </div> ) } export default mainPage import React from 'react' import { Link } from 'react-router-dom' const about = () => { return ( <div className={'text-3xl'}> <div className={'flex'}> <Link to ={'/about'}>About</Link> </div> <div>About page</div> </div> ) } export default about     import React from 'react' import { RouterProvider } from 'react-router-dom' import root from './router/root' const App = () => { return ( <RouterProvider router={root} /> ) } export default App  

import Header from '../components/Header'; import Button from '../components/Button'; import Editor from '../components/Editor'; import { useNavigate } from 'react-router-dom'; import { useContext } from 'react'; import { DiaryDispatchContext } from '../App'; const New = () => { const nav = useNavigate(); const { onCreate } = useContext(DiaryDispatchContext); const onSubmit = (input) => { onCreate(input.createdDate.getTime(), input.emotionId, input.content); nav('/', { replace: true }); }; return ( <div> <Header title={'새 일기 쓰기'} leftChild={ <Button text={'< 뒤로 가기'} onClick={() => { nav(-1); }} /> } /> <Editor onSubmit={onSubmit} /> </div> ); }; export default New; 여기서 nav('/', {replace:true});로 뒤로가기(New 페이지로 가는 것)를 방지했는데,뒤로가기를 한 번 눌렀을 때는 잘 동작하는데두 번 눌렀을 때부터 뒤로 가집니다.  혹시 원래 이런건가요? 아니면 제가 뭔가 잘못한건가요?   

보일러플레이트 코드 소개에 있는 수업자료를 다운받았는데 압축해제하려고 보니까 해제도 안되고 압축폴더에는 파일이 아무것도 없네요