프로젝트 중 mdx 파일을 불러와야 하는 상황이 생겨 Next.js (14 버전)에서 어떻게 불러오는지 알아보았다.MDX in NextJSMDX 확장자는 마크다운(MD)과 JSX가 결합되어 마크다운 컨텐츠를 리액트 내에서 컴포넌트 형태로 export 하거나, JSX컴포넌트를 MDX파일 내에 import 할 수 있도록 한다. 정적 컨텐츠를 컴포넌트화 시키는 특성 때문에 SSG를 지원하는 프레임워크(Gatsby, Next)에서는 MDX를 위한 플러그인이 잘 지원되고 있다. 먼저 Next.js에서 mdx파일을 불러오기 위해 하위 packages 을 설치해야 한다.npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx  Configuring: MDX | N..

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

메모리 누수란?부주의 또는 일부 프로그램 오류로 인해 더 이상 사용되지 않는 메모리를 해제하지 못하는 것이다.자바스크립트의 메모리 관리가비지 콜렉팅 언어(garbage collected languages) 인 자바스크립트는 이전에 할당된 메모리 영역이 응용프로그램의 다른부분에서 여전히 다시 참조될 수 있는지 주기적으로 확인하여 개발자가 메모리를 관리하는데 도움을 준다.앞서 말한 메모리 누수의 정의에 따르면, 변수 또는 데이터가 더 필요하지 않을 때 이들은 가비지 변수 또는 가비지 데이터가 된다. 만약 그런 데이터가 메모리에 계속 쌓인다면, 결국에는 메모리 사용량을 초과하게 되어 이 시점에서 가비지 데이터를 정리 해야 한다. 주요 자바스크립트 메모리 누수 원인들의도치 않은 전역 변수전역 변수는 항상 루트에..