선생님 서버부분 /list axios 부분 /setupProxy부분 까지 서버도 틀어놨구요 정말 똑같이 따라했는데 404에러가 떠요 ㅜㅜ 선생님 강의 정말뒤로가서 다시 쳐보고 똑같이 헀거든요. 왜이럴까요ㅜㅜ 

강의에서는 해시태그 검색결과가 없는 경우404로 처리하는 방향으로 가고 있습니다궁금하여 다른 곳에서는 어떻게 하나 확인해보았습니다아마존의 경우 200 OK처리하여주는데검색 결과가 있고 없고에 대한 응답처리는 api 작성자에 따라 다르게 처리가 가능한 영역인가요?

import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Board from "./common/Board"; import Login from "./component/Login"; import { useEffect } from "react"; function App() { useEffect(() => console.log("app is loading"), []); return ( <BrowserRouter> <Routes> <Route path="/login" element={<Login />}></Route> <Route path="/board/:boardId/page/:page" element={<Board />}></Route> <Route path="/board/:boardId/new" element={<Board />}></Route> <Route path="/board/:boardId/post/:postId" element={<Board />}></Route> <Route path="/board/:boardId/post/:postId/edit" element={<Board />} ></Route> </Routes> </BrowserRouter> ); } export default App;  import React, { useEffect, useState, useContext } from "react"; import { useNavigate, useParams } from "react-router-dom"; // useParams를 import import BoardList from "../component/BoardList"; import BoardEdit from "../component/BoardEdit"; import BoardView from "../component/BoardView"; import Layout from "../layout/Layout"; import axios from "axios"; import { TokenProcess } from "../common/TokenProcess"; export const BbsSettingContext = React.createContext(); const Board = () => { const { boardId, postId, page } = useParams(); // const [currentUrl, setCurrentUrl] = useState(null); const [boardSettData, setBoardSettData] = useState(null); const navigate = useNavigate(); useEffect(() => { console.log("board:::::::::::::::::"); const fetchData = async () => { const access_token = localStorage.getItem("Authorization"); try { const response = await axios.get( `http://localhost:8080/api/board/${boardId}`, { headers: { Authorization: `Bearer ${access_token}`, }, } ); setBoardSettData(response.data.returnData.board); let mode = ""; if ( window.location.pathname.split("/")[3] == "page" && window.location.pathname.split("/")[5] == null ) { mode = "page"; } else if ( window.location.pathname.split("/")[3] == "post" && window.location.pathname.split("/")[5] == null ) { mode = "view"; } else if (window.location.pathname.split("/")[5] == "new") { mode = "new"; } else if (window.location.pathname.split("/")[5] == "edit") { mode = "edit"; } else { mode = ""; } setCurrentUrl(mode); console.log("모드" + mode); } catch (error) { console.log(error); if ( error.response.status == 401 && error.response.data.data == "EXPIRE_TOKEN" ) { (await TokenProcess()) ? fetchData() : navigate("/login"); } else { console.log(error); return false; } } }; fetchData(); }, [window.location.pathname]); return ( <BbsSettingContext.Provider value={boardSettData}> {currentUrl == "page" ? ( <Layout> <BoardList boardId={boardId} page={page} /> </Layout> ) : currentUrl == "new" ? ( <Layout> <BoardEdit /> </Layout> ) : currentUrl == "edit" ? ( <Layout> <BoardEdit boardId={boardId} postId={postId} /> </Layout> ) : currentUrl == "view" ? ( <Layout> <BoardView boardId={boardId} postId={postId} /> </Layout> ) : null} </BbsSettingContext.Provider> ); }; export default Board; 아래는 상세 보기입니다.import React, { useState, useEffect, useContext, useRef } from "react"; import { useNavigate } from "react-router-dom"; import axios from "axios"; import { BbsSettingContext } from "../common/Board"; import ToastEditor from "../component/ToastEditor"; import MyButton from "../common/ComButton"; import { TokenProcess } from "../common/TokenProcess"; const BoardView = ({ postId }) => { const titleInputRef = useRef(); const contentsAreaRef = useRef(); const toastEditorRef = useRef(); // ToastEditor의 ref const navigate = useNavigate(); const [post, setPost] = useState({ postId: "", postTitle: "", postContent: "", regDate: "", }); const [boardSetting, setBoardSetting] = useState(null); const boardSetData = useContext(BbsSettingContext); const Navigate = useNavigate(); const formatDate = (timestamp) => { const date = new Date(timestamp); const options = { year: "numeric", month: "long", day: "numeric" }; return date.toLocaleDateString("ko-KR", options); }; useEffect(() => { console.log("view>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"); if (boardSetData) { setBoardSetting(boardSetData); const access_token = localStorage.getItem("Authorization"); const fetchData = async () => { try { const response = await axios.get( `http://localhost:8080/api/board/${boardSetData.boardId}/post/${postId}`, { headers: { Authorization: `Bearer ${access_token}`, }, } ); console.log(response.data.returnData); setPost({ postId: response.data.returnData.postId, postTitle: response.data.returnData.postTitle, postContent: response.data.returnData.postContent, regDate: response.data.returnData.regDate, }); } catch (error) { console.log(error); if ( error.response.status == 401 && error.response.data.data == "EXPIRE_TOKEN" ) { (await TokenProcess()) ? fetchData() : navigate("/login"); } else { console.log(error); return false; } } }; fetchData(); } }, [boardSetData, postId]); const editBoard = async () => { navigate(`/board/${boardSetting.boardId}/post/${postId}/edit`); }; return ( <div className="BoardView"> <div className="upInfoArea"> <div type="text" name="boardTitle" className="titleDiv"> {post.postTitle} </div> <div type="text" name="regId" className="regIdDIv"> {formatDate(post.regDate)} </div> </div> <div className="contentArea"> <div className="contentsText">{post.postContent}</div> </div> <section> <div className="btnArea"> <MyButton text={"리스트이동"} onClick={() => Navigate(-1)} /> <MyButton text={"수정하기"} type="positive" onClick={editBoard} /> </div> </section> </div> ); }; export default BoardView;  리스트이동이라는 버튼을 누르면 바로 이동을 하는데브라우저에서 <- 뒤로가기 버튼을 누르면 갑자기 BoardView의 useEffect를 타는데 이유를 모르겠습니다 .어떻게 해야될까요. .. 

