free islet

Gemini API Playground (Next.js)

깨비아빠0 — Tue, 6 Feb 2024 14:43:02 +0900

Gemini API 테스트에서 테스트한 Gemini API를 Next.js 홈페이지 만들기에서 만든 사이트에 연동하였다.

Vercel AI SDK 연동

Vercel AI SDK에서 제공하는 useChat 훅을 이용하면 Gemini API 테스트 시 직접 구현했던 message 히스토리 관리를 편하게 할 수 있다.

다음은 Google 연동 매뉴얼을 따라서 간단하게 gemini 챗봇을 연동해 본 화면과 주요 소스코드이다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

'use client'

import { useChat } from 'ai/react'

export default function GeminiChatbotPage() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({ api: '/api/gemini/chat' })

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input value={input} placeholder="Say something..." onChange={handleInputChange} />
      </form>
    </div>
  )
}

Next.js Chatbot 템플릿 검토

Next.js Chatbot 템플릿을 검토해 보았다.

먼저 데모 페이지를 살펴보았는데, Chatbot Demo의 모습은 다음과 같다.

프롬프트에 질문을 입력하고 전송하면, 아래와 같이 답변이 노출된다.

다음으로 github 페이지에서 코드를 살펴보았다.

Chat, ChatList, ChatMessage 등의 컴포넌트를 통해 주요 챗봇 UI가 구현되었고, Vercel AI SDK, react-markdown, react-syntax-highlighter 등의 패키지를 사용하고 있었다.

주요 코드들을 불필요한 내용만 정리하여 Chat 컴포넌트 등으로 옮겨 왔다.

챗봇 연동 완성

다음과 같이 챗봇 연동을 완성하였다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

SVG path 스케일링 (for responsive object-path)

깨비아빠0 — Wed, 31 Jan 2024 11:47:37 +0900

CSS path 애니메이션

CSS에서 offset-path와 offset-distance 속성을 사용하여 path 애니메이션을 만들 수 있다.

offset-path 속성은 SVG path 엘리먼트의 d 속성에 사용하는 path 문자열을 path 함수에 넣어 설정한다.

offset-distance 속성은 "0%", "100%"와 같이 퍼센트를 입력한다.

다음 코드는 Framer motion 라이브러리를 통해 offset-distance를 점차 증가시켜서 path 애니메이션을 만드는 간략한 예시이다.

<motion.div
  style={{
    offsetPath: path(
      "M 239 17 C 142 17 48.5 103 48.5 213.5 C 48.5 324 126 408 244 408 ..."
    );
  }}
  initial={{ offsetDistance: "0%" }}
  animate={{ offsetDistance: "100%" }}
/>

이런 방식으로 만든 path 애니메이션 예제를 code sandbox에서 찾을 수 있었다.

offset-path 스케일링 이슈

offset-path를 설정할 때 스케일을 지정할 수 없는 문제가 있다.

위 예제에서 보면 애니메이션 되는 크기가 고정되어 있으며, 크기를 바꾸려 해도 (그려지는 SVG path의 크기는 바꿀 수 있지만) 애니메이션 경로의 크기는 변경할 수 없다.

path 스케일링 구현

offset-path 스케일링이 불가능한 문제를 해결하기 위해 path 문자열을 직접 파싱하여 스케일링하는 코드를 stack overflow에서 찾을 수 있었다.

위 코드를 정리하여 PathScaler 클래스를 만들었으며, 다음과 같이 사용하도록 했다.

const pathScaler = new PathScaler(path, {원래 width}, {원래 height});
const scaledPath = pathScaler.getScaledPath({변환할 width}, {변환할 height})

PathScaler 클래스의 전체 코드는 github에서 확인 가능하다.

Responsive path 애니메이션

PathScaler를 활용하여 앞서 발견한 예제를 responsive하게 수정하였다.

아래와 같이 창 크기에 맞춰서 SVG path와 흰 상자의 애니메이션 경로(offset-path)가 스케일링된다.

(전체 코드는 code sandbox에서 확인할 수 있다.)

다음은 실제 홈페이지에서 path 애니메이션을 사용한 모습이다.
첫 화면에서 스크롤을 내리면, 비행기가 경로를 따라 스크롤 위치만큼 이동하는 모습을 볼 수 있다.

Lucia 인증 연동 (Next.js, PlanetScale, Kysely, OAuth)

깨비아빠0 — Wed, 10 Jan 2024 16:23:51 +0900

Next.js 프로젝트 스택 검토 (2023) 대로 홈페이지를 다시 만들기 위한 세 번째 단계로 Lucia를 사용하여 인증을 구현했다.

GitHub OAuth App 생성

GitHub OAuth 연동을 위해 https://github.com/settings/developers에서 OAuth app을 생성한다. (Create a GitHub OAuth app 참고)

Application name, Homepage URL을 적절히 채우고, Authorization callback URL에는 "http://localhost:3000/login/github/callback"을 입력한다.

app의 Client ID와 Secret을 다음과 같이 .env.local에 추가한다.

GITHUB_CLIENT_ID="..."
GITHUB_CLIENT_SECRET="..."

참고로 방금 생성한 app은 로컬 개발 시 사용하고, 웹 배포에 사용할 app은 별도로 생성하여 URL을 주소에 맞게 입력해야 한다. Client ID와 Secret도 배포할 플랫폼의 환경변수로 따로 추가한다.

DB 테이블 생성

인증에 필요한 테이블들을 생성한다.

PlanetScale + Kysely 데이터베이스 연동 (Next.js)에서 연동한 PlanetScale에 접속하여 다음 쿼리를 실행하였다.

CREATE TABLE auth_user (
    id VARCHAR(15) NOT NULL PRIMARY KEY,
    username VARCHAR(255) NOT NULL, # optional
    INDEX username (username)
);

CREATE TABLE user_key (
    id VARCHAR(255) NOT NULL PRIMARY KEY,
    user_id VARCHAR(15) NOT NULL,
    hashed_password VARCHAR(255),
    FOREIGN KEY (user_id) REFERENCES auth_user(id)
);

