Bred의 강의는 때려치기로한다.. 왜냐면 clodinary연결이 안되었기 때문이다,, 하지만 part2로 나온 블로그는 만들꺼임

그래서 맛간을 이용해 doc 공부를 해보려고 한다. 어찌저찌 user 프로젝트를 끝냈기 때문에!

공부 순서
1. docs
2. 예제

1. pages

• next.js 에서 페이지는 .js, .jsx, .ts, .tsx 확장자를 export하며, 각 페이지는 파일 이름을 기반으로 하는 경로와 연결된다.

➕ Routing

• pages/about.js아래와 같이 React 구성 요소를 내보내는 것을 생성 하면 에서 액세스할 수 있다.
• 리액트에서는 '/about' 이라고 각각의 페이지에 라우터를 추가해줬지만, next.js의 경우에는 pages 디렉토리안에 라우터 경로에 해당하는 title을 지정해주면 자동적으로 url로 적용된다.

• react router 방식

<Routes>
  	<Route path="/about" component={<About />} />
  </Routes>

• Next.js 방식

//pages/about
export default function About(){
	return <div><This is About Page./div>
}

따로 route 경로를 설정하지 않아도 자동으로 경로가 지정됨. next.js의 강점이라고 할 수 있음.

◻ Dynamic Routing(동적라우팅)

❓ 동적 라우팅이란?
- 내부 네트워크와 외부 네트워크를 연결하기 위해서는 내부에서 외부로 연결하는 통로가 필요하고 이것을 gateway라 한다.시간과 비용 그리고 상황을 고려하여 여러가지 방법으로 목적지에 도달할 수 있는데 네트워크는 이러한 상황을 고려하여 목적지까지의 경로를 알려주는 것을 routing이라고 한다.
- Dynamic routing은 단어에서 풍겨지는 느낌 그대로 동적으로 경로 설정을 해주는 것이다. 네트워크가 변경됨에 따라 최적의 경로가 바뀔 수 있으며 dynamic route는 프로토콜에 따라 네트워크 변경에 맞춰 최적의 경로 값을 알려준다.

❓ 프로토콜이란?
- 프로토콜은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구한다. 이런 형식을 정의하는 규칙의 집합을 프로토콜이라고 한다.

❗ 내가 생각하는 동적라우팅
- 페이지와 네트워크를 연결하는 url이 있고, 연결하는 경로를 라우팅이라고 한다. 네트워크가 변경됨에 따라 동적 라우팅은 달라지며, 프로토콜에 따라 네트워크 변경에 맞게 최적의 경로 값을 알려준다.
- 예를 들어 10명의 데이터를 갖고있는 users data가 있다고 가정하면, next.js, react-dom-router 에서는 id를 url경로로 만들어 동적으로 id에 맞는 data를 가져오도록한다.(브라우져와 id를 갖고 동적으로 네트워킹함.) 이게 동적 라우팅임. 내 생각엔.

✨ Next.js에서의 동적라우팅

◾ next.js 공홈 동적라우팅 예제

• components
  - header.js
• pages
  • index.js
  • about.js
  • [id]
    • index.js
    • [comment].js

◾ index.js => route : '/'

import Header from '../components/header'
const Home = () => (
  <>
    <Header />
    <h1>Hello World!</h1>
  </>
)
export default Home

◾ components/header.js

import Link from 'next/link'
const Header = () => (
  <header>
    <ul>
      <li>
        <Link href="/post/first">
        //query:{id:'first'}
          <a>First Post</a>
        </Link>
      </li>
      <li>
        <Link href="/post/second">
        //query:{id:'second'}
          <a>Second Post</a>
        </Link>
      </li>
    </ul>
  </header>
)
export default Header

◾ pages/[id]/index.js => route : '/first or second'

import { useRouter } from "next/router";
import Link from "next/link";
import Header from "../../../components/header";
const Post = () => {
  const router = useRouter();
  const { id } = router.query;
  return (
    <>
      <Header />
      <h1>Post: {id}</h1>
      // first or second
      <ul>
        <li>
          <Link href="/post/[id]/[comment]" as={`/post/${id}/first-comment`}>
            <a>First comment</a>
          </Link>
        </li>
        <li>
          <Link href="/post/[id]/[comment]" as={`/post/${id}/second-comment`}>
            <a>Second comment</a>
          </Link>
        </li>
      </ul>
    </>
  );
};
export default Post;

출처: https://newind2000.tistory.com/387 [Smart Controller]