안녕하세요 제로초님 강의를 듣다 의문점이 하나 생겨 질문드립니다. 패레럴 라우트와 인터셉터 라우트를 사용해서 모달을 띄우는 방법을 알려주셨는데 기존의 react에서 사용하던 방식으로 모달의 띄우는게 더 코드도 단순하고 간단하게 구현할 수 있을것 같은데 nextjs에서는 페레럴 라우트와 인터셉터 라우트를 사용해서 모달을 구현하는게 어떤 이점이 있는지 궁금합니다.기존의 모달을 띄우는 방법은 여러가지가 있지만 state를 통해서 구현하거나 queryString을 사용해서 구현할 수 있을것 같습니다.queryString을 사용하면 뒤로가기 버튼클릭시 모달을 띄우기전 url로도 이동할 수 있고 새로고침을 해도 모달과 뒤의 배경을 같이 보여줄 수 있을 것 같습니다.혼자서 생각도 해보고 인터넷에서 자료도 찾아봤지만 정확한 이유를 잘 모르겠어서 질문드립니다. 오늘도 좋은 하루 되셨으면 좋겠습니다. 감사합니다.

인터셉팅 라우트의 본 목적은 아닌 것 같으나 제 생각으론 가능하지 않을까 하는 생각이 드는데 진짜 가능한 건지 궁금해서 여쭤봅니다,,ㅠㅠ 인터셉팅 시에 모달이 뜨면서 children이 변경되도록 하고 싶은데,,, 가능한 건가요,,? 그러면 폴더 경로를 어떻게 설정 해야 할까요,,?

안녕하세요 선생님. "Suspense로 Streaming하여 최적화하기(feat. loading.tsx, error.tsx)" 강의 내용중에 궁금한점이 있어 질문드립니다.강의에서 5:42 ~ 6:35 시간 구간에서의 내용에 관해서 이해가 잘 안되는 부분이 있는데요. 홈 화면에 처음 들어올 때에는 로딩스피너가 안보이고 탐색하기 등 다른 페이지에서 홈 화면으로 들어오면 로딩스피너가 보이는 이유를 설명해주시는 부분입니다.홈 화면에 처음 들어왔을 때에는 홈 화면에 해당하는 page.tsx를 서버에서 다 그려주기 때문에 로딩 상태가 없어서 로딩스피너가 안보이고, explore에 있다가 클라이언트에서 홈으로 넘어갈 때에는 explore에서 홈 페이지를 새로 로딩을 하기 때문에 로딩 스피너가 뜨는거라고 설명해주셨는데요. "explore에서 홈 페이지를 새로 로딩을 한다" 라는게 무슨 말인지 잘 모르겠습니다 ㅠ page.tsx가 CSR이 된다는 것인가요?저는 어떤 페이지에 들어오면 그 페이지에 해당하는 page.tsx가 실행되는걸로 알고 있었는데 아닌가요? 홈의 page.tsx는 서버 컴포넌트인데 왜 홈에 처음 들어왔을 때만 page.tsx가 서버에서 실행되고 그 이후에는 마치 클라이언트에서 데이터 패칭하고 그에 따라 렌더링이 되는것처럼 "로딩"이라는 상태가 존재하는것인지가 궁금합니다. 

Refresh Token마저 만료되었을때 Todo 또는 Product 메뉴를 누르면 자동으로 로그아웃 및 메인페이지로 이동하려고 합니다. 강의 내용대로 쿠키 member를 삭제하여 로그아웃 처리는 하였으나 '/' Path로 이동은 안되어서 방법을 찾지 못하여 질문드립니다. 추가로 토큰만료시 jwtUtil의 beforeRes에서 쿠키를 삭제하였으나 todo 페이지가 호출 및 페이지 이동이 안되어서 todo 페이지 나오기전에 페이지 이동을 하고싶습니다. ListComponent의 useEffect에 hook을 사용했으나 실제로 이동안 되고 jwtUtil, todoAPI 는 모두 규칙 위반으로 hook이나 navigate를 사용할수 없더라구요. 어떻게 해야할까요..  

유튜브에 2022버전 개정판이 나와있던데 이걸보는게 나을까요?

