진심 코딩

[NextJS] 20260405 병렬라우팅, 캐시, metadata

magpiebros 2026. 4. 5. 08:02
반응형

더이상 관리자로써의 길이 맞지는 않는것 같다.

개발자로 다시 시작하려면 이 조직을 나가야지만 가능 할 것 같다.

 

새벽에 일어나서 글을 써놓은게 다 날라갔다. 

한숨 자고 글을 다시 작성하기 전에 큰 주제만 적어놓고 자려고 한다...

 

metadata

- 메타데이터 설정은 app/layout.js에서 설정을 한다.

export const metadata = {
  title: '모든 음식',
  description: '맛난 음식 보기',
};

 

단, 특정 페이지에 메타데이터를 넣기 위해서는 각 메뉴별 page.js에서 설정할수 있다.

방식은 동일하다.

 

캐시

- NextJS는 캐시를 사용한다.

npm run build

 

위 명령어를 사용하여 빌드하면, .next 폴더가 생성되고 해당 폴더내에 배포용 소스가 생성된다.

따라서 실시간 화면 변경이 되지 않는 현상이 발생할 수 있다.

이럴때 캐시를 사용하지 않도록 하는 명령어는 다음과 같다.

 

  // revalidatePath은 특정 경로의 캐시를 무효화하여, 다음 요청 시 최신 데이터를 가져오도록 합니다.
 
  revalidatePath('/meals');

 

 

public폴더를 사용한 데이터 적재는 운영환경에서는 불가하다고 한다.

이럴때는 아마존을 쓰라고 하는데, 방법은 추후 더 고민해보겠다.

 

병렬라우팅

- 한화면에 두개 이상의 화면을 그려야 할때 사용된다.

> archive

  >> @archive

    >>> [date]

      >>>> page.js

    page.js

  >> @latest

     default.js

layout.js

 

한화면에 두개이상을 그리기 위해서는 해당 페이지 폴더에 @를 붙여서 만들어야 하고, 해당 페이지는 layout.js에 작성하면된다.

특이한건, 각 화면들을 엮어줄때는 폴더까지 동일하게 맞춰주어야 하는데, 이걸 대신해 줄수 있는것이 default.js 파일이다.

 

일단 오늘 새벽에 공부했던 것들이 다 없어져서 다시 작성한다. 

 

 

 

반응형