[Next.js] 인프런 강의 "Next + React Query로 SNS 서비스 만들기" 정리

섹션 1

📌 타입 무시

아래 코드를 추가하면 타입스크립트에서 타입을 무시한다.

// @ts-ignore

 

📌 모듈  CSS

모듈 CSS의 경우 page.module.css라는 파일이 있다면 module이라는 키워드 때문에 클래스명이 다른 모듈과 동일하다 하더라도 겹치지 않는다.

CSS의 dvw, dvh는 모바일의 경우 페이지에서 주소창이 생기기도 사라지기도 하는데 거기에 맞게 페이지의 사이즈를 맞춰주는 역할을 한다.

width: 100dvw;
height: 100dvh;

 

📌 children의 타입

layout.tsx에서 children의 타입은 ReactNode이다.

// layout.tsx
import { ReactNode } from "react";

type Props = {
  children: ReactNode;
  modal: ReactNode;
};

export default function RootLayout({ children, modal }: Props) {}

 

📌 패러렐 라우터

패러렐 라우터인 @modal 폴더에 default.tsx를 넣어준다. 모달을 띄우지 않을 때 화면에 아무것도 그리지 않기 위해서이다. 이 파일이 없으면 404 에러가 발생한다.

// default.tsx
export default function Default() {
  return null;
}

@modal이 n개 필요하다면 패러렐 라우터를 더 늘려줄 수 있다.

 

📌 인터셉팅 라우터

(beforeLogin)/@modal/(.)i/flow/login

위 경로는 인터셉팅 라우트가 포함된 경로로서 beforeLogin 그룹 내 패러렐 라우트 modal이 있고 그 안에 인터셉팅 라우트 (.)i/flow/login가 존재하는 형태이다. 패러렐 라우트는 한 페이지에 2개 이상의 경로의 페이지를 렌더링 한다.

(beforeLogin)/i/flow/login

위 경로는 인터셉팅 라우트가 가로채기 하지 않았을 때의 경로이다. 주소창에서 직접 접근하거나 페이지 새로고침하게 되면 접근가능하나 Link로 접근하는 경우에는 인터셉팅 당한다.

---

2024.01.23

인터셉팅 라우터와 router.replace를 사용해 쿠폰 발급 기능을 구현하였다. URL로 직접 쿠폰 페이지에 접근하거나, 쿠폰을 발급받은 이후 브라우저의 뒤로 가기 기능을 이용해 재발급받는 것을 막고자 했다.

 

📌 서버 컴포넌트에서 클라이언트 컴포넌트 임폴트 OK

서버 컴포넌트에서는 클라이언트 컴포넌트를 임폴트할 수 있다. 만약 클라이언트 컴포넌트가 서버 컴포넌트를 임폴트하면 서버 컴포넌트가 클라이언트 컴포넌트로 바뀐다.

 

📌 Private Folders

폴더명을 시작할 때 "_"를 붙이면 Private Folders가 되고- Route Groups, Parallel Routes처럼-주소창에 뜨지 않는다. 폴더를 정리할 때 사용한다.

 

📌 Private Folders

클라이언트에서 리다이렉션(Link, useRouter)해야 인터셉팅이 작동한다. 반면 서버 컴포넌트에서 리다이렉션은 인터셉팅 작동하지 않는다. 

실습 예제에서 "로그인 버튼"을 누르면 주소창이 아래와 같이 순서대로 바뀌면서 login 모달이 뜬다.

http://localhost:3000/     // 여기에서 로그인 버튼 클릭하면
http://localhost:3000/login     // 아래 URL로 리다이렉션이 일어나는 주소. 아주 잠깐 보여짐
http://localhost:3000/i/flow/login     // 이 URL에서 모달이 뜸

http://localhost:3000/login 페이지에서 useRouter의 router.replace("/i/flow/login")에 의해 리다이렉션이 작동하기 때문에 이러한 구현이 가능하다. 이때 router.push가 아닌 router.replace를 하는 이유는 뒤로 가기 할 경우 router.push의 경우 http://localhost:3000/login라는 히스토리를 기억하고 있기 때문에 http://localhost:3000로 가지 못하고 http://localhost:3000/login과 http://localhost:3000/i/flow/login을 무한 반복해서 페이지 전환하게 되는 현상을 피하기 위해서이다.

http://localhost:3000/login를 잠깐 들렀다가 http://localhost:3000/i/flow/login로 페이지 이동하는데 http://localhost:3000/login도 http://localhost:3000/와 같은 화면이 뜰 수 있도록 똑같은 html 코드를 작성해야 한다. 그래야 http://localhost:3000/의 메인 화면을 http://localhost:3000/login에서도 볼 수 있다.