문제 더미 데이터를 임시로 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/..

문제 다음과 같이 이벤트 객체의 부모 태그 (className이 parent인 div 태그)에 접근하려고 하니 다음과 같이 에러가 뜨며 빨간줄이 뜬다. 'e.target.parentNode'은(는) 'null'일 수 있습니다. 해결 1. 조건문을 사용해 e.target.parentNode가 null 인 경우 예외 처리를 한다. 하지만 별로 Awesome하지 못한 방법이다. 2. 타입 선언 (Type Assertion)을 해준다. as 키워드를 통해 타입을 추론할 수 있도록 해준다. vscode에서 이벤트 객체에 마우스를 올리면 정확한 타입명을 알 수 있다. HTMLInputElement 또는 Element 타입으로 타입 선언을 해주자. { const parent = e.target.parentNode a..

쿠키 쿠키를 이용해 서버는 브라우저에 데이터를 넣을 수 있습니다. 해당 브라우저에 데이터, 페이지 정보 등 사용자의 사용기록을 저장합니다. 사용자가 웹사이트에 방문할 때마다, 브라우저는 해당 쿠키도 request와 함께 서버에 보냅니다. => 오직 해당하는 도메인에만 보낼 수 있습니다. 예를 들어, 유튜브의 쿠키는 오직 유튜브에만 보낼 수 있습니다. 서버가 정해놓은 유효기간이 존재하고, 쿠키의 크기에 제한이 존재합니다. 쿠키의 가장 큰 역할은 유저 인증을 하기 위한 세션ID를 서버에 전달하는 것입니다. 세션 먼저 "stateless"의 개념부터 이해해야 합니다. 클라이언트가 서버에 보내는 각 request는 서로 연관이 없고 독립적으로 다뤄집니다. 즉, request가 끝날 경우 서버는 해당 클라이언트가..

https://www.youtube.com/watch?v=RtvSgptpfnY&list=WL&index=24&t=104s https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_1-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC-%E1%84%80%E1%85%AE%E1%84%92%E1%85%A7%E1%86%AB Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속..

문제 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 헤더를 사용하여, 한 출처..

HTML 소스에서 일반적으로 공백이나 괄호 같은 문자들을 입력하게 되면 이를 소스 기호나 태그로 인식하기 때문에 정상적으로 출력되지 않습니다. 따라서 특수기호를 출력하고 싶은 경우 소스 내에 다음과 같이 입력해야 합니다. 화면에 표시되는 모습 특수 기호 & & (공백 한 칸) > " " | | ( ( ) ) , , - - ' &acuta;