next.js, gemini AI를 이용한 한국인 캐릭터 생성기 - 2

 

오늘은 작성한 폴더에 코드를 작성해봅시다.

그 전에, 우리는 지난 번 선택했던 app router가 어떤 건지에 대해서 알아야 합니다. 

next.js엔 현재 두가지의 방식이 있습니다. page router와 app router 인데요. 

page Router는 next가 13이 되기 전까지 사용했던 router로 우리가 흔히 알고 있는 알고 있는 라우터입니다.

/pages
	/index.ts  -> www.tistory.com
    /list
    	/index.ts -> www.tistory.com/list
    /login
    	/index.ts -> www.tistory.com/login

 

page router는 보이기에 직관적으로 보여서 편하지만, 앱의 규모가 커지면 유지보수가 힘들어지는 단점을 가지고 있었습니다.

이에 next는 이를 보완할 방법을 찾았고, 그 방법이 바로 app router 입니다.

 

app router도 page router와 방식은 비슷하지만 몇몇 차이점이 있습니다. 

app router는 react 18에서 부터 나온 개념인 server Components 기반으로 만들어진 router로 client와 server를 명확하게 구분하여 개발할 수 있습니다.

 

말로 하면 이해가 어려운데 예제를 좀 봅시다.

/app
    /page.tsx -> www.tistory.com
    /list
    	/page.tsx -> www.tistory.com/list
    /login
    	/page.tsx -> www.tistory.com/login

 

쉽게 보면 pages -> app, index.ts -> page.tsx가 됐다고 보면 되겠죠. 하지만 app router는 이게 다가 아닙니다.

 

방금 말했듯이 app router는 server component를 기반으로 합니다. server component는 앱을 클라이언트에서 렌더링 하는 게 아니라 의도에 따라 일부 컴포넌트에만 렌더링을 할 수 있도록 정할 수 있는 컴포넌트입니다.

nextjs offical docs

위 그림에서 Navbar, Sidebar,Main은 interactive하지 않은 정적인 컴포넌트이기 때문에 server component에서 렌더링 할 수 있습니다. 반면 Search, Button은 interactive한 ui이기 때문에 client Component로 렌더링 합니다. 

좀 더 구체적으로 보자면 Server Component는 백엔드 리소스에 접근하거나 데이터 페칭을 통하여 자식에 있는 client Component와 통신하고, client Component에서는 액티비티한 애니메이션 및 상태값을 통한 이벤트 제어등을 담당하는거죠.

 

nextjs offical docs

둘의 자세한 쓰임새는 위 이미지를 참조해주세요.

기본적으로 app router는 server component를 default입니다. client component를 사용하고 싶다면 use client를 선언해야합니다.

import { Suspense } from "react";
import Client from "./client";
import Loader from "@/components/loader";

export default function Main() {
  return (
    <div>
      <Suspense fallback={<Loader />}>
        <Client />
      </Suspense>
    </div>
  );
}
// main/page.tsx

"use client";

import { useState } from "react";

export default function Client() {
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  return (
   <div> </div>
  );
}

// main/page.tsx

 

모양새가 좀 빠지긴 하는데, 이렇게 만든 걸 어쩌겠습니까.

 

client component는 'use client'를 사용 안하면 에러가 뜹니다. 저는 사실 이  'user client'를 언제 사용해야 할지 잘 몰라서 갈팡질팡 했었는데, 제가 보고 있는 인강에서 언제 사용하는지 명확하게 알려주더군요.

 

'그냥 에러가 뜨면 쓰세요.'

여러분도 그러세요. server component는 요즘 react 진영의 중요한 기술이니만큼, 앞으로 더 디테일하게 설명할 예정입니다. 

 

vercel에서는 app router를 더 시각적으로 명료하게 볼 수 있도록, 페이지를 만들었습니다. 자세한 사항은 아래를 참조해주세요.

https://app-router.vercel.app/

Next.js App Router Playground

 

이야기를 하다보니 꽤 많이 썼네요. 코드를 쓸려고 했는데, 저만 썼습니다. 다음 시간엔 정말로 같이 코드를 타이핑하는 시간을 갖도록 하겠습니다. 

다음 게시글은 좀 더 빨리 올릴게요.