[Next] 섹션1 기획자와 디자이너가 기획서를 던져주었다.

기획자와 디자이너가 기획서를 던져주었다.

고민

1. 화면을 어떻게 만들 것인가?

2. 주소 체계 확인

 

Next.js

public // next 서버에서 접근할 수 있게 해줌
src // 작성하면 될 폴더
ㄴapp // 라우팅 담당 폴더
  ㄴ...

 

 

01. 라우트 그룹 만들기

RootLayout

페이지를 넘나들어도 바뀌지 않는 Layout 부분이다.

next13에 도입된 RootLayout은 그 내부에 page.tsx가 {children}로 전달된다.

 

02. App 디렉토리는 주소창과 연결된다.

App 디렉토리는 주소창과 연결되는 폴더이다.

- localhost:3000/compose

- localhost:3000/explore

- localhost:3000/home

 

이런식의 접근이 가능하게 해준다.

 

 

 

 

 

03. slug [ ]

URL의 일부로 사용되는 문자열을 가리키며, 라우팅 및 동적 경로 생성에 사용된다.

slug는 일반적으로 웹 페이지의 고유한 식별자로 사용되고, 콘텐츠를 식별하고 접근할 수 있는 역할을 한다.

 

바뀌는 아이디나 이름 등.. 계속해서 폴더를 생성할 수 없기에 '[ ]' 를 사용한다.

slug 동적 라우팅

 

04. ( ) 같은 레이아웃을 둔다.

같은 폴더로 묶어주면, 주소에는 관여하지 않지만 그룹으로 만들 수 있다.

이들은 같은 레이아웃을 둔다.

 

* 폴더 주소 app/(afterLogin)/home 이어도, 브라우저에서는 /home이다.

 

05. template.tsx, Link, Image, redirect

* template 와 layout 의 차이점?

layout : 넘나들 때 리렌더링 안되게 하려면 layout 

template : 리렌더링 되게 하려면 template ( 거의 쓰지 않는다. 만약 페이지 넘나들 때 기록을 해야한다면?)
-> 리렌더링보다는 매번 새롭게 마운팅되는 느낌

둘은 공존할 수 없다. 

* Link

a tag는 새로고침 됨
꼭 Link 태그 써야 한다.

 

* images

[next img](https://nextjs.org/docs/app/building-your-application/optimizing/images)
넥스트에서 이미지 최적화 해줌.

 

* redirect

next에서 제공해줌
원래 i/flow/login인데, login으로 들어갔다가 redirect되서 i/flow/login으로 감
그래서 login/page.tsx에서 redirect 해줌

 

* CSS modules

• tailwind -> 호불호가 심하고 가독성 안 좋다
• Styled Component (Emotion)
  • Emotion은 next13과 안 맞다
  • styled는 Server Component SSR 문제가 있음
• css module -> 같은 폴더에 css파일 넣고 간단하게 사용가능
  • 전역 적용은 .module을 파일명에 안 붙이기
  • 특정 페이지 적용은 page.module.css 로 적용하면 해당 페이지에만 적용가능
• sass -> scss 친구
• scss -> 갠적으로 선호
• Vanilla extract -> 윈도우 개발환경에서 문제 있음

 

 

06. URL과는 관련이 없는 명명법

• () 그룹 폴더
• @folder 페러렐 라우트
• _component private foler

주소창에 나오지 않는다!

 

 

07. redirect는 서버컴포넌트에서 동작한다.

서버에서 리다이렉트를 하면 인터셉팅이 제대로 되지 않는다.

클라이언트에서 링크를 통해 리다이렉트 해야 인터셉팅 된다.

 

서버 쪽 에서 redirect 하는 법

import { redirect } from "next/navigation";

export default function Login() {
  redirect("/i/flow/login");
}

 

클라 쪽 에서 redirect 하는 법

"use client";

import Main from "@/app/(beforeLogin)/_component/Main";
import { useRouter } from "next/navigation";

export default function Login() {
  const router = useRouter();
  router.replace("i/flow/login");
  return <Main />;
}

• router.push -> 히스토리를 남긴다.
  • localhost:3001 -push-> localhost:3001/login -push-> localhost:3001/i/flow/login
  • 뒤로가기 시, 히스토리 순서에 따라!
• router.replace  -> 히스토리를 남기지 않아 router.replace가 되어진 곳을 건너뛴다.
  • localhost:3001 -> localhost:3001/login -replace-> localhost:3001/i/flow/login
  • localhost:3001/i/flow/login 에서 뒤로가기 시, 히스토리가 남지 않기에 중간을 건너뛰어 localhost:3001 로 간다.