강의를 보고 같이 프로젝트도 만들어봤는데 문제가 생겨 글을 작성합니다.response 값을 확인하려고 네트워크 탭을 확인하니 프리플라이트가 같이 생성되고 클릭할 시 아래와 같은 메시지가 나옵니다.{"message":"No API key found in request","hint":"No apikey request header or url param was found."} 혹시 이 문제를 해결할 수 있는 방법을 알고 계신가요?처음부터 supabase 설정을 다시 해야될까요?

import { QueryFunction } from "@tanstack/react-query"; import { User } from "@/model/User"; const getUser: QueryFunction<User, [string, string]> = async ({ queryKey }) => { const [_1, username] = queryKey; const res = await fetch(`http://localhost:9090/api/users/${username}`, { next: { tags: ["users", username], }, cache: "no-store", }); console.log("res.ok : ", res.ok); if (!res.ok) { throw new Error("해당 유저 정보를 불러오지 못 했습니다."); } return res.json(); }; export default getUser; mocks>handler.ts에 없는 username을 url에 입력해도 res.ok로 떠서 if문을 그냥 통과해버립니다.혹시 제가 놓치는 부분이 있는걸까요?

데이터베이스 sqlite연결하고models.py 파일들어가서도 변경했습니다변경하고 모델 Song 클래스 table까지 생성완료했습니다그런데 사진과 같이 예상외 오류가뜹니다 그전까지는 핫트랙 홈페이지가 잘떳습니다오류내용보니 전혀 건들이지 않는 views.py song.from_dic 에서 오류가 먼저 났습니다    이유를 잘 모르겠습니다...

제목 그대로 입니다. 가장 최근에 업데이트 해주신게 벌써 2년전인데, 강의를 계속 걸어놓으시려면 적어도 매년 단위로UI 상태에 맞게 해당 부분만이라도 강의를 업데이트 해주셔야 할 것 같습니다.Mock server 부분 도저히 찾지못해 시간만 보내고 진척이 없습니다. 대체 어떻게 해야 하나요?

다른 분들도 겪은 문제인데 0.2.42 버전으로 다운그레이드 하려고해도 지원하지 않는 버전이라고 나오네요. npm run test 는 잘 실행되는거 같습니다. 혹시 해당 이슈 해결방법 알 수 있을까요 .. 아니면 그냥 npm run test 로 진행해도 상관없을까요

import React,{useState} from 'react'; function Exptest (){ const [number, setNumber] = useState('A'); const checkNumber =() =>{ alert("첫번째 "+number); setNumber(function (prevnumber){ alert(prevnumber+"/3번/"+number); setNumber((prevnumber)=>{ alert(prevnumber+"/4번/"+number); return prevnumber+'B'; }); return prevnumber+'C'; }); alert("두번째"+number); }; return ( <> <button onClick = {checkNumber}> {number} </button> </> ); }; export default Exptest; /* 이런식으로 안쓰는건 알지만 실행순서에 대해서 공부하다 이것저것 해보다가 이해가 안가서 질문드립니다. 질문1. 처음 버튼 클릭 시 number='A' -> number = 'AC' 이렇게 업데이트된다. 그리고 두번 째 실행 시 결과는 number = 'ACCB' 가 되는데 왜 처음엔 B를 추가하지 않나요? 질문2. alert 메세지가 뜨는 순서를 보면 처음 버튼 클릭 시 첫번째 A -> A/3번/A -> A/4번/A -> 두번째 A 그리고 두번 째 버튼 클릭 부터는 첫번째 AC -> 두번째 AC -> AC/3번/AC -> ACC/4번/AC 이렇게 메세지가 뜨는데 왜 순서가 달라지나요? */

새로고침을해도 데이터베이스 테이블 목록에는 저거 밖에 안뜨는데 이유를 알수있을까요??

클래스 설명시 음성 OFF 되어 있네요.