다음과 같은 양식으로 남겨주세요.질문을 한 배경 : 성능 강의 관련 질의질문내용 : 성능관련한 궁금증에 본 강의를 결재했는데 강의 내용에 존재하지 않네요..언제쯤 업로드 될까요?

해당 강의에서 예로 들어주신 부분 코드를 가져와 보면async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); console.log(jsonResponse); } getData();위 코드를 예로 들어 주셨는데요 여기서 질문이 있는데async 내부에서 await은 비동기를 동기적으로 실행하게 하는 거라고 해주셨는데요그러면 위 코드에서 async await 자체를 쓸 필요가 없는거 아닌가 하는 궁금증이 들었는데요혹시 말씀해주신 '비동기를 동기적으로 실행하게 한다' 라는게 해당 함수 내부에서만을 말씀해주신 걸까요??제가 이해한게 맞나 확인 부탁드립니다.코드를 실행 하면 차례대로 한줄씩 실행된다.getDate함수를 호출하는 코드가 실행되면 코드의 실행 순서는 getDate함수로 이동한다.getDate함수 내부의 await을 만나면 거기서 getDate함수의 실행은 멈춘다.getDate함수의 await 작업이 끝날 때까지 getDate함수는 실행을 멈추고 실행은 다시 전체 코드에서 getDate함수를 호출한 부분 이후의 코드가 실행된다.await 작업이 끝나면 실행은 다시 getDate함수 내부의 await 이후 코드가 실행되고 getDate 함수의 실행이 끝나면 다시 실행은 이전까지 실행했던 부분이후로 넘어간다라고 이해 했는데요... 이게 맞을까요??아! 그리고 비동기 함수가 넘어가는 부분도 자바스크립트 처럼 싱글쓰레드라 비동기 함수들을 하나씩 처리하나요?? 아니면 비동기 작업을 처리하는 부분은 멀티쓰레드 형식이라 동시에 비동기작업을 처리하는것이 가능한가요??

