FACTS(사실, 객관) : 내가 한 일
Next.js
https://github.com/play93/next-routing
환경설정이 적은 개발환경, 유용한 기법제공, 쉬운 배포
AppRouter / PageRouter
AppRouter (최신)
- 13버전부터 새롭게 도입
- app폴더 밑에 폴더명을 기반으로 자동 라우팅이됨
- 새로운 데이터 페칭 메서드 사용가능
- 서버 컴포넌트와 클라이언트 컴포넌트 명시적 구분가능
- 유연하지만 초기설정이 복잡
PageRouter
- 12버전까지 사용되던 방식
- pages폴더에 원하는 페이지의 파일 이름을 둠
- 간단하고 직관적
- 기존 프로젝트에 적합
next.js는 리액트가 확장된 (확장팩)개념 이다 라고 생각하면 됨.
첫번째 노드를 루트라고 함
next.js에서는
src 폴더가 있다면 => src가 루트
app폴더만 있다면 => app폴더가 루트
src안에 app 디렉토리가 있다면 => src를 app의 루트로 생각
더이상 children이 없는 마지막 노드를 Leaf(리프)라고 함
정적인 라우팅에서 하나의 폴더는 하나의 segment를 담당한다.
페이지이동
기본 a태그보다는 Link태그 사용
뷰포트에 링크가 나타나는 순간 페이지의 코드와 데이터를 미리 가져오는 프리페칭을 지원해서 링크를 클릭하기 전에 데이터를 미리 로드함으로써 사용자가 링크를 클릭했을 때 즉시 페이지를 볼 수 있게 함.
뷰포트가 링크에 나타나는 순간? => 사용자가 웹 페이지를 스크롤, 이동하면서 해당 링크가 실제로 화면에 보이기 시작하는 순간
마우스가 링크위에 mouseover되는 순간 네트워크 요청을 하나? => 마우스 오버보다 먼저 화면에 보이기만 하면 프리페칭을 시작.
Link태그는 rout 사이에 client-side-navigation을 지원
페이지 전환시 빠른 사용자 경험(UX)을 제공
router는 로직이 있어서 로직 이후에 실행되야 할 때 써야함
브라우저에 히스토리를 쌓거나 맨 위에 있는걸 pop시키거나 변경하거나 하는 형태의 동작이 가능
router.push => 히스토리 스택 추가함 (이동)
router.replace => 히스토리를 대체할 때 사용. 맨 위에 있는 히스토리를 새로운 url로 추가. 뒤로가기를 했을 때 이전의 페이지가 아닌 그 전으로 넘어감.
router.back => 뒤로가기. 히스토리스택을 한단꼐 뒤로 이동시킴
router.reload => 페이지를 최신 상태로 업데이트 할 때 사용. next.js 에서 가지고 있는 router캐시를 날려서 데이터만 새로 불러오게끔해 조금 더 향상된 사용자 경험 제공.
layout.tsx는 동일 레이아웃에서 이동할 때 한 번만 렌더링 되지만
template.tsx는 동일 레이아웃이어도 네비게이션을 할 때 재 렌더링 됨
페이지 이동하는 태그가 Link태그가 아닌 a태그인 경우엔 layout.tsx를 사용하더라도 페이지 이동 시 한 번 더 렌더링됨
NotFound => 기본 제공됨
커스텀하려면 루트 디렉토리에 not-found.tsx 를 만들어서 원하는 대로 꾸며야 함.
next.js에서는 원하는 페이지에 필요한 metadata만 넣을 수 있다는 장점.
정적인 메타데이터
export const metadata: Metadata = {
title: "안녕하세요 Next App 입니다.",
description: "Generated by create next app",
};
동적인 메타데이터
// 동적인 메타데이터
type Props = {
params: {
id: string;
};
};
export const generateMetadata = ({ params }: Props) => {
return {
title: "안녕하세요 About2 Page 입니다",
description: "Generated by create next app",
};
};
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
과제는 언제하지..?
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지