[Next.js] 제로초 Next.js 동영상 강의 #1 정리 : App Router 이용 X.com 클론코딩

[ 언어·프레임워크/Next.js ]

2023년 11월 05일 23시 30분 25초에 업로드 된 글입니다.

작성자: DandyNow

728x90

이 내용은 유튜버 제로초님의 Next.js 13 App Router를 이용한 X.com 클론코딩 동영상 강의(2023년) 내용을 실습하면서-나름대로-정리한 글이다.

1. Next.js 장점

권한 설정을 App Router 미들웨어로 쉽게 할 수 있게 되었다.
CSR의 경우 클라이언트에서 자바스크립트 코드를 다운로드하여야 한다는 측면에서 성능상 불리할 수 있다. 반면 SSR은 서버에서 완성된 html을 보내주기 때문에 유리한 성능을 낼 수 있다.
하지만 그만큼 서버 부담이 증가하기 때문에 Next.js에서 캐시를 적극적으로 활용한다.

2. 클론코딩

2.1. 클론코딩의 장점

우수한 서비스를 소스로 만드는 것을 경험할 수 있다.
정말 귀찮아서 안하고 싶은 기능을 핑계 대지 않고 경험할 수 있다.
하기 싫어도 억지로 따라해야한다.
따라 만들기 위해 온갖 시도를 하게 되므로 공식문서를 읽게 된다.
공식 문서만 처음부터 끝까지 읽어도 클론 코딩을 문제없이 해낼 수 있다.

2.2. 클론코딩 시 고려할 점

화면구성
주소체계

😉여담 : 백엔드 개발자가 API를 아직 만들어 주지 못했더라도 손 놓고 기다리지 말고 Mock API를 만들어서라도 프론트엔드 작업을 해야 한다.

3. 프로젝트 생성

아래는 npx로 프로젝트 생성할 때의 질문 중 하나인데 모듈을 import 할 때 src 폴더 경로의 기본값은 @인데 다른 것으로 변경할 것인지 묻는 것이다.

√ Would you like to customize the default import alias (@/*)? ... No / Yes

4. 라우팅

X.com은 로그인 전후의 레이아웃이 다르다. Next.js는 Dynamic Routes(대괄호로 표현)을 제공한다. 이 방식의 우선순위는 후 순위이다. 따라서 동일한 폴더명이라면 명시적인 폴더명이 우선순위가 높다.
app폴더에 not-found.tsx를 작성해 두면 라우팅 경로가 없을 경우 호출된다.
app폴더 안에 (afterLogin), (beforeLogin)과 같이 소괄호를 쓰면 주소창에 관여하지 않지만 그룹(Route Groups)을 만들 수 있다.
layout.tsx, page.tsx 안의 함수이름은 중요하지 않다. export default만 잘 적용하면 된다.
페이지 이동시 리렌더링을 해야 한다면 template.tsx를 사용하고 리렌더링이 안되게 하고 싶을 때는 layout.tsx를 사용하면 된다. 예를 들어 사용자의 페이지 이동을 기록할 필요가 있을 때 template.tsx를 사용한다고 보면 된다.

5. UI

5.1. Image 태그

Image 태그를 사용하면 Next.js가 알아서 Image Optimization을 해준다.

5.2. CSS

tailwind : 호불호가 심하고, 가독성 좋지 않다.
Styled Component : 현재는 서버 컴포넌트에서 이슈가 있다.
Emotion : 현재는 Next.js 13에서 잘 작동하지 않는다.
sass : 무리 없이 사용 가능하다.
css module : 간편하게 쓰기 좋다.
vanilla extract : 최근 뜨고 있지만-현재는-Windows에서 이슈가 있다.

5.3. CSS 뷰포트 단위

width, height 속성에 100dvw, 100dvh를 쓰면 100%로 채울 때 모바일에서는 주소창이 존재하기도 하고 그렇지 않기도 하는데 틀어지지 않게 100%로 맞춰준다.

dvh와 dvw(Dynamic Viewport Units)
dvh와 dvw 단위는 사용자가 스크롤하면서 뷰포트 크기가 동적으로 변화하는 경우를 대비한 단위이다. 이 단위는 브라우저 UI의 변화에 따라 실시간으로 업데이트된다.

6. 한 화면에 다른 URL의 페이지를 모달로 보여 주는 UI

X.com의 홈화면에 로그인 UI가 있다. 로그인을 클릭하면 "X 가입하기"라는 모달이 뜬다. 그리고 주소창의 URL도 "https://twitter.com"에서 "https://twitter.com/i/flow/login"로 변경되어 있다. 이 부분을 따라서 구현하려면 Parallel Routes, Intercepting Routes를 이용하면 된다.

6.1. Parallel Routes

두 페이지를 동시에-병렬적으로-보여 주는 기능이다.
모달과 레이아웃은 같은 폴더에 있어야 한다.
@modal 폴더 안에 Parallel Routes의 기본값 default.tsx를 작성해야 한다.
{children}에는 page.tsx, {modal}에는 default.tsx가 들어가게 되는 것이다.

6.2. Intercepting Routes

Intercepting Routes : 경로가 다른 페이지를 한 화면에 렌더링 하는 기능이다.

"(.)경로명"과 같은 방식으로 폴더명을 작성한다.

Parallel Routes와 Intercepting Routes를 콜라보하면 기존 경로의 화면에 모달 경로의 모달을 렌더링 할 수 있다.

다른 페이지에서 링크를 통해 접근할 때 Intercepting Routes가 작동한다.

브라우저에서 URL로 직접 접근하거나 새로고침 하면 일반 라우터가 작동한다.

7. Q&A 등 정리

7.1. 앱라우터에서 URL로 동작하지 않는 것

Route Groups : ()
Parallel Routes : @
Private Folders : _

7.2. 패러렐 라우트 관련

한 화면에 모달이 2개 이상 있어야 하는 경우에는 @modal2...n개 패러렐 라우트를 만들어 적용하면 된다.
패럴렐 라우터는 주소가 해당 화면이므로 주소에 따른 상태를 코드로 연결시킬 필요가 없어서 효율적이다.
패러렐 라우터를 통해 모달로 이동(렌더링)하더라도 기존 로그인 화면의 상태값은 유지된다.
인터셉팅 라우팅은 클라이언트에서 링크를 통해서 시도되어야 제대로 작동한다. 따라서 서버 컴포넌트에서 작동하는 "next/navigation"의 redirect가 아닌 "next/navigation"의 useRouter를 사용해야 한다.

7.3. router.push와 router.replace 차이

localhost:3000/login에서 localhost:3000/i/flow/login으로 리다이렉션한 경우이다. router.push의 경우 아래와 같이 경로 히스토리를 가진다. 이 경우 "뒤로 가기"를 하면 리다이렉션이 무한 반복된다.

localhost:3000 → localhost:3000/login → localhost:3000/i/flow/login

반면 아래의 경우는 router.replace를 사용하였다. localhost:3000/login이 localhost:3000/i/flow/login으로 히스토리가 교체되었다.

localhost:3000 → localhost:3000/i/flow/login

7.4. etc.

서버 컴포넌트는 클라이언트 컴포넌트를 임폴트할 수 있다. 그 반대로 하면 서버 컴포넌트가 클라이언트 컴포넌트로 변경되어 서버 컴포넌트의 이점을 누릴 수 없다.
타입스크립트는 변수, 매개변수, 리턴값에 타입을 부여한다. 가독성이 안 좋은 것이 최대 단점이다!
Next.js의 컴포넌트는 기본적으로 서버 컴포넌트이다. 서버 컴포넌트는 데이터를 다룰 때 장점이 많다.