어제는 잘됬는데 오늘 다시 해보니까 계속 오류가 생겨서 무슨 문제일까요?서버에서도 에러가 뜨고 어제는 잘됬는데요 어제는 오류 안떳는데 오늘은 뜨고요 이거 다운받아야 할까요? 네트워크는 잘 작동을 하는데요.페이로드랑 응답에는 에러가 뜨네요.어제는 분명이 됬는데 오늘 이러니까 이유를 모르겠어요 ㅠ 다른 섹션도요

const navigateFn = vi.fn(); vi.mock('react-router-dom', async () => { const original = await vi.importActual('react-router-dom'); return { ...original, useNavigate: () => navigateFn }; });useNavigate 함수에 스파이 함수를 전달할때 위 코드를 사용하고 있는데요. 이부분에서 이해가 어려운게 있습니다. //ErrorPage.jsx const navigate = useNavigate(); const handleClickBackButton = () => { navigate(-1); }; 실제로 네비게이션에 활용하는 함수는 navigate() 잖아요.그런데 왜 스파이 함수를 useNavigate()에 전달하는 건가요? 직관적으로 보자면, expect(navigate함수에 전달된 spyFn).toHaveBeenNthCalledWith(1, -1) 이여야 할 거 같다고 느껴져서 이해가 안갑니다.  

