[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 10일차

oweaj·2024년 6월 7일
next.jsudemy스나이퍼 팩토리웅진씽크빅유데미프로젝트 캠프
0

udemy next.js 프로젝트 캠프

목록 보기
9/11
post-thumbnail

보일러 플레이트

프로그래밍이나 법률 문서에서 반복적으로 사용되는 표준화된 코드나 텍스트를 의미한다. 즉 기본적으로 사용할 수 있는 템플릿이나 초기 설정을 말하고 이로 인해 반복적인 설정 작업을 줄여 빠르게 초기 설정을 할 수 있다.

// npx create-next-app@latest

✔ Would you like to use TypeScript? … No / Yes   --> yes
✔ Would you like to use ESLint? … No / Yes  --> yes
✔ Would you like to use Tailwind CSS? … No / Yes --> yes
✔ Would you like to use `src/` directory? … No / Yes  --> no
✔ Would you like to use App Router? (recommended) … No / Yes --> yes
? Would you like to customize the default import alias (@/*)? › No / Yes. --> no

App Router

  • page : 라우트의 경로를 지정할 때 사용하는 페이지
app/
├── blog/
│   └── page.tsx --- /blog  // blog 컴포넌트
├── about/
│   └── page.tsx --- /about  // about 컴포넌트
  • layout : 각 라우트 경로마다 공통된 레이아웃을 처리
// auth 폴더 안에 login폴더, register폴더와 layout 파일이 형성

auth/
├── login/
│   └── page.tsx --- /login  // login 컴포넌트
├── register/
│   └── page.tsx --- /register  // register 컴포넌트
└── layout.tsx


// layout.tsx
export default function layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <h3>auth Header</h3> 
      {children}
      <h3>auth Footer</h3>
    </>
  );
}

=> 라우트 경로에서 가장 가까운 곳에 위치한 layout 파일을 찾고 해당 layout은 login 컴포넌트와 register 컴포넌트를 children으로 props을 받는다.
  • 기본 : 루트에 app 폴더 생성하면 자동으로 라우트 생성
 app/
├── login/
│   └── page.tsx --- /login
├── register/
│   └── page.tsx --- /register
  • 중첩 : 특정 폴더 안에 새로운 폴더 중첩하는 형태로 중첩 경로 지정 가능
app/
└── auth/
    ├── page.tsx - /login
    └── register/
        └── -page.tsx -- /register
  • 다이나믹 경로 : 동적 경로 사용하면 특정 세그먼트가 동적으로 변경되는 경로 지정할 수 있음
app/
└── blog/
    ├── page.tsx - /blog
    └── [id]/
        └── page.tsx -- /blog/1 or /blog/2 or /blog/3...
  • 중첩 다이나믹 경로 : 동적 경로 중첩 가능
app/
└── blog/
    ├── page.tsx - /blog
    └── [id]/
        ├── page.tsx -- /blog/1 or /blog/2 or /blog/3...
        └── comment/
            └── [reviewId]/
                └── page.tsx. -- /blog/2/comment/1
  • 포괄적 경로 : 특정 경로 이하의 모든 경로를 포괄적으로 허용하는 라우트 지정하는 방식
app/
└── docs/
    └── [...slug]/
        └── page.tsx - /docs/1 or /docs/1/api or /docs/1/api/1 등등 모든 경로 커버 가능
const Docs = ({
  params,
}: {
  params: {
    slug: string[];
  };
}) => {
  console.log(params); // /docs 이후의 경로가 배열로 들어감 ex_/docs/1/user/1 -> [1, user, 1]
  return (
    <>
      <h1>Docs Component</h1>
    </>
  );
};
export default Docs;
  • 그룹 : 소괄호로 생성한 폴더 안에 넣어두면 소괄호 경로에 인식되지 않음
app
  (home)
    page.tsx --- /
  (auth)
    login
      page.tsx --- /login
    register
      page.tsx --- /register
  • 프라이빗 폴더 : 폴더에 언더스코어를 붙이면 라우팅 통해 접근할 방법 없음
app
  _utils
    page.tsx - 접근 불가
    form-date.ts
  • not-found : 페이지를 찾을 수 없을 때 Next.js에서 not-found.tsx 파일로 제어할 수 있고 가장 최상위에 있는 경로에 생성
// not-found.tsx

const NotFound = () => {
  return (
    <>
      <h1>요청하신 페이지를 찾을 수 없습니다.</h1>
    </>
  );
};
export default NotFound;

라우팅

  • Link 컴포넌트 라우팅
import Link from "next/link";
<Link href={"/products"}>Products</Link>
  • useRouter() 라우팅
'use client';
import { useRouter } from 'next/navigation';

export default function Blog(params: any) {
  const router = useRouter();
  
return (
  <>
    <h1>Blog Component</h1>
    <button onClick={() => router.back()}>Go Back</button>  // 현재 페이지 기준으로 이전으로 이동 (뒤로 가기)
    <button onClick={() => router.forward()}>Go Forward</button>  // 현재 페이지 기준으로 다음으로 이동 (앞으로 가기)
    <button onClick={() => router.push('/about')}>Go to About</button>  // url로 이동 후 브라우저 기록에 항목 추가
    <button onClick={() => router.replace('/about')}>Replace to About</button>  // url로 이동 후 브라우저 기록 덮음
    <button onClick={() => router.refresh()}>Refresh Page</button>  // 현재 페이지 다시 로드 
   </>
  );
}

Hydration

  • 서버에서 렌더링된 HTML 페이지와 번들링 된 js 파일을 클라이언트에게 보내면 클라이언트에서 HTML 코드와 react 코드를 서로 매칭시키는 과정

❓ 2번 렌더링 ❓

서버에서 렌더링된 HTML 페이지가 클라이언트에게 전송되고 클라이언트는 서버에서 전송된 HTML 페이지를 받아 브라우저에 렌더링을 하면서 2번의 렌더링이 발생한다. 이 과정에서 비효율적으로 생각할 수 있다.

하지만

  • 서버에서 렌더링 된 HTML은 가벼운 파일로써 사용자에게 빠르게 로드되는 웹 페이지를 제공할 수 있다.

  • 클라이언트에서 js 파일이 로드되고 하이드레이션 과정이 시작될때 react는 이미 서버에서 렌더링된 HTML을 사용하여 DOM 요소와 매칭하므로 다시 웹페이지를 그리지 않는다.

폰트 최적화

// global.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.roboto {
  font-family: 'Roboto', sans-serif;
}
// page.tsx

import { Roboto } from 'next/font/google';
const roboto = Roboto({ weight: ['400', '700'], subsets: ['latin'] });

export default function Main() {
  return (
    <>
      <h1 className="roboto">Main page Component</h1>  // 폰트 최적화 적용x 
      <h1 className={roboto.className}>Main page Component</h1>  // 폰트 최적화 적용o
    </>
  );
}

1) 폰트 최적화 차이 확인

위 코드 처럼 비교를 위해 각각 h1태그를 띄어줘고 개발자도구 네트워크 탭에서 캐시 사용 중지로 설정을 하고 새로고침을 했을경우 아래와 같이 폰트 최적화 한 태그와 반대로 폰트 최적화 안 한 첫 번째 h1태그는 아래와 같이 깜박임을 보면서 차이를 확인할 수 있다.

2) Lighthouse 폰트 최적화의 성능 차이 비교

  • 위 코드에서 폰트 최적화 안 한 첫 번째 h1 태그 성능
  • 위 코드에서 폰트 최적화 한 두 번째 h1 태그 성능

Lighthouse로 폰트 최적화 한 태그와 안 한 태그의 차이를 h1 태그로 각각 비교해본 결과로
LCP(가장 큰 콘텐츠가 포함된 페인트. 즉 가장 큰 콘텐츠를 렌더링 하는데 걸리는 시간)을 보면 폰트 최적화를 안 한 결과는 1.76초, 폰트 최적화를 한 결과는 0.49초로 콘텐츠 요소가 렌더링 되는 시간의 차이를 볼 수 있고 성능 점수 또한 91점 과 99점의 차이를 비교해 볼 수 있었다.

그래서 정리 하자면

  • 폰트 최적화를 안 한 경우

    • 서버에서 HTML을 생성할 때 기본 폰트로 적용되며 클라이언트는 받은 HTML 페이지를 렌더링하는 동안 해당 폰트 파일을 다운로드해 적용한다.

    • 클라이언트가 페이지를 받아온 후에 해당 폰트 파일을 다운로드해 적용하기 때문에 위에서 비교한 내용 처럼 초기 콘텐츠 렌더링하는 시간이 더 걸리면서 새로고침 시 깜박임이 발생한다.

  • 폰트 최적화를 한 경우

    • 서버에서 HTML을 생성할 때 이미 폰트가 적용된 HTML 페이지를 클라이언트가 받아 렌더링 한다.

    • 이미 폰트가 적용되어 있기 때문에 별도의 폰트 파일을 다운로드 할 필요가 없어 초기 렌더링 시간이 폰트 최적화 안 한 경우보다 빠르며 깜박임이 없다.

🖇️ 후기

전에 기초부분만 맛만 본 Next.js로써 자세히 학습하지 않았지만 이번 강의를 통해서 기초를 다지면서 실습을 통해 많이 얻어갔다. Hydration에 대해 이해하려고 하면서 렌더링 과정 부분에도 다시 한번 학습이 필요한걸 깨달았고 자료와 강의를 통해 부족한 부분을 알아가고 채워가면서 익숙해져본다

profile
oweaj
데굴데굴데굴데굴데굴
이전 포스트

[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 9일차

다음 포스트

[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 11일차

0개의 댓글