Navigation Bar

네비게이션 바를 어케 만들까?

1. "Components"라는 폴더를 생성한다.
2. "navigator.jsx" 파일을 components폴더에 생성한다.
3. 파일안에 리스트를 작성한다. (이건뭐 맘대로)

import Link from "next/link";
export default function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link href="/">Home</Link></li>
        <li><Link href="/about-us">About Us</Link></li>
      </ul>
    </nav>
  );
}

더이상 <a> 테그를 사용하지 않음. Link기능을 import해서 사용해줄꺼임. 다음 app-page에 네이게이션을 import해준다.<Navigation /> 욜케

import Navigation from "../components/navigation";
export default function HelloNext() {
  return (
    <h1>
      <Navigation />
    </h1>

}

[결과창ㅎ]

유저가 어디페이지에 있는지 간단한 인디케이터(indicator)만들어보기.

next js 에는 우리가 url의 어디에 위치하고 있는지 알려주는 hook이 있음 router까지 접근 할 수 있게 도와주기도 함. "usePathname"이라는 hook임(훅이뭐임? 물으면 React에서는 useState, useEffect같은것들 기능적인것들이라고 보면됨)

import Link from "next/link";
import { usePathname } from "next/navigation";
export default function Navigation() {
  const path = usePathname();
  console.log(path);
  return (
    <nav>
      <ul>
        <li>
          <Link href="/">Home</Link>
          {path === "/" ? "🔥" : null}
        </li>
        <li>
          <Link href="/about-us">About Us</Link>
          {path === "/about-us" ? "🔥" : null}
        </li>
      </ul>
    </nav>
  );
}

코드를 작성했을때, 페이지에 에러가 뜬다.

에러를 보면 "it only works in a client component"
"none of its parents are marked with "use client".
usePathname 은 client compoenet에서만 동작한다는게 뭔솔!!!!?
Learn more link

client component 랑 server component에 대해 알아보쟈.

그전에, next js 가 앱을 render하는 방식을 먼저 알아야한다.
(여기서 rendering 이란 react component(code)를 가져와서 브라우저가 이해할 수 있는 html로 변환하는 작업을 말한다)

react js의 render 방식

은 client side rendering이다.(=사용자의 브라우저에서 rendering작업을 한다는 뜻이다.) 우선 빈 html를 먼저 띄우고 (html을 먼저 실행시키고) js를 실행시켜 html에 컴포넌트를 추가하는방식이다. 증명하는 방법은 개발자 도구를켜서 소스를 보면된다. 페이지 로딩이 걸릴때, html에 요소가 없다가 생기는걸 볼 수 있다. 그래도 신뢰가 안간다면 개발자도구 열고 Sources탭으로 들어간다음 Run command실행시켜서 javascript를 비활성화 시켜보쟈(disable javascript). 그럼 페이지가 영구적으로 비어있는걸 확인할 수 있다. 이말은 즉, 유저인터넷이 느리면 js파일을 다운받아야 볼 수 있는 유저 입장에서는 빈화면만 계속 볼 수 도 있다는 말.. ㅎ seo(search engine optimization = 써치엔진 like Google!)측면에서 봐도 client side rendering방식은 맞지않다. 광고를 할때 빈페이지를 보여주지 않는게 좋기 때문!

next js의 render 방식

은 server side render 이 default며 backend에서 먼저 일어난다. html을 먼저 보여주기전에 js를 백엔에서 실행시켜 html을 채워준다음 유저에게 보내준다. 이것도 개발자도구에 소스코드를 보면 html이 채워져 있는걸 볼 수 있다. 즉, 유저가 빈공간을 볼일은 없다.