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

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

Amazon EC2로 블로그를 배포해보고자 Amazon Route 53에서 도메인 구입 및 관리에 대해 알아보았다.Route 53Route 53은 AWS에서 제공하는 DNS ( Domain Name System ) 웹 서비스로 도메인과 관련된 다양한 서비스를 제공한다. DNS는 도메인과 도메인에 해당하는 IP 정보를 가지고 있다가 도메인 주소에 대한 요청이 들어왔을 때 이에 해당하는 ip를 알려주는 서버로 Route 53에서 도메인 이름을 IP주소로 변환하고, 웹 트래픽을 관리하는 데 사용된다. AWS Route 53 도메인 구입Route 53에 있는 등록된 도메인에 들어가 도메인 등록을 누른다. (빨간 박스)검색 창에 원하는 도메인 검색 후 선택하여 구매하면 된다.등록자 정보 입력하는 곳에서 이메일 정..

Firebase Storage동영상과 같은 컨텐츠를 저장할 수 있는 저장소인 Firebase Storage를 활용하여 업로드, 컨텐츠를 가져올 수 있다. 규칙수정 이미지 저장파란색 버튼은 파일 업로드를 통해 이미지를 올려도 되고 하위 이미지처럼 폴더 생성 후 폴더안에 이미지를 저장할 수 있다.  파일 하나만 가져올 경우이미지 파일 URL을 얻는 방식으로 가져온다.import { ref, listAll, getDownloadURL } from "firebase/storage";import { fireStorage } from "../../firebase/firebasedb";import { useEffect } from "react";export default function Test() { const [..

Firebase를 활용할 일이 종종 있어 Next.js와 연동하는 방법에 대해 정리했다.Firebase파이어베이스는 구글(Google)이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로 백엔드의 요소들을 쉽게 구현할 수 있도록 도와주는 일종의 툴이다. 파이어베이스에서 프로젝트 추가 Firebase | Google's Mobile and Web App Development Platform개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.firebase.google.com 이 주소에 들어가서 로그인 후 프로젝트를 만들면 되며 앱 생성시 나오는 SDK 값을 저장하면된다. 프로젝트에 firebase 설치"firebas..

Image Lazy LoadingImage Lazy Loading은 페이지 안에 있는 이미지들이 화면에 보여질 필요가 있을 때 로딩일 이루어지도록하는 기법으로 웹사이트 방문 시 바로 로딩을 하지 않고 로딩 시점을 뒤로 미루는 것이다.Image Lazy Loading 적용 시 장점성능 향상웹 사이트의 로딩 시간에서 이점을 주는 점으로 페이지의 초기 로딩 시 필요한 이미지의 수를 줄일 수 있다. 이미지 수를 줄이면 리소스 요청이 줄어들어 다운로드 용량을 적어지며 사용자가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것을 의미한다. 다른 리소스들을 더 빠르게 처리할 수 있게 도와주어 사용자가 페이지를 더 빠르게 볼 수 있도록 돕는다.비용 감소통신 비용은 이미지 전달 또는 다른 전달할 무언가의 전송 ..

nodenode에는 element, text, comment 등 여러 항목이 포함되어 있다부모 nodeparentNode : 부모 노드 중 모든 노드를 반환한다.자식 nodechildNodes : 자식 노드 목록을 NodeList 형태로 반환한다.firstChild : 자식 노드 중, 첫 번째 자식 노드를 반환한다.lastChild : 자식 노드 중, 마지막 자식 노드를 반환한다.형제 nodepreviousSibling : 같은 레벨의 노드 중, 이전 노드를 반환한다.nextSibling : 같은 레벨의 노드 중, 다음 노드를 반환한다.See the Pen node by pminsun (@pminsun) on CodePen. elementelement는 여러 node 타입 중 한 종류로 , , 와 같은..

DOMDOM은 HTML의 태그(요소)들을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹 문서이다. 웹브라우저에서 HTML 파일을 받아 DOM으로 만들면 자바스크립트를 통해 여러 가지 조작이 가능하다.DOM 접근 메서드html 요소들을 이용하기 위해서는 메서드를 통해 특정 태그에 접근해야 한다.document.getElementById("id명") : 해당 id명을 가진 요소 하나를 반환한다.document.querySelector("선택자") : 해당 선택 자를 만족하는 요소 하나를 반환다.document.getElementsByClassName("class명")[순서] : 해당 태그 명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환한다.document.querySele..

Next.js14 정리(1) 이어서…Parallel Requestsimport { Link } from "next/link";export const metadata = { title: "Home",};export const API_URL = "https://.../movies";async function getMovies() { const response = await fetch(API_URL); const json = await response.json(); return json;}export default async function HomePage() { const movies = await getMovies(); return ( {movies.map((movie) => (..

Next.js가 14 버전으로 업그레이드되면서 공부 겸 정리해 보았다. Next.js 최소만 설치할 경우1. npm init -y2. JSON script license -> MIT 로 변경3. npm install react@latest next@latest react-dom@latest4. app 폴더에 page.tsx or page.jsx 만들고5. npm run dev 실행 app 폴더⭐app 폴더 안에 page.jsx 또는 page.tsx 파일이 필수로 있어야 한다.next.js는 실행할 때 app폴더 안의 page라는 파일을 찾는다.npm run dev 실행 시 layout 파일이 없으면 layout.jsx 자동으로 만든다.기존 12,13 버전의 page폴더처럼 app 폴더 안 폴더를 만들고 ..