(안녕하세요. 제로초님 매번 질문드릴때마다 빠르게 답변해주셔서 정말 감사 드립니다.) 지금 useInfiniteQuery를 통해 게시물의 정보들을 한번에 모두 받아오는 것이 아닌 5개씩 나눠서 받아오도록 구현을 마쳤습니다. 그리고 여기에 한번더 최적화를 진행하기 위해 lazy loading image 기법을 도입하려고 하는데요 도입이유는 사용자가 처음 받아오는 이미지를 모두 다 볼 수 있는 형태가 아니기 때문입니다. 일반적인 모니터라면 사용자는 1개의 게시물 밖에 보지 못합니다. 그래서 이러한 점에서 나머지 4개에는 resize(50*50)정도로 사진 크기를 줄여서 전송하고 사용자가 스크롤을 하여 화면을 내리면 intersection observer를 통해 사용자가 볼수 있는 정도의 resizing된 이미지를 요청하여 화면에 렌더하려고 합니다.그러기 위해서는 thumb파일 이외에 50* 50 사이즈의 이미지를 저장하는 파일을 한개 더 만들려고 하는데 여기서 막혔습니다.궁금한게 aws-lambda를 한개 더 만들어야 하나요?아니면 resizing해주는 lambda한개에서 2종류의 resizing처리가 가능한가요?return 부분의 callback 함수에 파라미터를 어떻게 넣어야 하는지 잘 모르겠습니다..그리고 제가 하려는 최적화 방식이 효과 있는 방식이 맞는건가요?혹시 제거 간과 하고 있는 부분은 없는지 궁금합니다..답변해주시면 감사하겠습니다.

따라하며-배우는-노드-리액트-쇼핑몰 > 쇼핑 카트 페이지 데이터 가져오기 강의를 수강중에 있습니다.17:30 부근에 제품을 배열로 다시 재정리 해주는 걸 설명해주고 계시는데 split 후에 map을 하는 이유가 궁금합니다.값을 map 처리하기 전후로 찍어보니 값이 동일하게 나오는데 map 처리를 해주는 이유가 따로 있나 싶어서 여쭤봅니다.

안녕하세요. 온라인강의 수강하는 학생입니다. 주중엔 짬짬이 강의만, 코딩학습은 주말만.. 학습 진도가 늦지만.장기간 걸쳐. 열심히 해 보겠습니다.ㅎ 회원가입 과제 아래와 같이 해 보았습니다.(1) vector 부분을 어떻게 적용해야 하나요? figma에서 제공하는 svg소스를 복사,붙여 넣기만 했는데...(2) ellipse 부분을 어떻게 적용해야 하나요? checkbox나 radio 부분에 svg 소스 활용방법이 궁금합니다.(3) 과제에 대한 멘토님의 소스를 보고싶은데 , 제가 못 찾는 것인지 멘토님 소스 보는 방법을 가르쳐 주셨으면 합니다.멘토님의 의견 감사합니다.

안녕하세요! 항상 좋은 강의 만들어주셔서 감사합니다ㅎㅎㅎ 이번에 새로 업데이트 된 강의를 들으면서 redux 강의 부분을 듣고 있다 이전 john ahn님의 로그인 강의 예제에서 질문이 생겼습니다.john ahn님의 로그인 강의에서export function loginUser(dataToSubmit) { const request = axios.post('/api/users/login', dataToSubmit) .then(response => response.data) return { type: LOGIN_USER, payload: request } } 이런식으로 로그인을 한 적이 있습니다! 이 때는 이 방법이 redux-thunk를 사용한 방법인 줄 알았는데, 강의를 들어보니 이것은 redux-thunk를 이용하지 않은 방법이라는 것을 알게되었습니다. 근데, axios를 사용해서 비동기로 처리했는데도 제 기억에 login 강의는 잘 동작했었습니다.왜 잘 동작했는지 chat GPT를 통해 질문하니 답변으로 이것은 잘 동작하지 않는 코드이고 "이 코드에서 axios.post는 비동기 함수이고, .then(response => response.data)를 통해 HTTP 요청의 결과를 처리하고 있습니다. request 변수는 이제 비동기 요청이 성공적으로 완료되었을 때 응답 데이터를 갖게 됩니다. 그러나 여전히 request는 프로미스입니다. 프로미스는 비동기 작업이 완료될 때까지 "미래의 값"을 나타내는 객체입니다." 이런 답변을 해주었습니다. 제가 생각해도 이것이 맞는 말 같은데 redux-thunk를 사용하지 않아도 왜 잘 동작한걸까요?? 굳이 redux-thunk를 사용하지 않아도 돼는 건가요?? 아니면 이번이 특별한 경우인가요?? 

