#5.0 Introduction

들어가기 전에..

• 이번 색션에서는 프로젝트 UI를 클론 코딩 해 보면서 이전 색션에서 배웠던 Tailwind CSS 를 복습해본다.
  • 가짜 데이터를 가지고 UI 만을 구현해본다.
  • Tailwind 를 더욱 복습 할 필요가 없다면, 건너 뛰어도 된다.
    • Tailwind CSS 를 복습 하는 것이 목적이기 때문에, 꼭 강의와 똑같은 디자인을 따라하지 않아도 된다.
    • 기본구조 HTML 작성 작업은 지루하기 때문에 노마드 코더에서 제공해 준다.
    • 앞으로 진행 될 다음 색션에서의 학습도 이번 색션에서 만들어 놓은 기본 구조 위에서 진행되기 때문에, 전체 프로젝트가 어떻게 구성되어 있는지 파악 할 수 있다.
  • Tailwind에 대해서 배웠던 내용만 복습 하는 것이 아니라, Tailwind 에 대한 더욱 유용한 것들을 배워 볼 것이다.
• 색션의 마무리 단계에서는
  • 모바일 버전에 맞게 레이아웃을 고쳐볼 것이다.
  • 반복되는 UI 들을 컴포넌트로 리팩토링 해 볼 것이다.
• 이번 색션이 UI를 다루는 마지막 색션이고, 다음 색션부터는 back-end 등 다른 내용들을 다루게 될 것이다.

참고

• 23년 11월 기준, 해당 강의는 next 12 버전으로 녹화 되었으나, 해당 연도의 실제 next js 최신 버전은 13버전이다.
  • 따라서 강의 내용과 현재 next 13버전과 아래의 차이점 등이 존재 한다.
• 강의를 쉽게 따라하기 위해서는 12버전으로 다운그레이 하여 설치하는게 마땅하나, 어차피 최신 13버전의 공부 또한 추가로 하여야 하기 때문에 실습은 13버전으로 진행 하도록 한다..
  • 나는 이미 #2 색션 까지 13버전으로 진행하였다..

라우트 설정

• 13 버전에서는 pages 디렉토리가 없어지고 app 디렉토리가 베이스 디렉토리가 되었다.
  • Next.js 13 버전은 기존 12 버전에서 사용한 파일 이름 라우팅 방식이 아니라 온전히 폴더 방식 라우팅을 사용 한다.
    • 12 버전은 /pages/test.tsx 파일이 /test 라우팅이 되었다면
    • 이번에 나온 13 버전부터는 /app/test/page.tsx로 해야한다.
      • pages 폴더가 아니라 page.tsx 파일을 작성해야 한다.
      • 기존 웹 표준인 index.tsx를 사용하지 않고 page.tsx로 해야 한다.
  • layout.tsx 파일
    • app 폴더 밑에 있는 layout.tsx 파일은 기존의 pages 폴더 밑에 있는 _app.tsx 파일과 _document.tsx 파일의 역할을 한다.
    • Next.js 13부터는 app폴더 밑에는 layout.tsx파일이 한개가 꼭 존재 해야 한다.

use client

• 13버전의 app 디렉토리 안의 모든 컴포넌트는 기본적으로 서버사이드렌더링 방식이다.

• 주의할 점은 아래의 상황에서는 반드시 클라이언트 컴포넌트를 사용해야 한다.

  • useState, useEffect 훅을 사용하는 경우
  • 특정 브라우저 API에 의존성이 있는 경우
  • 특정 Event Listeners를 추가하는 경우

  → 사용법은 "use client"를 최상단에 적어준다.

  **'use client';**
  
  import { useState } from 'react';
  
  export default function Counter() {
  ...
  

참고

Next.js 13 업데이트 내용 총 정리

[Next.js] 13 폴더 구조 및 특징 - 프론트엔드개발