메로그

서버 중간에 간섭하고 싶은 경우, Middleware 를 사용하시면 됩니다. 요청, 응답 사이에 간섭하는 것을 middleware 라고 부릅니다. import { NextResponse } from 'next/server' export async function middleware(request) { console.log(request.nextUrl) // 유저가 요청중인 URL console.log(request.cookies) // 유저가 보낸 쿠키 console.log(request.headers) // 유저의 headers 정보 NextResponse.next() // 통과 // NextResponse.redirect() // 다른페이지 이동 // NextResponse.rewrite() // 다..

next 13 전에는 여러가지 설정방법이 있었는데 13 부터는 바뀌었습니다. 1. Nextjs13 에서는 static rendering 이 기본으로 움직입니다. 별도의 fetch 가 없는 페이지의 경우, 유저들한테 그냥 보여줘도 되기 때문에 static rendering 으로 내려주면, html 을 매번 그리지 않아 매우 빠르게 페이지 전송이 가능해집니다. 2. 별도의 fetch 가 있는 경우, dynamic rendering 을 사용하면 됩니다. fetch 사용시 fetch('url', {cache: 'no-store'}) 를 사용해도 되지만, nextjs13 에서는 키워드(force-dynamic)를 제공합니다. // 캐시 사용안하고 실시간 사용한다, fetch('url', {cache: 'no-st..

관계형 데이터베이스와 비관계형 데이터베이스 차이에 대해 간단하게 알고 가겠습니다. 관계형 데이터베이스열과 행이 있는 테이블(표 형식으로)에 데이터를 저장데이터 입출력시 SQL 을 사용해야하고 미리 스키마 정의, 데이터 중복을 피하기 위한 정규화안정적인 데이터 저장, 운영이 필요한 곳에서 사용하면 좋습니다.대표적으로 Oracle, MySQL 이 여기에 속합니다.비관계형 데이터베이스키 값 형식으로 저장함. {key: value}SQL, 스키마 정의, 정규화 필요없음. NoSQL 이라고도 부름분산처리에 유리하기 하기 때문에 대용량 데이터 처리에 좋음.대표적으로 몽고 DB 가 여기에 속합니다.몽고 디비 연동몽고 디비를 연동하기 전에 우선 Nextjs 와 몽고 디비 셋팅을 해줍시다.https://www.mongo..

Nextjs 13 부터는 폴더기반의 페이지 라우팅 방법을 제공합니다. 기존에는 page 폴더 밑에 파일을 만들어서 라우팅을 제공했다면, 이제는 app 폴더 밑에 각 폴더별로 정의함으로써 layout, page 의 정의를 명확하게 할 수 있게 되었다. app 바로 밑에 있는 layout.tsx 는 루트 레이아웃으로 필수이며, 하위 list 폴더에 layout 은 루트 레이아웃 아래에 포함된 layout 으로 만들어지게 된다. 또한, list 아래 page.tsx 를 만들면 {pageUrl}/list 로 접근할 수 있는 라우팅이 만들어지게 된다. import Link from "next/link"; const List = () => { return ( list 페이지 list 밑에 있는 item1 페이지 가..