git init 후에 .gitignore 파일을 작성해서 git rm --cached node_modules 명령어를 입력했는데fatal: pathspec 'node_modules' did not match any files이런 오류가 뜹니다!

안녕하세요! React로 NodeBird SNS 만들기섹션4 팔로우/언팔로우 강의를 끝까지 수강한 수강생입니다!항상 강의 잘 보고 있습니다! 제로초님 감사합니다! 김블루 계정으로 핑크공주 계정을 팔로우 했을 때팔로잉, 팔로워 사용자의 이름과 금지 표시 아이콘이 목록 화면에 보이지 않습니다!(아이콘이 들어가는 위치에 다른 아이콘을 넣었을 때도 아이콘이 표시되지 않았습니다!)리덕스와 네트워크 탭을 확인했을 때 팔로워, 팔로잉 목록 불러오기는 성공했습니다.vsCode 터미널, 콘솔, 리덕스, 네트워크 항목에도 에러가 없으며앤트 디자인 아이콘 버전도 아이콘에 맞게 수정하고, item도 추가했지만 해결되지 않았습니다!구글 검색 및 제로초님 강의와 트위터 클론 깃허브를 확인 후에도 원인을 알 수 없어 질문 글 올립니다! [김블루 계정의 팔로잉 목록][핑크공주 계정의 팔로워 목록]FollowList.js// Ant Design 아이콘 불러오기 import { StopOutlined } from '@ant-design/icons'; ... return ( <List style={{ marginBottom: '20px' }} /* 격자 모양 */ grid={{ gutter: 4, xs: 2, md: 3 }} /* 목록 크기 */ size="small" /* 팔로잉 목록, 팔로워 목록 헤더 */ header={<div>{header}</div>} /* 더보기 버튼 */ loadMore={ <div style={{ textAlign: 'center', margin: '10px 0px' }}> <Button>더 보기</Button> </div> } /* 팔로잉 목록, 팔로워 목록 전체 테두리 */ bordered /* 목록용 데이터소스 : 팔로잉 목록, 팔로워 목록 더미데이터 배열 전달 */ dataSource={data} renderItem={(item) => { <List.Item style={{ marginTop: '20px' }}> <Card actions={[<StopOutlined key="stop" onClick={onCancel(item.id)} />]}> <Card.Meta description={item.nickname} /> </Card> </List.Item> }} />/* List 닫음 */ ); };

사진 파일 이름이 띄어쓰기가 없는 영어가 아닌 경우 무조건 Key를 찾을 수 없다는 오류가 발생합니다.그런데 왜 도무지 이런 에러가 발생하는지 이해가 되지 않습니다.s3 original폴더에 잘 저장되어있고 그냥 똑같은 key를 찾으면 되는거 아닌가요?... 왜 영어로 안쓰면 key를 못찾는건지 잘 모르겠습니다..그리고 저번에 띄어쓰기도 식별하기 위해 +를 스페이스로 replace하는 코드를 추가하면 됩니다. 라고 말씀해주셨는데 aws-upload의 index.js 코드에는 그냥 온전히 s3에 저장되어있는 key값을 받아오고 그 키값에서 파일 이름이나 확장자를 추출하는 코드밖에 존재하지 않는데 어디에 + 스페이스로 replace하는 코드를 추가하면 되는지 잘 이해가 되지 않습니다... 답변해주시면 정말 감사하겠습니다..ㅠㅠ

궁금한점이 생겨 질문합니다. aws lambda로 resizing된 이미지를 사용자에게 보여주면 당연히 화질이 좋지 않은 이미지를 제공할 수 밖에 없는데 이건 어쩔 수 없는건가요? 그럼 구글이나 핀터레스트같은 이미지를 많이 활용하는 웹들은 당연히 이미지 용량 크기를 줄이는 작업을 거칠것인데 이 웹들은 어떻게 사용자에게 좋은 이미지를 보여줄 수 있는건가요?

