📚 진행한 공부

• Routing

📚 Routing

📖 01. 첫 installation : react와는 어떤 것이 다른지 특징 살펴보기

(1) 설치하기

npx create-next-app@latest
or
yarn create next-app

특별한 것이 없다면 위와 같이 세팅하기

(2) 기본 파일
Next.js에서는 layout.tsx, page.tsx이 두 컴포넌트를 가장 많이 다루게 될 것임

1. layout.tsx
   

• 리액트 컴포넌트임
• children을 갖고 있음

2. page.tsx
   얘 또한 리액트 컴포넌트임

3. tailwind.config.ts / package.json 등 여러 파일이 세팅돼있음

4. build 후 start를 해줘야 함
   yarn build -> yarn start

5. src > app > page.tsx 파일이 UI를 핸들링하는 주 파일이다

---

📖 02. 라우팅을 이해하기 위한 주요 용어

(1) Tree 관련

• Tree

  • 계층 구조를 시각적으로 잘 보기 위한 규칙(위➡️아래). DOM Tree와 비슷

• Subtree

  • tree의 한 부분
  • root부터 시작해서 leaf들에 이르기까지의 범위

• Root

  • Tree 또는 Subtree의 첫 번째 노드
  • root layout 같은 것이 됨

• Leaf

  • children이 더이상 없는 node를 말함

---

📖 03. 파일(폴더) 기반 라우팅

(1) page.tsx
이미 다뤄봤던 대로 page.tsx는 main ui가 표시될 곳임.

밑에서도 다루겠지만, 폴더를 만들어가면서 우리는 routing이 자동 구현되는 것을 보게 될 것.

이 과정에서 해당 폴더의 page.tsx 파일이 읽혀지게 됨

(2) static routing
React에서 Routing을 구현하기 위해 우리는 react-router-dom 패키지를 설치하고 세팅했음.
그러나 next.jsx에서는 그렇게 할 필요가 없음

src > app 폴더 밑에 test 폴더를 새로 만들고 그 안에 page.tsx 파일을 만들어 줌

// src>app>test>page.tsx
import React from "react";

const TestPage = () => {
  return (
    <div>
      <h1>Test Page</h1>
      <p>안녕하세요! 테스트 페이지입니다</p>
    </div>
  );
};

export default TestPage;

브라우저에서 접근하면?

자동으로 Routing이 됨.

(3) dynimic routing
React에선 <Route path="/products/:id" element={<Product />} />
이런 식으로 했지만 Next.js에서는 폴더 일므을 대괄호로 감싸면 됨. 이렇게 하면 패턴에 일치하는 모든 경로를 페이지로 연결하게 됨

예를 들어 app/posts/[id]/page.tsx 파일의 경우
/posts1, /posts/2 등 경로에 대해 동적으로 페이지 생성

Next.js 공식 문서에서는 이렇게 표현하고 있음

각 폴더는 URL segment에 대응되는 route임. 중첩 라우팅을 위해서는 폴더로 감싸주면 됨

직접 작성을 해본 코드는 이러하다

// app>test>[id]>page.tsx
import React from "react";

const TestDetailPage = ({
  params,
}: {
  params: {
    id: string;
  };
}) => {
  return <div>Detail 페이지 : {params.id}</div>;
};

export default TestDetailPage;

잘 작동하는 것을 확인할 수 있음

(4) route groups
폴더만 만들면 routing에 포함이 되는데, 그러고 싶지 않을 때는 간단하게 다음과 같이 처리할 수 있음

직접 해본 결과

잘 나옴

📖04. 특별한 파일들

Next.jsx에서는 Routing을 폴더 기반(Nested Folders)로 구현을 하고 있음. 이 과정에서 라우트에 대한 특정 처리를 위해 생성되는 여러 special files가 있다.

예를 들어 특정 경로 하위에 있는 routing은 모두 공통 layout을 적용하고 싶다던지, 특정 컴포넌트가 로딩 중일 때, 오류가 발생했을 때 보여주고 싶은 UI가 있다던지 등

(1) layout
layout 파일은 어떤 segment와 그의 자식 node에 있는 요소들이 공통적으로 적용받게 할 UI를 정의함.
자식 node에 있는 요소들이 공통 적용을 받아야 하기 때문에 반드시 children prop이 존재해야 함