CREATE TABLE user_session (
    id VARCHAR(127) NOT NULL PRIMARY KEY,
    user_id VARCHAR(15) NOT NULL,
    active_expires BIGINT UNSIGNED NOT NULL,
    idle_expires BIGINT UNSIGNED NOT NULL,
    FOREIGN KEY (user_id) REFERENCES auth_user(id)
);

https://lucia-auth.com/database-adapters/planetscale-serverless/#mysql-schema,
https://lucia-auth.com/database-adapters/mysql2/#mysql-schema 참고

테이블 이름은 임의로 변경 가능하다.
auth_user 테이블은 id 컬럼만 필수이고, 추가로 필요한 사용자 정보를 임의로 추가할 수 있다.
FOREIGN KEY는 필수는 아니다. PlanetScale은 현재 FOREIGN KEY가 베타 중이므로, FOREIGN KEY를 사용하려면 설정에서 활성화시켜야 한다.

패키지 설치

다음 명령으로 패키지를 설치한다. PlanetScale DB와 OAuth를 위한 추가 패키지도 함께 설치한다.

npm install lucia @lucia-auth/adapter-mysql @lucia-auth/oauth

인증 모듈

auth/lucia.ts 파일을 추가한다. 아래 코드는 다음 내용을 포함하고 있다.

lucia 모듈 (auth)
github OAuth 인증 모듈 (githubAuth)
session 조회 도움 함수 (getPageSession)

import { lucia } from "lucia"
import { nextjs_future } from "lucia/middleware"
import { github } from "@lucia-auth/oauth/providers"
import { planetscale } from "@lucia-auth/adapter-mysql"
import { connect } from "@planetscale/database"
import { dbConfig } from "../db/kysely"
import { cache } from "react"
import * as context from "next/headers"

export const auth = lucia({
  adapter: planetscale(
    connect(dbConfig),
    {
      user: "auth_user",
      key: "user_key",
      session: "user_session",
    },
  ),
  middleware: nextjs_future(),
  env: process.env.NODE_ENV === "development" ? "DEV" : "PROD",
  sessionCookie: {
    expires: false,
  },

  getUserAttributes: (data) => {
    return {
      githubUsername: data.username
    }
  },
})

export type Auth = typeof auth

export const githubAuth = github(
  auth,
  {
    clientId: process.env.GITHUB_CLIENT_ID ?? "",
    clientSecret: process.env.GITHUB_CLIENT_SECRET ?? "",
    scope: undefined,
  }
)

export const getPageSession = cache(() => {
  const authRequest = auth.handleRequest("GET", context)
  return authRequest.validate()
})

PlanetScale connect에 사용된 dbConfig는 DB 접속 정보를 담고 있는 object로서, Kysely 연동 코드에서 가져와서 사용한다.

Sign in 페이지

app/login/page.tsx 파일에 Sign in 페이지 코드를 추가한다.

이미 로그인된 경우에는 root로 redirect시키고, 아니면 GitHub Sign in 링크를 보여준다.

import { getPageSession } from "@/auth/lucia"
import { redirect } from "next/navigation"

const Page = async () => {
  const session = await getPageSession()
  if (session) redirect("/")
  
  return (
    <>
      <h1>Sign in</h1>
      <a href="/login/github">Sign in with GitHub</a>
    </>
  )
}

export default Page

인증 handler

app/login/github/route.ts에 GitHub 인증 route handler를 추가한다.

/login/github GET 요청 시 GitHub 인증 URL이 생성되어 사용자 인증에 사용된다.

import { githubAuth } from "@/auth/lucia"
import * as context from "next/headers"
import type { NextRequest } from "next/server"

export const GET = async (request: NextRequest) => {
  const [url, state] = await githubAuth.getAuthorizationUrl()

  // store state
  context.cookies().set("github_oauth_state", state, {
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
    path: "/",
    maxAge: 60 * 60
  })

  return new Response(null, {
    status: 302,
    headers: {
      Location: url.toString()
    }
  })
};

인증 callback

app/login/github/callback/route.ts에 인증 callback 구현을 추가한다.

인증 결과가 전달되며, 인증 성공 시 새로운 세션이 만들어진다.

import { auth, githubAuth } from "@/auth/lucia"
import { OAuthRequestError } from "@lucia-auth/oauth"
import { cookies, headers } from "next/headers"
import type { NextRequest } from "next/server"

export const GET = async (request: NextRequest) => {
  const storedState = cookies().get("github_oauth_state")?.value
  const url = new URL(request.url)
  const state = url.searchParams.get("state")
  const code = url.searchParams.get("code")

  // validate state
  if (!storedState || !state || storedState !== state || !code) {
    return new Response(null, {
      status: 400
    })
  }
  
  try {
    const { getExistingUser, githubUser, createUser } =
      await githubAuth.validateCallback(code)

    const getUser = async () => {
      const existingUser = await getExistingUser()
      if (existingUser) return existingUser
      const user = await createUser({
        attributes: {
          username: githubUser.login
        }
      })
      return user
    }

    const user = await getUser()
    const session = await auth.createSession({
      userId: user.userId,
      attributes: {}
    })
    const authRequest = auth.handleRequest(request.method, {
      cookies,
      headers
    })
    authRequest.setSession(session)

    return new Response(null, {
      status: 302,
      headers: {
        Location: "/" // redirect to profile page
      }
    })
  } catch (e) {
    if (e instanceof OAuthRequestError) {
      // invalid code
      return new Response(null, {
        status: 400
      })
    }
    
    return new Response(null, {
      status: 500
    })
  }
}

프로필 표시

메인 페이지(app/page.tsx)에 사용자 정보를 표시하도록 다음과 같이 수정한다.

세션 정보가 없는 경우 로그인 페이지(/login)로 redirect시킨다.

import { getPageSession } from "@/auth/lucia"
import { redirect } from "next/navigation"
import Form from "@/components/form"