{ "errorType": "NoSuchKey", "errorMessage": "The specified key does not exist.", "name": "NoSuchKey", "$fault": "client", "$metadata": { "httpStatusCode": 404, "requestId": "YMG06ZYH60K2201P", "extendedRequestId": "3P/v2TuxF22TpEWbU9iXPei37RoBJHIeVTI/mSC9NV7bY2r4BnC2iyJpCcJnmD3gUEaa9WdsNCw=", "attempts": 1, "totalRetryDelay": 0 }, "Code": "NoSuchKey", "Key": "original/1703707251649_studying+economics+student+aesthetic+bib+uni+college+statistics+math+macbook+apple+ipad+pro+jgu+mainz.jpeg", "RequestId": "YMG06ZYH60K2201P", "HostId": "3P/v2TuxF22TpEWbU9iXPei37RoBJHIeVTI/mSC9NV7bY2r4BnC2iyJpCcJnmD3gUEaa9WdsNCw=", "message": "The specified key does not exist.", "stack": [ "NoSuchKey: The specified key does not exist.", " at de_NoSuchKeyRes (/var/task/node_modules/@aws-sdk/client-s3/dist-cjs/protocols/Aws_restXml.js:5196:23)", " at de_GetObjectCommandError (/var/task/node_modules/@aws-sdk/client-s3/dist-cjs/protocols/Aws_restXml.js:3440:25)", " at process.processTicksAndRejections (node:internal/process/task_queues:95:5)", " at async /var/task/node_modules/@smithy/middleware-serde/dist-cjs/deserializerMiddleware.js:7:24", " at async /var/task/node_modules/@aws-sdk/middleware-signing/dist-cjs/awsAuthMiddleware.js:30:20", " at async /var/task/node_modules/@smithy/middleware-retry/dist-cjs/retryMiddleware.js:31:46", " at async /var/task/node_modules/@aws-sdk/middleware-flexible-checksums/dist-cjs/flexibleChecksumsMiddleware.js:63:20", " at async /var/task/node_modules/@aws-sdk/middleware-sdk-s3/dist-cjs/region-redirect-endpoint-middleware.js:14:24", " at async /var/task/node_modules/@aws-sdk/middleware-sdk-s3/dist-cjs/region-redirect-middleware.js:9:20", " at async /var/task/node_modules/@aws-sdk/middleware-logger/dist-cjs/loggerMiddleware.js:7:26" ] }이렇게 NoSuckKey라고 뜨는데 이건 혹시 s3 access key가 틀렸다는 소리인가요?