동일 layout 안에서 다른 경로를 계속해서 왔다갔다 할 때 리렌더링이 일어나지 않는다. 따라서 headers, footers, sidebars 처럼 유저가 경로를 마음껏 탐색하고 다녀도 굳이 바뀔 필요가 없는 경우에 유용함 ⬅️ 이후 배울 template과의 주요 차이

✅ Next.js를 사용할 땐 이렇게 하면 됨

1. 특정 segment 이하의 route에서 적용받을 layout UI를 해당 폴더 안에 만듬
   

2. children을 포함시켜서 공통 UI를 만듬

   export default function DashboardLayout({
   children, // will be a page or nested layout
   }: {
   children: React.ReactNode
   }) {
   return (
       <section>
         {/* Include shared UI here e.g. a header or sidebar */}
        <nav></nav>
   
        {children}
      </section>
    )
   }

3. 우린 만든 적이 없지만, Next.js 프로젝트를 생성하고 나면 이미 root 경로에 layout.tsx 파일이 존재함

해당 코드에서 8번째 줄 title의 내용을 바꾸면 사이트 제목이 바뀜

그리고 해당 return 문에서 스타일을 적용하면 모든 컴포넌트가 영향을 받음

(2) template
template 파일은 layout과 유사한 컴포넌트임.
그래서 이 두 요소는 늘 비교대상이 됨.
가장 두드러지는 차이는

상태를 유지하는가? 리렌더링이 일어나는가?

경로 전반에 걸쳐서 상태가 유지되는 layout과 달리 template은 라우팅을 탐색할 때 각 하위 항목에 대해 새 인스턴스를 만듬. 즉, 유저 입장에서 동일한 Template을 공유하는 경로 사이를 왔다갔다 할 때 DOM 요소가 다시 생성된다는 것을 의미함

(2)-1. use-case

1. template을 통한 페이지 open animation
   • 페이지 간 전환 시 애니메이션을 계속해서 주고 싶을 때
   • layout으로 만들어 놓으면, 최초 렌더링 시에만 animation이 적용되고 끝남

2. useEffect, useState에 의존하는 기능
   • layout : console.log가 최초 한 번만 호출
   • template : 페이지 이동 시 마다 계속 호출

결론 : 특정한 이유가 있지 않는 한, layout을 사용하자

(3) not-found
next.js에서는 우리에게 익숙한 404 not found 페이지를 별도 설정하지 않아도 기본 스타일이 된 not found 페이지 제공, 그러나 맘에 들지 않으면 직접 만들 수 있음

// src>app>not-found.tsx
import React from "react";

const NotFound = () => {
  return <div>존재하지 않는 페이지입니다.</div>;
};

export default NotFound;

(4) metadata와 SEO
Next.js는 기본적으로 MetaData를 갖고 있음

Next.js는 향상된 SEO를 제공하기 위해 많은 정보를 metadata 객체 형태로 지원하고 있음

react에서는 vite를 쓰던 CRA를 쓰던 index.html 파일이 존재했고, 이 파일의 head 태그에 우리가 SEO 향상을 위해 여러 meta, link 태그 등 메타데이터를 작성했음

(4)-1. SEO에 대해 자세하게 알아보기

SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트나 웹페이지를 검색 엔진에서 더 높은 순위에 노출시키기 위한 방법임. 간단하게 말해서, SEO는 검색 결과에서 웹사이트가 더 위에 나타나도록 만드는 여러 기술과 전략

예를 들어 img 태그 내의 'alt' 속성은 상당히 중요

<img src="../assets/sample.jpg" />
<img src="../assets/sample.jpg" alt="sample image" />

1. 검색 엔진에 이미지 내용 설명하기: alt 텍스트는 검색 엔진에 이미지의 내용과 맥락을 설명해 줌. 텍스트를 통해 이미지가 무엇에 관한 것인지 이해하고, 관련 검색 쿼리에 대한 결과로 해당 이미지를 더 정확하게 랭킹할 수 있음

2. 접근성 향상: alt 텍스트는 시각 장애가 있는 사용자가 웹사이트의 이미지 콘텐츠를 이해하는 데 도움을 줌. 이러한 접근성 개선은 검색 엔진에 의해 긍정적인 신호로 해석되어 전반적인 사이트의 SEO 점수를 향상시킬 수 있음

Next.js에서는 Config-based MetaData를 활용할 수 있음