context를 썻을때는 data length로 체크하면 최대 5개가 넘지 않게 더이상 오픈되지 않거나 가장 밑에 스낵바를 닫아 버린다던가 쉽게 구현을 가능할 것 같은데 portal를 쓰면 컨트롤이 가능한가? 궁금합니다

  it('focus가 활성화되면 border 스타일이 추가된다.', async () => { const { user } = await render(<TextField />); const textInput = screen.getByPlaceholderText('텍스트를 입력해 주세요.'); //await user.click(textInput); expect(textInput).toHaveStyle({ borderWidth: 'px', borderColor: 'rbg(25,a118,210)', }); });  (1) user.click(textInput)을 주석 처리 했습니다.그리고(2) toHaveStyle 부분에서,borderWidth, borderColor 두 값을 위와 같이 넣었는데도 테스트가 아래처럼 통과합니다.  수업 노트에 적혀진 이슈 (링크)의 내용대로 "1px"이라고 작성하면 test가 fail이 됩니다. 혹시 제가 잘 못 이해한 부분이 있는걸까요?

import React, { useState, MouseEvent } from "react"; import * as S from "./mypoint.index.styles"; import TapPointLoading from "./mypoint_loading"; import TapPointBuying from "./mypoint_buying"; import TapPointAll from "./mypoint_all"; import TapPointSelling from "./mypoint_selling"; export default function MyPoint(): JSX.Element { const [selectedValue, setSelectedValue] = useState<{ name: string; index: number; }>({ name: "전체내역", index: 0, }); const MyPageHeadInfoButton = [ { name: "전체내역", component: <TapPointAll /> }, { name: "충전내역", component: <TapPointLoading /> }, { name: "구매내역", component: <TapPointBuying /> }, { name: "판매내역", component: <TapPointSelling /> }, ]; const onClickTap = ( event: MouseEvent<HTMLDivElement>, index: number ): void => { const newValue = event.currentTarget.id; setSelectedValue({ name: newValue, index, }); }; // 버튼 클릭으로 해당 data 값을 보여주기 위함 const renderData = (): JSX.Element | undefined => { return ( <S.TableWrap> {/* 해당 탭의 배열의 객체 name통해 컴포넌트 가져옴 */} {MyPageHeadInfoButton.map((el) => { if (el.name === selectedValue.name && el.component) { return <div key={el.name}>{el.component}</div>; } return null; })} </S.TableWrap> ); }; return ( <S.Wrap> <S.MyPageHeadWrap> <S.MyPageHeadBtn> {/* 서브 탭 버튼 */} {MyPageHeadInfoButton.map((el, index) => ( <S.MyPageInfoBtn key={el.name} id={el.name} onClick={(event) => onClickTap(event, index)} selected={selectedValue.name === el.name} > {el.name} </S.MyPageInfoBtn> ))} </S.MyPageHeadBtn> </S.MyPageHeadWrap> <S.MyPageBodyWrap> {/* 해당 탭 data */} <div>{renderData()}</div> </S.MyPageBodyWrap> </S.Wrap> ); } 이렇게 탭을 클릭을 해서 해당 컴포넌트가 보이도록 했습니다.그러면서 각각의 API data도 받아와 cache에 저장을 하도록 해 추가 API 요청이 일어나지 않도록 했는데여기서 로그아웃을 하고 다른 아이디로 로그인을 하면이전의 로그인 했던 data가 그대로 남아있어 최신 data를 가져오기 위해 여러가지 방법으로 시도했습니다.로그아웃 시 useApolloClient를 활용해 cache를 삭제 했습니다. 이렇게 하면 다시 로그인 한 유저의 data를 잘 가져오는데 로그아웃을 하면서 cache data가 삭제되니 다른 API, Board, Markets 등 해당 page의 사용한 query문의 data를 다시 요청하는 문제가 있습니다.  refetch()로 query문을 선언하면 해당 refetch()를 실행하지 않아도 API 요청이 일어나 refetchQueries를 사용해 data 최신화 하려는데 그렇게 되면 모든 탭을 refetch 해줘야 되는 문제가 있습니다.각 탭 이동마다 API 요청 나가는게 싫어서 fetchporicy나 refetch()를 사용 하지 않았는데 보통 어떻게 사용을 하나요? 로그인에 의한 data는 탭 이동마다 refetch를 시켜주는게 좋을까요? 그리고 구매, 충전 등 하면 바로 MyPoint에 업데이트 되도록client.writeQuery / readQeury 나 refetchQueries를 사용했는데 이런 결제 정보 같은거는 refetch로 실시간으로 data를 가져오는게 좋겠죠? 로그인, 로그아웃은 LayoutHeader에서 사용하고 있습니다.

그런데 글만 회고록에 글만입력하면 오류가 납니다. 오류의 원인은 speed.js파일 때문이라고 합니다. 현재 코드는 아래와 같습니다. 허파가 뒤집어집니다.import { Input, Button} from 'antd'; const { TextArea } = Input; import { useState } from "react";// 저장하는 곳임포트 const DiaryInput = ({ isLoading, onSubmit }) => { const [userInput, setUserInput] = useState(""); // isLoading 로딩상태에서 사용하는 변수 // inSubmit 다입력 작성하면 사용 const handleUserInput = (e) => { setUserInput(e.target.value); }; const handleClick = () => { onSubmit(userInput); }; return ( <div> <TextArea value={userInput} onChange={handleUserInput} placeholder="오늘 일어난 일들을 간단히 적어주세요." /> <Button loading={isLoading} onClick={handleClick}> GPT 회고록을 작성해줘! </Button> </div> ); } export default DiaryInput; // import { Input , Button} from 'antd'; // import { useState } from 'react'; // const { TextArea } = Input; // const DiaryInput = ({isLoading, onSubmit}) => { // const [userInput, setUserInput] = useState(""); // //사용자의 입력을 받아 상위 컴포넌트로 넘기기 // // 로딩상태에서는 제출버튼 못누루게 // const handleUserInput =(e)=>{ // setUserInput(e.target.value); // const handleClick = ()=>{ // onSubmit(userInput); // } // } // return ( // <div> // <TextArea value={userInput} onChange={handleUserInput} placeholder='오늘 하루 회고'/> // <Button loading={isLoading} onClick={handleClick}>GPT회고록 시작</Button> // </div> // ); // }; // export default DiaryInput;import { useState } from 'react'; import { CallGPT } from './api/gpt'; import DiaryInput from './components/DiaryInput'; const dummyData = { "title": "고립된 개발자의 고민", "thumbnail": "https://source.unsplash.com/1600x900/?programming", "summary": "혼자 코딩과제를 진행하면서 걱정이다.", "emotional_content": "최근 혼자 코딩과제를 진행하면서, 협업이 없이 모든 것을 혼자 결정하고 해결해야 한다는 부담감에 많이 무겁습니다. 강의를 듣고 최선을 다해 프로젝트를 진행했지만, 예상치 못한 버그들로 인해 스트레스가 많이 쌓였습니다. 스택오버플로와 GPT를 통해 문제를 해결하긴 했지만, 이러한 문제해결 방식이 정말로 제 개발 실력을 향상시키는지에 대해 의문이 듭니다. 왠지 스스로의 능력을 시험할 기회를 잃은 것 같아 아쉽고, 불안감도 커지고 있습니다.", "emotional_result": "이 일기에서 감지되는 감정은 불안, 부담감, 그리고 자신감의 결여입니다. 고립된 상황에서의 성공에 대한 압박감과 문제 해결 방법에 대한 의심은 정서적으로 큰 부담을 주고 있습니다. 자기 효능감이 낮아짐을 느끼는 상황입니다.", "analysis": "고립되어 문제를 해결하는 과정은 큰 스트레스와 불안을 유발할 수 있습니다. '혼자서 하는 일은 좋은 일이든 나쁜 일이든 더욱 크게 느껴진다'는 에릭 에릭슨의 말처럼, 혼자서 모든 것을 해결하려는 시도는 때로는 개인의 성장에 도움이 될 수 있지만, 지속적인 고립은 자기 효능감을 저하시킬 수 있습니다. 이러한 상황에서는 자신의 노력을 인정하고, 필요한 경우 도움을 요청하는 것이 중요합니다.", "action_list": [ "프로젝트 중 발생하는 문제를 혼자 해결하려 하지 말고, 멘토나 동료 개발자와 상의를 통해 해결 방안을 모색하라.", "정기적으로 자신의 학습 방법과 진행 상황을 평가하여, 필요한 경우 학습 방식을 조정하라.", "개발 과정에서의 스트레스 관리를 위해 적절한 휴식과 여가 활동을 통해 정서적 안정을 찾으라." ] }; function App() { const [data, setData] = useState(dummyData); // 우선 빈문자열로 해놓고 const [isLoading, setIsLoading] = useState(false); const handleClickAPICall = async (userInput) => { try { setIsLoading(true);// 처음에는 로딩을 트루 const message = await CallGPT({ prompt: `${userInput}`, }); // Assuming callGPT is a function that fetches data from GPT API setData(JSON.parse(message)); } catch (error) { // Handle error (you might want to set some error state here) } finally { setIsLoading(false);//다음에는 펄스로 } }; const handleSubmit = (userInput) => { handleClickAPICall(userInput); }; console.log(">>data", data); return ( <> <DiaryInput isLoading={isLoading} onSubmit ={handleSubmit} /> <button onClick={handleClickAPICall}>GPT API call</button> <div>title : {data?.title}</div> <div>analysis : {data?.analysis}</div> <div>emotional_content : {data?.emotional_content}</div> <div>emotional_result : {data?.emotional_result}</div> </> ); }; export default App; // import { useState } from "react"; // import { CallGPT } from "./api/gpt"; // import { message } from "antd"; // import DiaryInput from "./components/DiaryInput"; // const dumyData = JSON.parse(` // { // "title": "당황스러운 예제 에러", // "thumbnail": "https://source.unsplash.com/1600x900/?confused", // "summary": "가끔 예제 에러가 발생하여 당황함", // "emotional_content": "가끔 예제 에러가 나타나는 것이 정말 당황스럽다. 이런 상황들은 예상치 못한 문제로 인해 나를 혼란스럽게 만든다. 그럼에도 불구하고, 이런 에러들은 동시에 나의 문제 해결 능력을 시험한다.", // "emotional_result": "당황스러움과 혼란스러움이 느껴진다. 그러나 이는 예상치 못한 문제에 대처하는 능력을 향상시키는 과정일 수 있다.", // "analysis": "당신의 당황함과 혼란스러움은 예상치 못한 상황에 대한 불안감과 두려움을 반영할 수 있습니다. 하지만, '문제는 기회다'라는 유명한 격언을 기억하십시오. 이러한 에러들은 당신의 문제 해결 능력을 향상시키는 좋은 기회일 수 있습니다.", // "action_list": [ // "예상치 못한 에러에 대비하는 습관 만들기", // "문제 해결 능력 향상을 위한 자기계발", // "당황하지 않고 차분하게 상황을 평가하는 능력 기르기" // ] // } // `); // function App() { // const [data, setData] = useState(dumyData); // const [isLoading, setIsLoading] = useState(false); // // 여기로딩상태가 // const handleClickAPICall = async (userInput) => { // try{// try catch로 감싸서, 처음에는 로딩상태를 트루라고 하고 // setIsLoading(true); // const message = await CallGPT({ // prompt:'{userInput}', // }); // setData(JSON.parse(message));// 그리고 데이터가 잘오면 받아보자 // } catch (error){ // }finally{ // setIsLoading(false);// 나중에는 false라고 하자 // } // }; // const handleSubmit = (userInput)=>{ // handleClickAPICall(userInput); // }; // console.log(">>data", data); // return ( // <> // <DiaryInput isLoading={isLoading} onSubmit={handleSubmit} /> // // 여기로 옴 // <button onClick={handleClickAPICall}>GPT API call</button> // <div>data : {data?.title}</div> // <div>thumbnail: {data?.thumbnail}</div> // <div>summary : {data?.summary}</div> // <div>emotional_resul : {data?.emotional_resul}</div> // <div>emotional_content : {data?.emotional_content}</div> // <div>analysis: {data?.analysis}</div> // <div>action_list: {data?.action_list}</div> // </> // ); // } // export default App;{ "name": "my-gpt-diary", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@ant-design/icons": "^5.4.0", "antd": "^5.20.1", "react": "^18.3.1", "react-dom": "^18.3.1", "styled-components": "^6.1.12" }, "devDependencies": { "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", "@typescript-eslint/eslint-plugin": "^7.15.0", "@typescript-eslint/parser": "^7.15.0", "@vitejs/plugin-react": "^4.3.1", "eslint": "^8.57.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.7", "typescript": "^5.2.2", "vite": "^5.3.4" } }

공부하고 싶어요..ㅠ

지금 터저서 테스트 안되요 고쳐주세요.

안녕하세요 8장 까지 마무리 하고 product 이미지 가 출력되지 않는 현상을 봤습니다. 확실한건 이미지 링크는 header에 Authorization에 bearer token이 없어서 출력되지 않는거 같아요..일단 shouldNotFilter에 if(path.startsWith("/api/products/view")) { return true;}해서 보이게 했긴해지만 결국에는 링크도 토큰 인증 처리해야겠죠?  

이런게 뜨는데 npm라이브러리가 잘못된건가요? react-native-cli라 expo라이브러리를 쓸수도 없고...

마지막에 로그인시저는 http://localhost:3000/api/auth/error"이 페이지는 존재하지 않습니다. 다른 페이지를 검색해 보세요검색" 위 URL로 리다이렉트 되고 해당 ㅁㅔ시지가 뜹니다.혹시 어디에 있는 정보로 로그인하는건지 궁금합니다

export async function getSearchResult({ queryKey }) { const [_1, _2, searchParams] = queryKey; const res = await fetch(api url, next: { tags: ["posts", "search", searchParams] }, cache: 'no-store' )}next tags를 사용하는이유가 revalidate를 하기 위해서인데fetch 옵션을 'no-store'로 주면 캐시가 되지 않는걸로 알고있어서 tags 사용안해도 되지않나요??

send를 누르면 터미널에 이렇게 뜹니다. Server Running at 5000 C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193 throw new Error('The incoming JSON object does not contain a client_email field'); ^ Error: The incoming JSON object does not contain a client_email field at JWT.fromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\jwtclient.js:193:19) at GoogleAuth._cacheClientFromJSON (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:313:16) at ReadStream.<anonymous> (C:\project\vswork\chatbot-app-master\node_modules\google-gax\node_modules\google-auth-library\build\src\auth\googleauth.js:347:36) at ReadStream.emit (node:events:519:28) at endReadableNT (node:internal/streams/readable:1696:12) at process.processTicksAndRejections (node:internal/process/task_queues:82:21) Node.js v20.16.0 PS C:\project\vswork\chatbot-app-master> 아래와 같이 값이 입력이되어있는데도말입니다. 루트파일에다가 구글 인증json을 위치를 끌어다 넣어도 그렇습니다. 가르쳐줘서 고맙습니다. 근데 이렇게 문제가 생겨서 이 구간을 벗어나고 싶습니다 ㅠㅠ

  주소 안들어가집니다/

제로초님의 next-auth 작업하시는걸 보고 프론트에서 next-auth로 로그인하는것을 구현을 하긴 했는데 로그인(인가)을 하는 주체가 프론트다 보니 기존에 배웠을때는 nest 또는 node에서 passport를 이용해서 작업을 했엇는데 이제는 passport로 인가 하는 작업이 필요가 없어진건지 궁금합니니다.필요가 없다라고 하면 백엔드서버에서는 이사람이 로그인을 했는지 안했는지를 알아야 할텐데 그거는 어떻게 구현을 해야할지가 막막해서 질문드립니다 ㅠㅠ