https://velog.io/@win9612/React-Hooks-useEffect%EC%99%80-useLayoutEffect-%EA%B7%B8%EB%A6%AC%EA%B3%A0-useInsertionEffect

https://velog.io/@win9612/React-Hooks-useState%EB%9E%80

문제 더미 데이터를 임시로 fetch하여 불러오는 코드를 사용하던 중 문제가 발생했다. Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["popular"] Error: undefined at Object.onSuccess (webpack-internal:///(sc_server)/./node_modules/@tanstack/query-core/build/lib/query.mjs:263:29) at resolve (webpack-internal:///(sc_server)/./node_modules/@tanstack/..

문제 Spring Boot를 이용해 아주 간단한 api 서버를 localhost를 통해 실행시키고, 리액트를 실행시켜 fetch 통신을 시도해봤다. 서버에는 리액트에서 보낸 GET request가 잘 도착하였고, response를 잘 보냈지만 리액트 페이지에는 response가 도착하지 않았다. 위와 같은 에러가 발생하였다. 에러메시지에서 보여주는것과 같이, "CORS 정책 위반"을 이유로 response가 block되었다. https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처..