나디아 성장 일기

Framer MotionReact (선언형) 애니메이션 라이브러리  https://euid.notion.site/Framer-Motion-15d75899a1bc47e7978fa63926069afa  Framer Motion | NotionReact (선언형) 애니메이션 라이브러리euid.notion.site

Next.js 초기 셋팅하기 1. Node.js 프로젝트 초기화 npm init -y   2. 프로젝트의 오픈 소스 라이선스를 MIT 라이선스로 설정 // package.json{ "name": "nextjs-bestseller", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "MIT"}  3. Next.js & React & React-dom 설치❗Next.js는 TypeScript 지원을 내장하고 있어서 .tsx 파일을 만들..

prefecth />: 사용자의 뷰포트에 Link 컴포넌트가 들어가면, 해당 링크에 설정된 페이지와 데이터를 미리 백그라운드에서 로드한다.Next.js는 Link 된 라우트(href에 지정된 라우트)와 해당 데이터를 백그라운드에서 미리 prefetch하고 load한다. 프로덕션 환경에서만 활성화된다. (개발 중에는 ❌) 정적 경로 vs 동적 경로정적 경로(pages 폴더에 있는 일반 파일) ➡ 자동 prefetch동적 경로([id].js 같은 파일) ➡ 설정에 따라 달라짐export default function Movie({ title, id, poster_path }: IMovieProps) { const router = useRouter(); const onClick = () => { ro..

Error Handling error.js: 중첩된 경로에서 발생할 수 있는 오류를 처리할 수 있다. error.js 파일을 추가하면 Next.js가 자동으로 경로에서 발생하는 오류를 감지하고, 그 오류에 대한 fallback UI를 제공한다. 중첩된 경로의 페이지나 컴포넌트에서 발생한 오류에 적절한 UI를 표시한다.error.js 파일을 통해 React의 Error Boundary를 자동으로 생성하고, 그 안에서 발생하는 오류를 잡아낸다.import React from 'react';export default function ErrorPage({ error }) { console.error('에러 내용:', error); return ( 문제가 발생했습니다! {error...

: React에서 비동기 데이터를 로딩할 때 로딩 UI를 처리하는 컴포넌트 데이터가 준비되지 않은 개별 컴포넌트나 데이터에 로딩 UI를 표시할 수 있도록 하여, 비동기 작업을 유연하게 처리할 수 있게 한다.Page 단위 로딩 ➡ loading.tsx서버 컴포넌트 단위 로딩 ➡    fallback 속성 : 로딩 중일 때 보여줄 UI를 지정하는 속성로딩 중...}>    예시import { Suspense } from "react";import MovieInfo from "../../../../components/movie-info";import MovieVideos from "../../../../components/movie-videos";export default async function Mo..

Next.js의 fetch API 확장Next.js는 기본 fetch() API를 확장하여 서버의 각 요청이 자체 영구적인 캐싱 설정을 할 수 있도록 한다. 서버 측에서 데이터를 가져올 때 캐싱 전략을 설정하여 성능을 최적화하고 중복된 네트워크 요청을 피할 수 있다. export const API_URL = "https://nomad-movies.nomadcoders.workers.dev/movies";async function getMovies() { const response = await fetch(API_URL); const json = await response.json(); return json;}export default async function HomePage() { const..

loading.js : 콘텐츠가 완전히 로드되기 전에 사용자에게 로딩 중임을 알리는 UI를 제공한다.loading.js 파일을 해당 페이지나 라우트에 위치시켜면, Next.js가 자동으로 이 파일을 감지하고 로딩 상태에서 loading.js에 정의된 UI를 표시한다.로딩 표시기나 표지 사진, 제목 등 화면의 작지만 의미 있는 부분을 미리 렌더링할 수 있다.특징즉각적인 로딩 UIroute 세그먼트의 콘텐츠가 로드되는 동안 서버에서 즉시 로딩 상태를 표시할 수 있다.즉시 로딩 상태: 탐색 시 즉시 표시되는 대체 UIReact Suspense 활용렌더링이 완료되면 새 콘텐츠가 자동으로 교체된다.   Routing: Loading UI and Streaming | Next.jsBuilt on top of Sus..

Dynamic Routes (동적 세그먼트) : URL 경로의 일부를 동적으로 처리할 수 있는 기능 URL에서 변하는 부분을 변수로 처리하고, 이를 컴포넌트에서 props로 받아서 렌더링할 수 있다.    App Router 사용법 (app 디렉토리) 1. 파일명이나 폴더명을 [대괄호]로 묶어 생성한다. 특정 영화의 세부 정보를 보여주는 페이지를 만들기 위해 URL에서 영화 ID를 받아와야 할 경우, pages 폴더 내에서 /movie/[id].tsx와 같이 파일을 생성한다.   2. props로 URL 파라미터 (:id)를 받아온다.URL 경로 /movie/123에서 123은 id 파라미터로 처리된다.export default function MovieDetail({ params: { id } }) {..

Metadata Next.js에는 향상된 SEO를 위해 애플리케이션 메타데이터(HTML 내의 정보)를 정의할 수 있는 메타데이터 API가 있다.page나 layout만 메타 데이터를 내보낼 수 있다.각 파일에서 설정한 메타데이터는 중첩된 파일들에 의해 병합된다.Client Component에서는 metadata를 정의할 수 없다❌metadata는 페이지가 서버에서 렌더링될 때 에 포함되어야 하는데, Client Component는 HTML을 이미 받은 후에 동작하기 때문이다.템플릿과 기본값을 설정할 수 있다.동적 제목 생성에 사용되는 자리 표시자 %s를 사용한다.// app/layout.tsxexport const metadata: Metadata = { title: { template: "%s..

Route groups : URL 경로에 영향을 미치지 않고도 폴더 구조를 관리할 수 있다. 폴더 명을 (괄호)로 묶어줘야 한다.  ➡ 그래야 page 파일을 해당 폴더에 옮겨도 URL을 바꾸지 않는다. (폴더가 링크에 포함되지 않음) ➡ 괄호 폴더는 URL에 영향을 미치지 않는다.app/(home)/page.js ➡ URL에서 /home 경로로 포함되지 않는다.  Routing: Route Groups | Next.jsRoute Groups can be used to partition your Next.js application into different sections.nextjs.org