툴킷으로 작업을 해보려고 하고 있는데 faker를 써보려다가 제로초님 깃허브에 HYDRATE에 관련된 사항이 있어서 작업을 하려고 하고 잇엇는데 제로초님처럼 똑같이 타이핑을 햇는데 에러가 납니다.const postReducer = createSlice({ name: "postReducer", initialState, reducers: {}, // 청크를 쓸때 필요함 extraReducers: (builder) => builder // 클라이언트 상태를 초기화하는 역할 .addCase(HYDRATE, (state, action) => ({ ...state, ...action.payload.data, })), }); 여기서 에러가 나는 부분은...action.payload.data, 중 payload부분이고 에러 사항은 다음과 같이 나옵니다. 'Action<"__NEXT_REDUX_WRAPPER_HYDRATE__">' 형식에 'payload' 속성이 없습니다.next-redux-wrapper 의 버전은 아래와 같습니다. 혹시 "next-redux-wrapper": "^8.1.0",혹시 next-redux-wrapper로 리덕스 툴킷에 HYDRATE를 하는 방법이 달라진걸까요....

이번에 페이지 구현-일기 쓰기 (/new) 를 듣고 따라 적어보는 중에 잘 해결되지 않는 부분이 있어서 질문을 올립니다! 다른 기능은 정상적으로 작동하고 다른 컴포넌트에서도 img파일을 정확히 불러오는데 DiaryEditor.js 에서만 emotinItem으로 emotion_img를 전달하는데 이미지가 뜨지 않고 오류가 발생합니다  이런식으로 onClick is not a function 이라고 나오고 DiaryEditor에도const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || "";를 추가해봤지만 해결되지 않았습니다 어떻게 해야될까요?import { useRef, useState, useContext } from "react"; import { useNavigate } from "react-router-dom"; import MyHeader from "./MyHeader"; import MyButton from "./MyButton"; import EmotionItem from "./EmotionItem"; import { DiaryDispatchContext } from ".././App"; const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || ""; const emotionList = [ { emotion_id: 1, emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`, emotion_descript: "완전 좋음", }, { emotion_id: 2, emotion_img: process.env.PUBLIC_URL + `/assets/emotion2.png`, emotion_descript: "좀 좋음", }, { emotion_id: 3, emotion_img: process.env.PUBLIC_URL + `/assets/emotion3.png`, emotion_descript: "그럭저럭", }, { emotion_id: 4, emotion_img: process.env.PUBLIC_URL + `/assets/emotion4.png`, emotion_descript: "별로임", }, { emotion_id: 5, emotion_img: process.env.PUBLIC_URL + `/assets/emotion5.png`, emotion_descript: "최악임", }, ]; const getStringDate = (date) => { return date.toISOString().slice(0, 10); }; const DiaryEditor = () => { const contentRef = useRef(); const [content, setContent] = useState(""); const [emotion, setEmotion] = useState(3); const [date, setDate] = useState(getStringDate(new Date())); const { onCreate } = useContext(DiaryDispatchContext); const handleClickEmote = (emotion) => { setEmotion(emotion); }; const navigate = useNavigate(); const handleSubmit = () => { if (content.length < 1) { contentRef.current.focus(); return; } onCreate(date, content, emotion); navigate("/", { replace: true }); // 뒤로가기 막기 }; return ( <div className="DiaryEditor"> <MyHeader headText={"새 일기쓰기"} leftChild={<MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />} /> <div> <section> <h4>오늘은 언제인가요?</h4> <div className="input_box"> <input className="input_date" value={date} onChange={(e) => setDate(e.target.value)} type="date" /> </div> </section> <section> <h4>오늘의 감정</h4> <div className="input_box emotion_list_wrapper"> {emotionList.map((it) => ( <div key={it.emotion_id}> <EmotionItem key={it.emotion_id} {...it} onClick={handleClickEmote} isSelected={it.emotion_id === emotion} /> </div> ))} </div> </section> <section> <h4>오늘의 일기</h4> <div className="input_bot text_wrapper"> <textarea placeholder="오늘은 어떤가요?" ref={contentRef} value={content} onChange={(e) => setContent(e.target.value)} /> </div> </section> <section> <div className="control_box"> <MyButton text={"취소하기"} onClick={() => navigate(-1)} /> <MyButton text={"작성완료"} type={"positive"} onClick={handleSubmit} /> </div> </section> </div> </div> ); }; export default DiaryEditor;

안녕하세요. 강의 잘 보았습니다.몇가지 궁금증이 생겼는데요. Aggregate간의 의존성과 결합도를 해소하기 위해보통의 DDD 예제에서 Event를 사용하는 법을 많이 알려주고 있는데요. 이 방식을 채택하기에 모종의 이유로 실무에서 적용하지 못한다고 하였을때는 어떤식으로 의존성을 제거 또는 낮출수 있는지 궁금합니다.  두번째로는회원 도메인에서의 회원과 주문 도메인의 회원, 그리고 배송 도메인에서의 회원이 각 도메인별로 갖는 의미와 역할/기능 이 다를것 같은데요.예를 들어주문 context에서 회원에게 특정 기능이 필요하다고 가정했을때 이 코드가 어떤 entity에 작성이 되어야 하는지 궁금합니다.기존의 user entity에 코드를 작성해야 되는지아니면 order context내에 user entity를 새로 만들어서 코드 작성해야 되는지 궁금합니다.

 저같은경우 윈도우를 사용하고 있는데 두가지경우가 나오질 않아서 깃허브에 확인해보니 이렇게 프리캠프는 생성이 되었는데 들어가보니 강의에서 본것처럼 파일이 업로드 되있질 않았어요..어떻게 해야할까요?

Server ErrorTypeError: inst.render is not a functionThis error happened while generating the page. Any console logs will be displayed in the terminal window. 요런식으로 오류가 뜨는데 어떻게 해야할까요?

회원가입 페이지 ui 생성하기 파트 강의에서기존에 src폴더를 사용안하는걸로 next를 설치했는데, 갑자기 src폴더구조가 있어서 당황했습니다. 확인해주시면 감사하겠습니다