...

  return (
    ...
        <h1>Profile</h1>
        <p>User id: {session.user.userId}</p>
        <p>Username: {session.user.githubUsername}</p>
        <Form action="/api/logout">
          <input type="submit" value="Sign out" />
        </Form>
  ...

Form 컴포넌트

redirect를 manual 방식으로 처리하는 Form 클라이언트 컴포넌트를 추가한다. (components/form.tsx)

"use client"

import { useRouter } from "next/navigation"

const Form = ({
  children,
  action
}: {
  children: React.ReactNode
  action: string
}) => {
  const router = useRouter()
  
  return (
    <form
      action={action}
      method="post"
      onSubmit={async (e) => {
        e.preventDefault()
        const formData = new FormData(e.currentTarget)
        const response = await fetch(action, {
          method: "POST",
          body: formData,
          redirect: "manual"
        })

        if (response.status === 0) {
          // redirected
          // when using `redirect: "manual"`, response status 0 is returned
          return router.refresh()
        }
      }}
    >
      {children}
    </form>
  )
}

export default Form

Sign out 처리

app/api/logout/route.ts 파일을 추가하여 api/logout 요청을 처리한다.

Sign out을 위해서 Auth.invalidateSession(sessionId) 및 AuthRequest.setSession(null) 함수를 호출한다.

import { auth } from "@/auth/lucia"
import * as context from "next/headers"
import type { NextRequest } from "next/server"

export const POST = async (request: NextRequest) => {
  const authRequest = auth.handleRequest(request.method, context)

  // check if user is authenticated
  const session = await authRequest.validate()
  if (!session) {
    return new Response(null, {
      status: 401
    })
  }

  // make sure to invalidate the current session!
  await auth.invalidateSession(session.sessionId)

  // delete session cookie
  authRequest.setSession(null)
  
  return new Response(null, {
    status: 302,
    headers: {
      Location: "/login" // redirect to login page
    }
  })
}

인증 연동 완료

위의 작업을 모두 마치면, 아래와 같이 기본적인 인증 기능들이 추가된다.

사이트 접속 시 세션 확인, 없으면 Sign in 페이지 이동
Sign in 버튼으로 GitHub 인증 페이지 이동
메인 페이지에 사용자 정보 표시
Sign Out 기능

다음은 인증 완료 후 사용자정보와 Sign Out 링크가 표시된 모습이다.

(https://freeislet.vercel.app/)

참고: https://lucia-auth.com/guidebook/github-oauth/nextjs-app/ (Next.js App Router OAuth 연동 가이드)

GitHub OAuth in Next.js App Router

Learn the basic of Lucia and the OAuth integration by implementing GitHub OAuth

lucia-auth.com

https://lucia-auth.com/database-adapters/planetscale-serverless/ (PlanetScale 연동)

PlanetScale serverless adapter

Learn how to use the PlanetScale serverless driver with Lucia

lucia-auth.com

https://lucia-auth.com/guidebook/kysely/ (Kysely 연동)

Using Kysely

Learn how to use Kysely with Lucia

lucia-auth.com

PlanetScale + Kysely 데이터베이스 연동 (Next.js)

깨비아빠0 — Thu, 4 Jan 2024 20:38:01 +0900

Next.js 프로젝트 스택 검토 (2023) 대로 홈페이지를 다시 만들기 위한 두 번째 단계로 Kysely를 사용하여 PlanetScale 데이터베이스를 연동했다.

PlanetScale 데이터베이스 셋업

https://planetscale.com/docs/tutorials/planetscale-quick-start-guide를 따라하면 정말 쉽게 새 데이터베이스를 만들 수 있다. 데이터베이스 생성이 끝나면 대시보드에서 DB 상태를 비롯해 각종 정보를 볼 수 있다.

우측의 Connect 버튼을 누르면 username 등의 DB 접속 정보를 확인할 수 있는데, Connect with에서 MySQL CLI를 선택하면 나오는 명령을 참고하여 일반적인 DB 클라이언트에서 접속 가능하다.

다음은 MySQLWorkbench에서 방금 만든 데이터베이스에 gcp.connect.psdb.cloud:3306 주소로 접속하여, Quick Guide를 따라 샘플 테이블을 만들어 본 화면이다.

Kysely 셋업

패키지 설치

다음 명령으로 kysely, PlanetScale dialect, kysely-codegen(스키마 코드 생성기)를 설치한다.

npm install kysely kysely-planetscale @planetscale/database
npm install --save-dev kysely-codegen mysql2

mysql2는 kysely-codegen에서 DB에 접속할 때만 사용하므로 --save-dev로 설치한다.

데이터베이스 환경변수 추가

Connect 정보 화면에서 Connect with @planetscale/database를 선택하면 DB 접속에 필요한 host, username을 얻을 수 있다. (password는 최초 생성시에만 조회 가능)

DATABASE_HOST, DATABASE_USERNAME, DATABASE_PASSWORD 환경 변수를 .env.local 파일에 저장한다.

이 환경변수는 비밀번호를 포함하고 있으므로, git에 올리는 대신 Vercel 플랫폼 환경변수 세팅에도 추가한다.

Settings > Environment Variables 페이지에서 아래와 같이 DATABASE_HOST, DATABASE_USERNAME, DATABASE_PASSWORD 환경 변수를 추가하고, 하단의 Save 버튼을 누르면 저장된다.

DB 스키마 생성

kysely 연동을 위해 먼저 kysely-codegen으로 스키마 인터페이스 정의 파일을 생성한다.

kysely-codegen을 실행하려면 DATABASE_URL 환경 변수가 필요한데, PlanetScale Connect 정보 화면에서 Connect with Node.js를 선택하여 확인할 수 있다. (********을 비밀번호로 변경해줘야 함)

DATABASE_URL 환경 변수를 .env.local에 추가한 후에 아래와 같이 명령을 실행하면,

npx kysely-codegen --env-file .env.local --out-file lib/db-schema.d.ts

다음과 같이 lib 폴더에 db-schema.d.ts 파일이 생성된다.

데이터베이스 접속 구현

lib/database.ts 파일에 다음과 같이 Kysely 인스턴스를 생성한다.

위에서 추가한 DATABASE_xxx 환경 변수들을 PlanetScaleDialect config에 설정해주고, DB 스키마는 kysely-codegen으로 생성한 스키마 정의를 사용한다.

import 'server-only'

import { Kysely } from 'kysely'
import { PlanetScaleDialect } from 'kysely-planetscale'
import { DB } from './db-schema'
 
export const db = new Kysely<DB>({
  dialect: new PlanetScaleDialect({
    host: process.env.DATABASE_HOST,
    username: process.env.DATABASE_USERNAME,
    password: process.env.DATABASE_PASSWORD,
  }),
})

server-only는 서버에서만 실행되어야 하는 코드임을 구분해주는 패키지로서, "npm install server-only" 명령으로 설치해야 한다.

Repository 구현

쿼리 테스트를 위해 repository/products.ts 파일에 샘플로 만들었던 Products 테이블의 Repository 클래스를 추가하였다.

import { db } from '@/lib/database'
import { Products } from '@/lib/db-schema'

export class ProductsRepository {
  async all() {
    return await db.selectFrom('products')
      .selectAll()
      .execute()
  }

  async findById(id: number) {
    return await db.selectFrom('products')
      .where('id', '=', id)
      .selectAll()
      .executeTakeFirst()
  }
}

export const productsRepository = new ProductsRepository()

쿼리 테스트

메인 page.tsx에 DB 조회 및 HTML 코드를 추가했다.

export default async function Home() {
  const products = await productsRepository.all()

  return (
    <main ...>
      <ul>
        {products.map((product, index) => (
          <li key={index}>
            {product.id}: {product.name} (category: {product.category_id})
          </li>
        ))}
      </ul>
  ...

아래와 같이 products 테이블 레코드들이 정상적으로 출력된다.

Vercel 배포 테스트

GitHub에 코드를 push하면 자동으로 빌드가 시작된다.

빌드가 완료된 후 홈페이지에서도 다음과 같이 정상적으로 출력되는 것을 확인할 수 있었다.

참고: https://kysely.dev/docs/getting-started?dialect=mysql

Getting started | Kysely

Installation

kysely.dev

https://www.ayoubkhial.com/blog/build-fully-typed-web-app-using-next.js-planetscale-drizzle-and-kysely

Build a fully typed web app using Next.js, PlanetScale, Drizzle, and Kysely

Harness the power of PlanetScale, Drizzle ORM, and Kysely Query Builder to develop a scalable fully-typed web app.

www.ayoubkhial.com

shadcn/ui (Next.js)

깨비아빠0 — Wed, 3 Jan 2024 14:38:43 +0900

Next.js 프로젝트 스택 검토 (2023) 대로 홈페이지를 다시 만들기 위한 첫 번째 단계로 shadcn/ui를 추가했다.

shadcn/ui 셋업

https://ui.shadcn.com/docs/installation/next의 가이드를 참고하여 shadcn/ui를 셋업한다.

다음 명령으로 shadcn-ui를 초기화한다. 설정을 위한 질문에는 모두 디폴트값을 선택한다.

npx shadcn-ui@latest init

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes

셋업이 끝나면 다음과 같이 프로젝트 내용이 변경된다.

1. components.json: shadcn/ui 설정을 담은 components.json 파일이 생성된다.

2. global.css: 아래와 같이 root에 기본 variable들이 추가된다.

3. lib/util.ts: 유틸 파일이 추가된다. 여기에는 class 이름 조합을 도와주는 cn 함수가 구현되어 있다.

4. tailwind.config.js: tailwind config 파일이 추가된다.

기존 tailwind.config.ts 파일과 합치는 것이 좋을지 검토 필요함

컴포넌트 추가

컴포넌트를 추가하려면 명령줄에서 "npx shadcn-ui@latest add" 명령을 사용해야 한다.

예를 들어, Button 컴포넌트를 추가하려면, 터미널에서 다음 명령을 실행한다.

npx shadcn-ui@latest add button

그러면, 아래와 같이 component/ui 디렉토리에 button.tsx 파일이 생성되며,

메인 page.tsx에 <Button> 컴포넌트를 삽입하면 화면에 Click me 버튼이 나오는 것을 볼 수 있다.

shadcn/ui의 모든 컴포넌트 목록은 https://ui.shadcn.com/docs/components에서 볼 수 있다.

Next.js 프로젝트 스택 검토 (2023)

깨비아빠0 — Sat, 30 Dec 2023 16:04:39 +0900

Next.js 프로젝트를 GitHub pages에 배포하기에서 사용한 Static Site Generation(SSG) 방식으로는 홈페이지를 만드는데 한계가 있어서, 서버 호스팅을 포함해 웹앱 개발 및 배포에 사용할 기술스택을 살펴보았다. 2023년 기준 스택이고, 무료 호스팅만 검토했다.

참고: https://dev.to/livecycle/how-to-host-your-side-projects-for-free-in-2023-from-auth-to-database-42im

How to host your side-projects for free in 2023: from Auth to Database

TL;DR In this article, we'll look at how you can host your side project for free in 2023....

dev.to

요약

Framework: Next.js (https://nextjs.org/)
CSS: Tailwind CSS (https://tailwindcss.com/)
UI: shadcn/ui (https://ui.shadcn.com/)
인증: Lucia (https://lucia-auth.com/)
웹호스팅: Vercel (https://vercel.com/)
데이터베이스: PlanetScale (https://planetscale.com/)
SQL: Kysely (https://kysely.dev/)

비고

shadcn/ui

Next.js, React UI 라이브러리를 검색해봤더니 정말 많은 것들이 나왔다.

여러 라이브러리들을 살펴본 끝에 각종 포스트의 댓글에서 인기가 많은 shadcn/ui를 사용하기로 했다.

Next.js 연동은 https://ui.shadcn.com/docs/installation/next에 정리되어 있다.

Lucia

참고글에서는 clerk을 추천하고 있지만, 그렇게 제대로 된 회원관리가 필요할 것 같지는 않아서 Lucia를 쓰기로 했다.

처음에는 Auth.js(구 NextAuth.js)를 검토했지만, 문서화가 너무 부족하고 연동 과정도 매끄럽지 않아서 대안으로 lucia를 선택했다.

lucia는 문서화도 잘 되어 있고, 연동도 짧은 시간 안에 쉽게 끝낼 수 있었다.

PlanetScale

예전에 비해 쓸만한 무료 데이터베이스도 참 많아진 것 같다. 그 중에서 PlanetScale은 vitess 기술을 기반으로 스케일, 성능, 안정성을 제공하는 MySQL 데이터베이스이다. https://pilcrow.vercel.app/blog/serverless-database-latency의 벤치마킹 결과를 참고하여 PlanetScale을 선택했다.

Kysely

Next.js 템플릿이나 예제를 보면 거의 Prisma ORM 라이브러리를 쓰고 있는데, 곳곳에서 느린 부분을 지적하는 글이 보였다. 파이썬 서버에서도 SQLAlchemy를 쓸 때 성능 이슈가 있었는데, ORM 라이브러리를 쓸 때 주의해야 할 듯하다. 사실 SQLAlchemy는 성능 이외에도 복잡한 서브쿼리나 조인을 사용하는 쿼리를 옮길 때 alias가 생각처럼 이뤄지지 않는 등 불편한 부분이 있었는데, Prisma도 사용하다 보면 비슷한 일들이 있지 않을까 싶다.

대신 Kysely는 쿼리 구문과 1:1 대응되게 코드를 짜면 돼서 훨씬 편할 것 같다. 예를 들어, Kysely에서 서브쿼리를 조인하는 예제는 다음과 같다.

Gemini API 테스트

깨비아빠0 — Wed, 27 Dec 2023 01:33:16 +0900

2023년 12월 구글 Gemini의 확장된 버전이 공개되었다.

Gemini 소개글: https://korea.googleblog.com/2023/12/blog-post_652.html

가장 유능하고 범용적인 AI 모델 제미나이(Gemini)를 소개합니다

모든 사람들에게 더욱 유용한 AI를 만듭니다 이 블로그는 구글 The Keyword 블로그( 영문 )에서도 확인하실 수 있습니다. 순다 피차이(Sundar Pichai) 구글 및 알파벳 CEO 기술의 변화는 과학의 발전, 인류

korea.googleblog.com

Gemini로 간단하게 프롬프트를 테스트해본 내용과 API 테스트 결과를 정리해둔다.

Gemini 테스트

Google AI Studio에서 gemini를 체험할 수 있으며, UI는 ChatGPT와 유사하다.

아래는 "Gemini와 ChatGPT를 비교해줘"라는 질문을 던져본 모습이다.

Gemini Pro가 아닌 Gemini 1.0에 대한 답변이 나와서, "Gemini Pro처럼 확장된 버전에 대해서 비교설명해줄래"로 다시 질문해 보았다. ChatGPT 학습에 사용한 파라미터가 1750억 개인데 비해, Gemini Pro는 10억 개의 파라미터를 사용했다는 내용을 볼 수 있었다.

Gemini API key 생성

Google AI Studio 화면 좌측의 "Get API key" 페이지에서 API key를 생성할 수 있다.

"Create API key in new project"를 누르면 아래와 같이 생성된 API key를 보여준다.

GCP 콘솔을 확인해보면 아래와 같이 새로 생성된 "Generative Language Client" 프로젝트에 Generative Language API가 활성화된 것을 볼 수 있다.

API는 굳이 Google AI Studio를 거치지 않고 GCP 콘솔에서 직접 활성화할 수 있다.

Gemini API 테스트 (REST API)

curl을 이용해서 아래와 같이 REST API 버전의 gemini를 테스트할 수 있다.

curl \
  -H 'Content-Type: application/json' \
  -d '{"contents":[{"parts":[{"text":"Write a story about a magic backpack"}]}]}' \
  -X POST https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=YOUR_API_KEY

URL 마지막의 YOUR_API_KEY에 생성된 key를 넣고, text 파라미터를 적절히 바꿔서 API 요청을 보내면, 아래와 같이 프롬프트에 대한 응답을 얻게 된다. (아래 스크린샷은 curl 대신 insomnia 툴로 테스트한 화면)

Node.js 애플리케이션을 위한 Gemini API 테스트

웹 연동을 위해 Node.js 환경에서 Gemini API를 사용해보았다.

간단하게 테스트해볼 목적으로 웹 프로젝트 대신 노트북 방식을 사용했다. (Node.js Notebooks (REPL) 플러그인 사용)

SDK 설치

먼저 API 사용을 위해 SDK를 설치한다.

npm install @google/generative-ai

모델 초기화

텍스트 생성과 채팅에 적합한 gemini-pro 모델을 초기화한다.

const { GoogleGenerativeAI } = require("@google/generative-ai");

const genAI = new GoogleGenerativeAI('생성된_API_KEY');
const model = genAI.getGenerativeModel({ model: "gemini-pro"});

텍스트 생성 테스트

위에서 REST API로 테스트했던 것과 비슷하게 프롬프트 응답 결과를 받아 보려면, 다음과 같이 generateContent 함수를 사용한다.

async function run() {
  const prompt = "2024년 대한민국 출생률은 어떤 추세를 보일지 예측해줘"

  console.log('processing...');

  const result = await model.generateContent(prompt);
  const response = await result.response;
  const text = response.text();

  console.log(text);
}

run();

processing...
2024년 대한민국 출생률은 여러 가지 요인에 따라 달라질 수 있습니다. 이러한 요인에는 경제 상황, 주택 시장 조건, 출산 정책, 사회 문화적 변화 등이 포함됩니다.

* **경제 상황:** 경제가 호황일 때 사람들은 자녀를 낳을 가능성이 더 높습니다. 이는 그들이 자녀를 부양할 수 있으며 자녀가 성공할 수 있는 미래를 제공할 수 있다고 느끼기 때문입니다. 경기가 침체기에 있을 때는 자녀를 낳을 가능성이 줄어듭니다. 이는 그들이 일자리를 구하기 어려울 것이며 자녀를 부양할 수 없을 것이라고 느끼기 때문입니다.
* **주택 시장 조건:** 주택 시장이 부동산 가격이 저렴하고 대출 금리가 낮을 때 사람들은 집을 사고 가족을 시작할 가능성이 더 높습니다. 주택 시장이 불안정하고 대출 금리가 높을 때는 자녀를 낳을 가능성이 줄어듭니다. 이는 그들이 집을 살 여유가 없으며 가족을 부양할 수 없다고 느끼기 때문입니다.
* **출산 정책:** 정부가 출산을 장려하는 정책을 시행하면 사람들은 자녀를 낳을 가능성이 더 높습니다. 이러한 정책은 재정 지원, 탁아 지원, 근로자 권리 보호 등을 포함할 수 있습니다. 정부가 출산을 억제하는 정책을 시행하면 자녀를 낳을 가능성이 줄어듭니다. 이러한 정책은 가족 구성에 대한 제한, 대량 학살 또는 강제 중절 등을 포함할 수 있습니다.
* **사회 문화적 변화:** 사람들의 가족에 대한 태도가 바뀌면 자녀를 낳을 가능성이 더 높습니다. 예를 들어, 점점 더 많은 사람들이 결혼하지 않고도 자녀를 갖는 것이 허용 가능하다고 생각하고 있습니다. 점점 더 많은 사람들이 자녀를 갖지 않아도 괜찮다고 생각하고 있습니다. 인류의 종말을 고려하기도 하는데, 이러한 태도의 변화는 출생률에 부정적인 영향을 미칠 수 있습니다.

전반적으로, 2024년 대한민국 출생률은 경제 상황, 주택 시장 조건, 출산 정책, 사회 문화적 변화 등 여러 가지 요인에 따라 달라질 수 있습니다. 이러한 요인들이 어떻게 전개될지는 예측하기 어렵지만, 출생률은 앞으로도 계속 감소할 가능성이 높습니다.

2024년 한국의 출생률에 대한 몇 가지 구체적인 예측은 다음과 같습니다.

* 통계청은 2024년 한국의 합계출산율이 0.89명이 될 것으로 예측했습니다. 이는 여성 한 명당 평생 낳을 것으로 예상되는 자녀 수입니다.
* 유엔은 2024년 한국의 합계출산율이 0.92명이 될 것으로 예측했습니다.
* 세계은행은 2024년 한국의 합계출산율이 0.95명이 될 것으로 예측했습니다.

이러한 예측은 모두 한국의 출생률이 계속 감소할 것으로 나타났습니다. 이는 한국의 경제 상황, 주택 시장 조건, 출산 정책, 사회 문화적 변화 등 다양한 요인에 따른 것입니다.

multi-turn 대화(채팅) 테스트

챗봇 개발 시 다음과 같이 사용자와 모델의 대화 데이터를 startChat 인자로 넘긴 후 sendMessage 함수를 통해 새로운 응답을 얻을 수 있다.

async function run() {
  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: "Hello, I have 2 dogs in my house.",
      },
      {
        role: "model",
        parts: "Great to meet you. What would you like to know?",
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "How many paws are in my house?";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

If you have two dogs in your house, each dog has four paws. Therefore, there are a total of **eight paws** in your house.

응답을 받을 때마다 다음 startChat에 넘길 history를 추가해줘야 하므로, 실제 앱 개발시에는 다음과 같은 식으로 사용하면 된다.

공식 매뉴얼에는 startChat을 사용하면 history를 직접 관리할 필요가 없다고 나오는데, 어떤 걸 말하는건지 찾지 못했다.

const chatHistory: any[] = [];

async function sendMessage(msg: string) {
  const chat = model.startChat({
    history: chatHistory,
    generationConfig: {
      maxOutputTokens: 100,
    },
  });
  
  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();

  chatHistory.push({role: 'user', parts: msg});
  chatHistory.push({role: 'model', parts: text});
  console.log(chatHistory.slice(-2));
}

async function run() {
  await sendMessage('Hello, I have 2 dogs in my house.');
  await sendMessage('How many paws are in my house?');
}

run();

[
{ role: 'user', parts: 'Hello, I have 2 dogs in my house.' },
{
role: 'model',
parts: 'Having two dogs in your house can be a wonderful and rewarding experience. Here are some tips for providing a happy and healthy home for your canine companions:\n' +
'\n' +
'1. **Create a Dog-Friendly Environment**:\n' +
' - Ensure your house is safe and secure for your dogs.\n' +
' - Provide a comfortable and dedicated space for them to rest and sleep.\n' +
' - Keep essential items like food, water, and toys easily accessible.\n' +
' - Install gates or barriers to prevent access to potentially dangerous'
}
]
[
{ role: 'user', parts: 'How many paws are in my house?' },
{
role: 'model',
parts: 'If you have 2 dogs in your house, and each dog has 4 paws, then there are a total of **8 paws** in your house.\n' +
'\n' +
"Here's a simple calculation:\n" +
'\n' +
'Number of dogs = 2\n' +
'Number of paws per dog = 4\n' +
'\n' +
'Total number of paws = Number of dogs × Number of paws per dog\n' +
'Total number of paws = 2 × 4\n' +
'Total number of paws = 8\n' +
'\n' +
'Therefore, there are 8 paws in your'
}
]

스트리밍 테스트

빠른 상호작용을 위해 모델 응답을 조금씩 스트리밍으로 받을 수 있다.

스트리밍을 위해서는 generateContentStream 또는 sendMessageStream 함수를 사용한다.

이전의 채팅 테스트 코드를 스트리밍 방식으로 바꿔보면 다음과 같다.

const chatHistory: any[] = [];

async function sendMessageStream(msg: string) {
  console.log(`\nuser: ${msg}\n`)

  const chat = model.startChat({
    history: chatHistory,
    generationConfig: {
      maxOutputTokens: 100,
    },
  });
  
  const result = await chat.sendMessageStream(msg);

  let text = '';
  for await (const chunk of result.stream) {
    const chunkText = chunk.text();
    console.log(chunkText);
    text += chunkText;
  }

  chatHistory.push({role: 'user', parts: msg});
  chatHistory.push({role: 'model', parts: text});
}

async function run() {
  await sendMessageStream('Hello, I have 2 dogs in my house.');
  await sendMessageStream('How many paws are in my house?');
}

run();

아래와 같이 모델 응답이 점진적으로 출력된다.

애석하게도 앞선 테스트와는 달리 결과가 이상하게 나왔다. (개 두 마리가 16개의 발...)

참고: https://ai.google.dev/tutorials/node_quickstart?hl=ko

빠른 시작: Node.js 애플리케이션에서 Gemini API 시작하기 | Google AI for Developers

Node.js와 함께 Gemini API를 사용하여 이미지와 텍스트 프롬프트에서 텍스트를 생성하고 채팅 상호작용을 빌드하는 방법을 알아봅니다.

ai.google.dev

JavaScript/TypeScript 노트북 vscode 플러그인

깨비아빠0 — Tue, 26 Dec 2023 17:35:13 +0900

Jupyter처럼 쓸 수 있는 javascript 용 노트북을 찾다가 Node.js Notebooks (REPL)이라는 vscode 플러그인을 찾아서 설치해 보았다.

플러그인 설치

vscode 플러그인(Cmd + Shift + X) 화면에서 "node.js notebook"을 검색하면, 첫 번째로 Node.js Notebooks (REPL) 플러그인이 뜬다. 이 플러그인을 설치한다.

노트북 테스트

새 코드 셀에서 console.log 함수를 실행했을 때, 다음과 같이 정상적으로 결과가 출력된다.

plotly 샘플 코드도 다음과 같이 정상 동작한다. (plotly 패키지는 Node.js Notebook (REPL)에서 자체 지원)

JavaScript/TypeScript 뿐 아니라 Shell 명령도 실행 가능하다.

셀 내용을 자동으로 감지하며, 우측 하단에서 직접 선택할 수도 있다.

외부 패키지 설치

외부 패키지를 설치해서 쓰고 싶을 때에는, 일반 프로젝트와 마찬가지로 프로젝트 폴더에 설치해주면 된다.

아래와 같이 clsx 패키지 설치 후에 정상적으로 import가 실행되는 것을 확인할 수 있다.

로블록스 맵 만들기 체험

깨비아빠0 — Tue, 26 Dec 2023 15:29:46 +0900

깨비가 한창 빠져 있는 로블록스 맵을 어설프게나마 한 번 만들어 보았다.

우선 로블록스 스튜디오를 설치해서 튜토리얼을 따라해보고, 가이드 문서를 훑어본 후에, 기본 템플릿으로 새 맵을 생성했다.

마켓 플레이스에 공짜 리소스가 많이 있어서 가져다가 맵 꾸미기가 수월했는데, christmas로 검색 후에 크리스마스 트리를 몇 개 배치했다. 배경음악과 눈 파티클, 불꽃놀이 효과도 추가했다.

마켓 플레이스에서 christmas로 검색한 모습 (왼쪽 패널)

그렇게 몇 십 분 만에 만든 첫 번째 맵을 로블록스에 배포했다.

로블록스 스튜디오의 툴 자체 기능도 (유니티나 언리얼 만큼은 아니어도) 꽤 괜찮았지만, 무엇보다도 로블록스 배포를 너무나 손쉽게 할 수 있어서 감동...

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

이렇게 올린 맵을 깨비에게 보여주니,

"와, 크리스마스 트리네! ... 근데 게임은 어딨어?"

ㅋㅋ쿠ㅜㅜ 아빠가 미안하당ㅠㅠ

이번에는 이브 새벽에 급하게 만들었지만, 조만간 시간을 좀 더 들여서 제대로 된 게임도 만들어 봐야겠다

Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3)

깨비아빠0 — Thu, 21 Dec 2023 21:00:03 +0900

Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다.

웹사이트 구조

홈페이지를 포트폴리오 사이트스럽게 만들기 위해 웹사이트 상단에 제목과 네비게이션 바를 포함하는 헤더를 배치하려고 한다. 이를 위해 header.tsx 파일을 추가하였다.

세부 페이지는 dynamic route를 사용하지 않고, app 폴더 밑에 직접 페이지용 폴더와 page.tsx 파일을 생성하였다.

About 페이지를 위한 about 폴더 하나만 추가했는데, 추후에 Nextra, gray-matter 같은 프레임워크 혹은 CMS를 사용하게 되면 프로젝트 구조가 크게 바뀌므로, 우선은 about 하나만 만들었다.

현재 프로젝트 구조와 추가된 파일은 다음과 같다.

기존에 만들어져 있는 다음 코드들도 약간의 수정이 있을 예정이다.

app/layout.tsx, page.tsx
global.css
tailwind.config.ts

웹사이트 헤더

웹사이트 상단에 배치할 Header 컴포넌트는 다음 내용을 포함한다.

홈페이지 이름
네비게이션 바
다크 모드 토글 버튼 (이전 다크 모드 글에서 추가한 토글 버튼을 헤더로 옮김)

위 요소들의 배치는 responsive 디자인을 위해 flexbox를 사용했고, 네비게이션 바에는 loop 방식과 active link 스타일이 쓰였다.

flexbox로 responsive 디자인 적용

헤더에는 아래와 같이 제목과 네비게이션 바(+ 토글 버튼)의 두 영역이 있으며, 화면 폭에 따라 양쪽으로 나뉘어 배치된다.

또한, 화면 폭이 줄어들 때에는 네비게이션 바 영역은 제목 아래로 내려온다.

이러한 디자인은 flex, flex-wrap, justify-between과 ml-auto 클래스로 쉽게 만들 수 있다.

아래와 같이 최상단 div에 flex, flex-wrap, justify-between을 넣고, 우측 div(네비게이션 바)에 ml-auto를 추가하면 위 애니메이션과 같이 평소에는 양쪽으로 나뉘어 있다가 화면이 좁아지면 우측 영역이 아래로 내려온다.

    <div className="flex flex-wrap items-end justify-between ...">
      <h1 className="flex-shrink-0 ...">
        Portfolio&nbsp;
        <span className="...">
          under construction
        </span>
      </h1>
      <div className="ml-auto mt-4">
        ...

Reusing Styles (loop)

tailwind를 사용하면 class를 지정하는 코드가 길어질 수밖에 없는데, 네비게이션 링크들처럼 태그가 반복될 때에는 수정사항을 모든 태그의 className에 적용해야 하므로 작업이 더욱 귀찮아진다.

이런 문제를 해결하기 위해 tailwind에서 제안하는 방법들 중 loop 방식을 사용하여 링크 목록을 구현했다. Link 태그를 여러 개 사용하는 대신에, 아래와 같이 [title, url] 배열을 만들어서 map 함수를 사용하는 방식이다.

export function Header() {
  const navItems = [
    ['Home', '/'],
    ['Portfolio 1', '/portfolio1'],
    ['Portfolio 2', '/portfolio2'],
    ['Portfolio 3', '/portfolio3'],
    ['About', '/about'],
  ]

  return (
    ...
        <nav>
          {navItems.map(([title, url], index) => (
            <Link href={url} key={index}>{title}</Link>
          ))}
        </nav>
    ...
  )
}

Active Link

활성화된 페이지 링크에 스타일을 적용하려면 usePathname 함수를 사용한다.

다음은 Next.js 공식 문서의 active link 예제이다.

'use client'
 
import { usePathname } from 'next/navigation'
import Link from 'next/link'
 
export function Links() {
  const pathname = usePathname()
 
  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
            Home
          </Link>
        </li>
        <li>
          <Link
            className={`link ${pathname === '/about' ? 'active' : ''}`}
            href="/about"
          >
            About
          </Link>
        </li>
      </ul>
    </nav>
  )
}

위 예제를 참고하여 활성화된 링크일 경우의 폰트 색상과 weight를 별도로 지정했고, hover 스타일도 추가했다.

export function Header() {
  const pathname = usePathname()
  const isActive = (url: string) => pathname === url
  ...
  
  return (
    ...
            <Link
              className={
                `... hover:bg-theme-active/30
                ${isActive(url) ? 'text-theme-active font-bold' : ''}`
              }
              href={url}
              key={index}
            >{title}</Link>
    ...
  )
}

theme-active 컬러는 다크 모드 글 "light/dark 모드 공통 색상 class 정의"에 정리한 방식으로 추가한 커스텀 컬러이다.

// global.css
...

@layer base {
  :root {
    ...
    --theme-active: 48 112 236;
  }

  :root.dark {
    ...
    --theme-active: 55 126 255;
  }
}

...


// tailwind.config.css
import type { Config } from 'tailwindcss'

const config: Config = {
  ...
  theme: {
    extend: {
      colors: {
        ...
        'theme-active': "rgb(var(--theme-active) / <alpha-value>)",
      },
    },
  },
}
export default config

전체 Header 코드

완성된 Header 컴포넌트 코드는 다음과 같다. (app/header.tsx)

최상단 div의 header-layout은 global.css에 추가한 커스텀 클래스인데, 아래 "레이아웃을 위한 커스텀 클래스" 섹션에 정리

'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'
import { ThemeMode } from '@/components/theme-mode'

export function Header() {
  const pathname = usePathname()
  const isActive = (url: string) => pathname === url
  const navItems = [
    ['Home', '/'],
    ['Portfolio 1', '/portfolio1'],
    ['Portfolio 2', '/portfolio2'],
    ['Portfolio 3', '/portfolio3'],
    ['About', '/about'],
  ]

  return (
    <div className="header-layout flex flex-wrap items-end justify-between">
      <h1 className="flex-shrink-0 pr-6 text-4xl font-extrabold italic">
        Portfolio&nbsp;
        <span className="text-3xl font-medium">
          under construction
        </span>
      </h1>
      <div className="ml-auto mt-4">
        <nav className="inline text-sm font-medium">
          {navItems.map(([title, url], index) => (
            <Link
              className={
                `py-1 px-2 rounded-sm hover:bg-theme-active/30
                ${isActive(url) ? 'text-theme-active font-bold' : ''}`
              }
              href={url}
              key={index}
            >{title}</Link>
          ))}
        </nav>
        <div className="inline ml-4">
          <ThemeMode />
        </div>
      </div>
    </div>
  )
}

전체 레이아웃

main 영역 100vh 이슈

Header 컴포넌트는 app/layout.tsx에 간단하게 추가할 수 있지만, 헤더로 인해 기존 레이아웃에 이슈가 발생했다.

보일러플레이트의 main 태그에는 min-h-screen 클래스가 쓰이는데, min-height에 100vh(창 전체 크기)를 설정하는 클래스이다. 여기에 flexbox justify-between을 함께 사용하여 아래와 같이 하위 div 2개가 전체 창 상/하단으로 나뉘도록 하고 있다.

그런데, 헤더를 추가함에 따라 메인 영역 크기가 화면을 넘어가면서, 아래처럼 스크롤되게 레이아웃이 바뀌었다. 이것은 원래의 디자인 의도가 아니다.

이를 해결하기 위해 전체 디자인을 flexbox에 넣는 방법을 사용했다.

우선 body에 다음과 같이 flexbox 및 min-h-screen 클래스를 적용한다.

      <body className={`flex flex-col min-h-screen ${notoSansKr.className}`}>

그리고, main 태그에서 min-h-screen을 지우고 flex-grow를 적용하면, 아래와 같이 밑으로 넘치는 영역 없이 화면에 딱 맞게 레이아웃이 적용된다.

전체 레이아웃 코드

app/layout.tsx의 html 부분 코드는 다음과 같다.

app/page.tsx 전체를 감싸던 <main> 태그를 layout.tsx로 옮겨오는 변화도 있다.

...

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ko">
      <body className={`flex flex-col min-h-screen ${notoSansKr.className}`}>
        <Providers>
          <Header />
          <main className="flex-grow flex flex-col items-center">
            {children}
          </main>
        </Providers>
      </body>
    </html>
  )
}

레이아웃을 위한 커스텀 클래스

About 페이지 등의 세부 페이지들에 공통된 레이아웃이 적용되어야 한다. (너비, 여백 등)

그런데, 너비나 여백 스타일을 app/layout.tsx 같은 상위 레이아웃에 적용하게 되면, 세부 페이지에서 상위 프레임보다 큰 영역을 사용하고 싶을 때 음수 마진을 사용해야하는 번거로움이 있다. 따라서, 아래와 같이 세부 페이지 레이아웃을 위한 main-layout 클래스를 만들고, 각각의 페이지에서 사용하도록 하였다.

헤더 영역의 레이아웃도 함께 보기 위해 header-layout 클래스도 추가함

@layer components {
  .header-layout {
    @apply flex-shrink-0 mx-[5%] p-2
  }

  .main-layout {
    @apply max-w-5xl w-full p-4
  }
}

about 페이지에 다음과 같이 main-layout 클래스를 사용하면, 1024px 너비(max-w-5xl)와 16px 여백(p-4)이 적용된다.

export default function About() {
  return (
    <div className="main-layout">
      <span>About...</span>
    </div>
  )
}

결과

위의 내용이 모두 적용된 모습은 다음과 같다. (iframe)

URL: https://freeislet.github.io/home-old/
소스코드: https://github.com/freeislet/home-old