블로그 포스팅 글이 100개를 넘어가면서 0 번째부터 글들이 리스트에 없어 notion api 에 대해 다시 살펴봤다. Notion Api포스트 맨으로 api를 불러와 보니 100개 초과 일 때 와 아닐 때 값이 다른 점이 있다. results 100개 이하일 때has_more값이 false이며 next_cursor 값도 null 이다.// JSON{ "object": "list", "results": [ /// ], "next_cursor": null, "has_more": false, ...}  results 100개 초과 일 때has_more값이 true이며 next_cursor 값은 string된 값이 생긴다.// JSON{ "object": "list", "results": [ /// ]..

Notion api 로 불러오면서 하위 이미지와 같은 경고 문이 뜬다.Warning: data for page "/" is 184 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.See more info here: https://nextjs.org/docs/messages/large-page-data Large Page Data공식 문서(https://nextjs.org/docs/messages/large-page-data) 에서는 데이터 양을 줄이라는 해결책을 줬지만 내 경우에 해당하는 해결 방법이 아니어서 다른 방법을 찾아보았다. next.config.js나랑 똑같은 문제를 겪고 있는 글을 찾아보니..

Notion Api로 블로그를 만들면서 cors에러를 마주하여 해당 에러에 대해 알아보았다.CORS?Cross Origin Resource Sharing의 줄임말로 교차-출처 리소스 공유하고도 한다.웹 어플리케이션에서 다른 도메인의 리소스에 접근할 때 발생하는 보안 이슈를 해결하기 위한 표준 방법으로  CORS는 브라우저 단에서 작동하며, 웹 서버가 특정한 HTTP 헤더를 반환함으로써 웹 브라우저가 자원에 대한 권한을 부여하도록 한다. 이 헤더는 서버에게 특정한 도메인, 프로토콜, 포트에서만 요청을 허용하도록 지시할 수 있다.CORS는 최신 브라우저에서 구현된 동일 출처 정책(same-origin policy) 때문에 등장했다. 출처(Origin)?여기서 출처(Oringin) 은 Protolcol과 Ho..

Next.js는 리액트 프레임워크로 프리랜더링을 지원하여 SEO 최적화와 성능 개선을 위해 HTML을 먼저 생성한다. 그래서 window를 참조하는 이벤트를 사용하면 에러가 발생 할 수 있다.window 참조 오류 해결 법typeof 연산자 : window 객체가 존재하는 지 판단 하는 방법클라이언트에서 렌더링 할 때까지 기다렸다가, window를 참조할 수 있는 시점에 코드 실행if (typeof window !== "undefined") { // window 객체를 사용하는 코드}// 블로그에서 사용된 코드const [scrennWidth, setScrennWidth] = useState( typeof window !== "undefined" ? window.innerWidth : 0 ); ne..

Next.js 에서 새로 고침 하면 아래와 같은 오류가 발생했다.Hydration failed because the initial UI does not match what was rendered on the server Next.js 공식 문서에 따르면 오류가 발생한 이유로는“ 텍스트 내용이 서버에서 렌더링 된 HTML과 일치하지 않습니다. "렌더 시점에 대한 이유로 발생한 거 같다. 여러 해결 방법 중 useEffect를 활용해서 해결했다. import { useState, useEffect } from 'react' export default function App() { const [mounted, setMounted] = useState(false) useEffect(() => { se..