개요 Next.js 를 위해서는 자동 설치가 있고 공식문서: https://nextjs.org/docs/getting-started/installation#automatic-installation 수동 설치도 있다. 공식문서: https://nextjs.org/docs/getting-started/installation#manual-installation 수동 설치는 이 블로그에 더 자세히 적어놓았으니 참고 : https://x2bee.tistory.com/category/Next.js%20%EA%B0%9C%EB%B0%9C%20%EA%B0%80%EC%9D%B4%EB%93%9C/01.%20Set%20up 여기서는 create-next-app을 이용해 자동 설치를 한다. Setup 1. create app ..

Fetch browser 개발자도구 console에서 fetch를 사용해도 에러가 나지 않는다 → browser native한 javascript 커맨드 fetch('https://jsonplaceholder.typicode.com/todos') 위 주소로 fetch를 보낼 수 있다. fetch는 asynchronos function이므로 const data = fetch('...'); 이런 식으로 바로 사용할 수 없다. reponse의 형태는 json format으로 key에 따옴표가 있음 → javascript object과 표기가 다름. [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false }, { ... promis..

Parallel Routes Parallel Routes는 동시에 또는 조건부로 동일한 레이아웃 내에서 하나 이상의 페이지를 렌더링할 수 있게 해준다. 이는 앱의 매우 동적인 섹션인 대시보드나 소셜 사이트의 피드와 같은 경우에 유용하다. 예를 들어, 대시보드를 고려해보면 병렬 루트를 사용하여 팀 및 분석 페이지를 동시에 렌더링할 수 있다. Parallel Routes는 명명된 슬롯을 사용하여 생성됩니다. 슬롯은 @폴더 관례로 정의된다. 아래 예시는 @team 및 @user 두 개의 슬롯을 정의한다. 슬롯은 공유 부모 레이아웃에 속성(props)으로 전달됩니다. 위의 예에서는 app/layout.js의 컴포넌트가 이제 @team 및 @user 슬롯 속성을 받아들이고, 이를 자식 속성(children pro..

용어 트리(Tree): 계층 구조를 시각화하는 데 사용되는 관례. 예를 들어, 부모 및 자식 컴포넌트로 구성된 컴포넌트 트리, 폴더 구조 등이 있다. 서브트리(Subtree): 새로운 루트(첫 번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부분. 루트(Root): 트리 또는 서브트리의 첫 번째 노드, 즉 루트 레이아웃. 리프(Leaf): 자식이 없는 서브트리의 노드, 즉 URL 경로에서의 마지막 세그먼트. URL 세그먼트: 슬래시로 구분된 URL 경로의 일부입니다. URL 경로: 도메인 뒤에 오는 URL의 일부(세그먼트로 구성) app Router Next.js의 13 버전에서는 React Server Components를 기반으로 한 새로운 App Router가 소개되었다. 이 새로운 라우터는 ..

이번장이 이미지 최적화 마지막장입니다. 이제까지 알아본 내용들을 기초로 비교 & 분석해 보겠습니다. 1. img VS next/image (fill) VS next/image (fix size) 이미지 크기 비교 결과 일반적인 'img' 태그의 이미지는 407kb인 원본 이미지 사이즈만큼 나오는 반면, 'next/image'는 21.3kb 그리고 크기를 고정한 경우에는 5.4kb로 나타났습니다. img next/image - fill next/image - fix size (384/224) Image Size 407kb 21.3kb 5.4kb 2. next/image quality에 따른 비교 quality 옵션에 따른 비교에서는 기본적인 옵션은 유지한 채로, quality가 변함에 따라 이미지의 파일 ..

이번장은 앞서 이미지 최적화를 다룬 1장 2장 3장에 이어지는 내용입니다. 이번에 다룰 내용은 배경이미지 적용방법 두 가지입니다. 이 프로젝트는 기본적으로 tailwindcss 프레임워크를 활용하고 있습니다. 1. tailwindcss 프레임워크만을 활용한 배경이미지 적용 이 코드에서는 div 요소에 tailwind 클래스를 직접 적용하여 배경이미지를 적용하였습니다. // area 확인을 위한 border 및 높이너비 고정 bg-[url('/images/955535072f0c-10.png')] : tailwind 클래스 코드, bg-[URL]로 작성하여 이미지를 가져와 배치합니다. 이 밖에 background에 영향을 주는 클래스는 아래 링크에서 추가로 확인할 수 있습니다. Background Size ..