prefetchQuery 서버컴포넌트에서 데이터를 한번 불러오면, 정상적으로 불러왔는지 확인할 수 있나요??서버 컴포넌트에서 prefetchQuery한 다음에 클라이언트컴포넌트에서 useQuery로 불러오게 되면(queryKey 동일) 이미 데이터가 저장 되어 있는거로 알고 있는데,console.log를 찍어보게 되면, undefined가 뜬 다음에 데이터가 호출 됩니다.prefetchQuery가 정상적으로 동작 안하는게 아닌가 싶습니다. export default function TestClient() { const { data } = useQuery({ queryKey: ['typeData'], queryFn: getTypeData, }); console.log(typeData); ...export default async function TestServer() { const queryClient = new QueryClient(); await queryClient.prefetchQuery({ queryKey: ['typeData'], queryFn: getTypeData }); const dehydratedState = dehydrate(queryClient); return ( <> <HydrationBoundary state={dehydratedState}> <TestClient /> </HydrationBoundary> </> ); }

결과가 저렇게나오는데 yarn test 실행하면 로그가 정상적으로 출력됩니다 이유가뭘까요?

현재 리액트부분을 시작했는데 리액트를 설치할때 yarn add next@12.1.0 react@17.0.2 react-dom@17.0.2 --exact이러한 명령어를 사용하는데 이렇게 설치하고 나니 제가 알고있는 폴더들이나 내용이 좀 다르더라구요. 제가 알고있는 건 npx create-react-app ./ 이러한 명령어로 리액트를 설치했는데 이거와 전혀 다른 명령어 인가요?

아코디언 8_r.tsx에서 item7 클래스를 주셨는데 강의자료에 item7 클래스가 없는 것 같아요!

안녕하세요 강사님! 이번학기에 갑자기 웹 개발을 하게 되어 부랴부랴 프론트 강의 챙겨보는중인데 정말 도움이 많이 돼 우선 감사의 말씀 먼저 드립니다. ㅜㅜ  다름이 아니라 제가 본 영상 강의를 보고 학교 과제를 수행하다가   (투두 리스트를 참고하여 만들었습니다. 참고로 과제는 이슈관리 시스템입니다.) 이러한 메인 화면을 구현하였는데, 각 프로젝트 이름을 누르면 그 프로젝트의 상세 페이지로 연결 시키고 싶은데, 라우터 기능을 사용하여 링크는 제대로 바뀌는데 화면 전환이 되지 않습니다. ㅜㅜ  코드를 여러번 봐도 무엇이 문제인지 감이 안 잡혀 질문 드리게 되었습니다.  코드 첨부 하겠습니다. ! import "./App.css"; import { Routes, Route, Link, useNavigate } from "react-router-dom"; import { useRef, useState } from "react"; import Header from "./components/Header"; import List from "./components/List"; import ProjectDetail from "./pages/ProjectDetail"; //임시데이터 const mokdata = [ { p_id: 0, p_name: "회원가입 프로젝트", date: new Date().getTime(), }, { p_id: 1, p_name: "온라인 테트리스 게임 프로젝트", date: new Date().getTime(), }, { p_id: 2, p_name: "윷놀이 프로젝트", date: new Date().getTime(), }, { p_id: 3, p_name: "온라인 채팅 앱 개발 프로젝트", date: new Date().getTime(), }, { p_id: 4, p_name: "회원 관리 시스템 프로젝트", date: new Date().getTime(), }, { p_id: 5, p_name: "이슈 관리 시스템 프로젝트", date: new Date().getTime(), }, ]; function App() { const [projects, setProjects] = useState(mokdata); const onDelete = (targetId) => { //배열에서 targetId와 일치하는 id를 갖는 요소만 삭제한 새로운 배열 setProjects(projects.filter((project) => project.p_id !== targetId)); }; return ( <> <div className="App"> <Header /> <List projects={projects} onDelete={onDelete} /> </div> <Routes> <Route path="/ProjectDetail:p_id" element={<ProjectDetail projects={projects} />} /> </Routes> </> ); } export default App; 위는 App.jsx 코드 이고  아래는 ProjectDetail 코드 입니다. !import { useParams } from "react-router-dom"; const ProjectDetail = ({ projects }) => { const { p_id } = useParams(); const project = projects.find((project) => project.p_id === parseInt(p_id)); return ( <div> <h1>프로젝트 상세내용</h1> <h2>{project.p_name}</h2> </div> ); }; export default ProjectDetail;   

node.js와 npm은 --version을 이용하니 버전이 나오는데 yarn은 버전이 나오지 않아 npm install -g yarn 이라는 명령어를 하니 이미지처럼 에러가 나옵니다.

리액트에서는 onClick으로 이벤트를 등록하면 Root에 모이게 된다고 하셨는데제가 이 부분을 정확히 이해했는지 알고싶어서 질문 드립니다!보통은 자바스크립트에서는 각 요소마다 addEventListener를 여러 번 호출하면 메모리 측면에서 비효율적이고 성능이 떨어질 수 있다고 알고 있습니다. 그래서 이벤트 위임을 사용하는 것으로 이해했습니다. 현재 강의에서는 각 요소마다 onclick 이벤트를 등록하셨는데 리액트에서는 Root에서 중앙통제하기 때문에 상관없다는 것으로 인지했습니다.제가 알기로는 이벤트들을 모아다가 root에 addEventListener를 하는 것으로 알고 있는데 이게 맞을까요?그러면 리액트에서는 굳이 이벤트 위임을 사용할 필요가 없을까요? 예를 들어 onClick을 여러 요소에 등록하지 않고 상위 요소 하나에만 등록하는 것처럼 말이죠..!

configuration.setAllowedHeaders(Arrays.asList("Authorization", "Cache-Control", "Content-Type"));이걸 어디에 추가해야 하는지 알 수 있을까요??if(path.startsWith("/api/member/")) { return true; } if(path.startsWith("/api/todo/")) { return true; }이건 이렇게 입력했지만 저 부분이 어딘지 몰라서 작동이 안되네요 ㅠㅠ

before request.............jwtUtil.js:34 -----------------------------eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzb2NpYWwiOmZhbHNlLCJwdyI6IiQyYSQxMCRWQ1dGY0ZhWC9aTzF2TGhpU0VpY3NlY0hGWmdIV2dZV0RNa0JMRmlCZk5yYTQvVVgvMERORyIsIm5pY2tuYW1lIjoiVXNlcjUiLCJyb2xlTmFtZXMiOlsiVVNFUiIsIk1BTkFHRVIiXSwiZW1haWwiOiJ1c2VyNUBhYWEuY29tIiwiaWF0IjoxNzE2OTc2NTc5LCJleHAiOjE3MTY5NzcxNzl9.r_619xyQq9zGhf5YG4-Sprtiz4W9rNNhf5ml4XyAQ3M:3000/todo/list:1 Access to XMLHttpRequest at 'http://localhost:8080/api/todo/list?page=1&size=10' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.jwtUtil.js:56 response fail error.............:3000/todo/list:1 Uncaught (in promise)AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}code: "ERR_NETWORK"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Network Error"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}stack: "AxiosError: Network Error\n at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:54389:14)\n at Axios.request (http://localhost:3000/static/js/bundle.js:54841:41)\n at async getList (http://localhost:3000/static/js/bundle.js:184:15)"[[Prototype]]: ErrorPromise.then(비동기)(익명)@ListComponent.js:29프레임 11개 더 표시 jwtUtil.js를 강의에서 알려주신대로 틀린거 없이 따라하고 todoApi.js에 Axios에서 jwtAxios로 변경하고 로그인 하고 todo를 클릭했는데 위에 메세지 처럼 에러가 발생합니다 그래서 오류메세지를 검색해 보니 이 에러는 CORS(Cross-Origin Resource Sharing) 정책 위반 이 에러는 주로 프론트엔드 애플리케이션(React 등)이 백엔드 API에 요청을 보낼 때 발생한다고 하는데요 어떻게 해야할지 모르겠습니다 ㅠㅠ

import React from 'react'; import {useState} from 'react'; function ConfirmButton2 (){ const [isConfirmed,setIsconfirmed] = useState(false); const handleConfirm = ()=>{ setIsconfirmed((prevIsConfirmed) => !prevIsConfirmed); // setIsconfirmed(!isConfirmed); }; const [number, setNumber] = useState(0); const checkNumber =() =>{ alert("첫번째 "+number); // 0 setNumber((prevnumber)=>{ alert(prevnumber+"//"+number); // 0 0 return prevnumber+10; }); setNumber((prevnumber)=>{ alert(prevnumber+"//"+number); // 10 0 return prevnumber+10; }); alert("두번째"+number); // 0 }; return ( <> <button onClick = {handleConfirm} > {isConfirmed ? "확인됨2" : "확인하기2"} </button> <button onClick = {checkNumber}> {number} </button> </> ); }; export default ConfirmButton2; 이렇게 해서 실행을 하고 숫자 버튼을 클릭하면 첫번째 alert -> set함수 alert -> 두번째 alert -> 두번째 set함수 alert 이 순서로 나오는데, alert -> set 함수 alert -> 두번째 set함수 alert -> 두번째 alert 이 순서가 아닌 이유를 모르겠어요.

login은 인터셉팅 라우터가 잘 되는데,signup은 (.)i로 인터셉팅이 안되고 버튼 클릭을 하면 그냥 i/flow/signup/page.tsx로만 보여지는 문제가 있습니다. 왜 signup은 인터셉팅 라우터가 작동이 안되는 것일까요?? 경로는 이렇게 잘 설정되어있고 안에 파일 내용은 아래와 같습니다. 아래는 @modal/(.)i/flow/signup/page.tsx아래는 i/flow/signup/page.tsx홈 버튼 링크는 아래와 같이 되어있습니다.혹시 제가 빠뜨린 무엇이 있을까요?

eslint 설치 시 3개 중에 마지막 3번째를 선택하라고 하는데 저는 선택지가 2개만 나옴니다. 2번째를 선택해서 설치해도 되나요?