1. static
   • page.tsx 또는 layout.tsx 어디든지

        export const metadata: Metadata = {
     	title: "Sparta Next App",
     	description: "This is awesome Website",
     }

     를 삽입해놓기만 하면 적용이 됨
     
   • 여기서 기억해야 할 것
     • metadata in page.tsx: 해당 page.tsx 컴포넌트에만 적용
     • metadata in layout.tsx: 해당 layout의 하위 요소에 모두 적용

2. dynamic

   • dynamic route를 갖고 있는 route에서 동적으로 변경되는 params를 기반으로 metadata를 변경하고 싶을 땐 generateMetadata function을 사용

     
     import React from "react";
     
     type Props = {
     params: {
      id: string;
     };
     };
     
     export function generateMetadata({ params }: Props) {
     return {
      title: `Detail 페이지 : ${params.id}`,
      description: `Detail 페이지 : ${params.id}`,
     };
     }
     
     const TestDetailPage = ({ params }: Props) => {
     return <div>Detail 페이지 : {params.id}</div>;
     };
     
     export default TestDetailPage;

📖 05. 페이지 이동과 관련된 기능 목록

(1) Link

Next.js는 <Link>라는 리액트 컴포넌트를 제공. <Link> 태그는 기본 HTML의 a태그를 확장한 개념

1. Link 태그는 prefetching을 지원

• Next.js의 >Link> 컴포넌트는 뷰포트에 링크가 나타나는 순간 해당 페이지의 코드와 데이터를 미리 가져오는 프리페칭 기능을 지원함. 사용자가 링크를 클릭했을 때 거의 즉시 페이지를 볼 수 있음

2. Link 태그는 Route 사이에 client-side navigation을 지원

• <Link> 컴포넌트는 브라우저가 새 페이지를 로드하기 위해 서버에 요청을 보내는 대신, 클라이언트 측에서 페이지를 바꿔주기 때문에 페이지 전환 시 매우 빠른 사용자 경험(UX)를 제공
• 페이지의 HTML을 서버에서 다시 가져올 필요 없이, 필요한 JSON 데이터만 서버로부터 가져와서 클라이언트에서 페이지를 재구성하여 렌더링

(2) useRouter

1. a태그 vs Link vs Router

• a태그

  • 순수 HTML 요소
  • 완전한 새 페이지로 전환을 원할 때 : 페이지는 완전히 새로고침
  • 빈 화면 보일 수 있음 ➡️ UX가 좋지 않음
  • Next.js에선 거의 안 씀

• Link태그

  • Link 태그는 a태그를 만들어내기 때문에 SEO가 유리
  • 클릭 즉시 페이지 이동

• Router(useRouter)

  useRouter를 사용할 땐 항상 코드 최상단에 "use client"를 삽입해야 함

  • a태그를 알아차릴 수 없기 때문에 크롤러 입장에서는 해당 요소가 '이동을 원한다' 라는 것을 알 수 없음 ➡️ SEO 불리
  • 대부분 onClick 같은 이벤트 핸들러에서 사용
  • 클릭 후 로직의 순서에 따라 실행 ➡️ 즉시 이동 안됨

2. router.push (replace, back, reload)

history stack을 알아야 함. 실제로 history stack은 한 개라고 이해해야 함

• history stack은 방문자의 페이지 방문 순서를 기록하는 시스템
• 페이지 이동 ➡️ URL이 history stack에 추가
• EX: 뒤로 가기, 앞으로 가기 했을 때 이동할 수 있는 이유

1. router.push

   • 새로운 URL을 히스토리 스택에 추가
   • 사용자가 페이지를 이동하면 URL이 히스토리 스택의 맨 위에 쌓임
   • 뒤로 가기 버튼 클릭 시, 스택에서 가장 최근에 추가된 URL로부터 이전 페이지로 돌아감

2. router.replace

   • 현재 URL을 히스토리 스택에서 새로운 URL로 대체
   • 뒤로 가기 클릭 시 이전 페이지로 이동하지만, 교체된 페이지로는 돌아갈 수 없음
   • 현재 페이지를 히스토리에서 완전히 대체

3. router.back

   • 사용자를 히스토리 스택에서 한 단계 뒤로 이동
   • 뒤로 가기 버튼 클릭한 것과 같은 효과

4. router.reload

   • 페이지를 새로고침
   • 히스토리 스택에 영향을 미치지 않음. 페이지의 데이터를 최신 상태로 업데이트 하고 싶을 때 사용