본문 바로가기

전체 글

Next.js 13 - loading.tsx , error.tsx, 이미지, 폰트

Computer Programming/Next 2023. 8. 2. Next.js 13 - loading.tsx , error.tsx, 이미지, 폰트 1. loading.tsx layout.tsx와 같은 위치의 폴더 안에 loading.tsx를 정의해주면 해당하는 return 값이 로딩중에 보여지게 된다. export default function PageLoading() { return loading...; } layout은 보여지고, 그 layout의 children에 해당하는 부분에서 로딩중일 때 실행된다. 정적인 데이터이므로 pre-fetched html에 포함되어있다. -> SSG에서는 확인할 수 없으며 의미도 없다. 즉 loading 이라는 것은 dynamic하게 SSR이나 CSR을 사용할 때 의미가 있음 loading.tsx는 한 라우트당 1개씩 지정할 수 있기 때문에, 데이터들 내에서 loading...들을 보여주고싶다면 segments..

Next.js 13 - Route Handler

Computer Programming/Next 2023. 8. 2. Next.js 13 - Route Handler v12의 API Routes가 개선됨 -> Route Hanlder api 함수 1개 당 목적 별로 (GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS). 나눠서 처리할 수 있음 https://nextjs.org/docs/app/building-your-application/routing/route-handlers Routing: Route Handlers | Next.js Using App Router Features available in /app nextjs.org app/api/products/route.ts import { getProducts } from "@/api/products/products"; import { NextResponse } from "next..

Next.js - fetch를 이용한 SSG, ISR, SSR, CSR 구현 옵션

Computer Programming/Next 2023. 8. 1. Next.js - fetch를 이용한 SSG, ISR, SSR, CSR 구현 옵션 1. SSG - 비동기 데이터 fetching data / products.json에 데이터가 있다고 가정하고 [ { "id": "1", "name": "청바지", "price": "10000" }, { "id": "2", "name": "티셔츠", "price": "13000" }, ...objects ] api 폴더의 products.ts 모듈을 만들어 데이터를 가져온다. import path from "path"; import { promises as fs } from "fs"; export type Product = { id: string; name: string; price: string; }; export async function getProducts(): Promise { const fil..

Next.js - Server Component/ Client Components

Computer Programming/Next 2023. 8. 1. Next.js - Server Component/ Client Components **v12가 아닌 v13을 선택한 이유 - v12에서는 페이지 단위로 서버/클라이언트를 구분했는데, 앱이 복잡해질수록 필요한 클라이언트 소스코드가 많아지니 결국 사용자에게 필요한 JS 번들링이 커지고, 앱의 성능면에도 영향을 준다. - 이번 프로젝트에서는 실시간 데이터를 가져오는 오픈 API 사용 + 사용자가 글을 자주 올리는 커뮤니티 + 레이아웃 등의 각각 성격이 매우 다른 컴포넌트들이 한 페이지에 동시에 존재하는 경우가 있다. - 기존 v12의 페이지 단위 렌더링 방식보다는 컴포넌트 단위로 다른 렌더링방식을 가지는 v13이 더 최적화에 도움이 될 것이라고 생각한다. 1. Server Components vs Client Components - Server Components v13에 도입된 app 폴..

Next.js - Metadata

Computer Programming/Next 2023. 8. 1. Next.js - Metadata Metadata https://nextjs.org/docs/app/api-reference/file-conventions/metadata - 제일 상위 폴더의 layout에서 metadata 정의 하위 폴더의 layout에서 metadata를 정의하면 폴더별로 다른 metadata의 title과 desc를 가질 수 있다. 만약 지정하지 않으면 최상위 폴더의 metadata를 덮어쓰게 된다. export const metadata = { title: { default: "나영의 블로그", template: "나영의 블로그 | %s" }, description: "나영이의 블로그입니다", }; // main layout - dynamic한 metadata를 정의할 수도 있다. export async func..

Next.js - File Convention :not-found, layout(+Link tag), loading,

Computer Programming/Next 2023. 8. 1. Next.js - File Convention :not-found, layout(+Link tag), loading, 1. not-found.tsx 최상위 또는 해당 폴더에서 라우트를 찾을 수 없다면 notFound() 함수가 호출되고 이에 따라 해당하는 위치에서 not-found.tsx가 실행됨. 따라서 [...post] 를 하지 않은 상태에서 products/s/s 이렇게 두번 더 연결하면 최상위 폴더의 not-found로 연결됨. export default function PostPage({ params }: Props) { if (params.post === "nothing") { notFound(); } return {params.post} Post; } 또는 특정한 상황에서 notFound()를 직접 호출해도 됨 => 페이지별로 다른 not found UI를 보여줄 수 있음 2. layout.js - head..

Next.js - Static/Dynamic Routing

Computer Programming/Next 2023. 8. 1. Next.js - Static/Dynamic Routing Next 13에서의 라우팅 -> app 내에서 폴더 각각 page.tsx 페이지를 만들면 되고, 중첩되면 중첩 폴더로 사용하면 됨 1. Static Routing build를 통해 SSG인지, SSR인지 구분할 수 있음 여기서는 모든 라우팅 페이지가 SSG로 되어있다 dev(개발중) -> build (SSG 페이지 HTML 생성) -> start 빌드 후 각 페이지별로 이미 렌더링 된 SSG 이므로 빠르게 로딩 됨 2. Dynamic Routing (SSR) 빌드 시 람다 표시 SSR type Props = { params: { post: string; }; }; export default function PostPage({ params }: Props) { return {params.post} Post..

Next.js 장점과 렌더링 종류

Computer Programming/Next 2023. 8. 1. Next.js 장점과 렌더링 종류 1. Next.js 사용 장점 - 풀스택, 파일 베이스 라우팅, SEO, 이미지/폰트 최적화, 서버사이드 렌더링/하이브리드 렌더링 - 라이브러리인 리액트 + 프레임워크인 Next로 리액트만으로는 힘든것들을 가능하게 해줌 2. CSR의 단점 - TTV가 길다 (FCP - First Contentful Paint) : REACT 소스코드와 UI를 가지고 있는 JS 를 초기에 모두 다운로드받고 -> DOM 생성 - 자바스크립트 활성화가 필수 - SEO 최적화 👎 - 클라이언트에서 모든 코드 다운로드 & 실행 -> 보안에 취약함 (데이터 받아오는 방식, 키 등 노출) - CDN(Content Delivery Network)에 캐시가 안됨 * SSG와 SSR은 모두 렌더링하는 주체가 서버이지만, 언제 렌더링하는지..

프로젝트 회고 🌊 2023. 7. 28. 오늘의집 클론코딩 🏠 1. React-Query - 리액트 쿼리가 버전 업그레이드 되면서 @tanstack/react-query로 이름이 바뀜. 그걸로 설치해주면 된다. 1) useQuery, useMutation 커스텀 훅 //usePostQuery.js export const PostQueryKey = "post"; //게시물 가져오기 export const usePostQuery = (postId) => { return useQuery([PostQueryKey, postId], () => getPost(postId), { enabled: !!postId, staleTime: 3000, keepPreviousData: true, }); }; //게시물 수정 export const useUpdatePostMutation =..

이전 1 2 3 4 5 ··· 13 다음

Archives

Recent Posts

Tags

더보기

Calendar

티스토리툴바