한 개발자의 노트패드

react로 그림판을 만든 뒤 후기 [0]

weaklion — Wed, 10 Dec 2025 17:17:35 +0900

react와 konva를 이용해서 그림판을 만들었습니다.

konva는 js를 이용해서 canvas를 2d로 제어할 수 있는 라이브러리입니다.

원래는 HTML의 자체 canvas API를 쓸까 했는데 그러면 하나의 기능을 만드는데 너무 긴 시간이 소비될 것 같아서 안 했습니다.

하지만 그냥 canvas API를 쓸 걸 그랬습니다.

이번엔 ai와 적극적으로 소통해서 만들었습니다.

ai를 이용해서 고작 이 딴 거나 만들었냐? 고 하면 딱히 할 말은 없는데,

이번 프로젝트에서 중요한 건 ai에 의존하는 게 아니라, ai를 통한 코드 퀄리티를 높이는 거라, 우선 코드를 입력한 뒤

그 코드를 리팩터링 할 때 ai를 쓰는 방향으로 진행했습니다.

그러니까 좀 봐주세요. ai로 코드 찍는 건 양심에 가책이 있어서 안 했습니다.

지금 그림판에 구현되어 있는 기능은 총 6가지입니다.

그리기, 지우개, 텍스트, 선택, 되돌리기, undo, redo.

간단해 보이는 기능들이고 실제로 대부분은 만드는데 어렵지 않았습니다.

konva에 있는 데모들에 다 있었던 기능들이고, 따라만 하면 다 나오는 것들이었죠.

문제는 선택과 지우개였습니다. 둘 다 데모가 나와있기는 하지만 전제가 다릅니다.

konva의 공식 홈페이지에 있는 demo는 globalCompositeOperation를 destination-out 하는 방법입니다.

canvas API에서도 지울 때 사용하는 방법이지만 이렇게 되면 모형을 선택하거나 이동할 수 없습니다. 그냥 온전한 그림판의 형태만 띄게 되는 거죠.

그림판을 만들면서 참고한 프로젝트는 canva draw와 excalidraw입니다.

두 프로젝트의 공통점은 내가 그린 도형(텍스트 포함)을 자유자재로 선택하고 제어할 수 있으며, 문제없이 지울 수도 되어야 합니다.

그리고 내가 그린 도형에 대한 데이터를 저장할 수 없다면, 추후 리팩토링도 불가능할 거라 판단되어, 도형을 지울 땐 destination-out이 아닌 다른 방법으로 지워야만 합니다.

그게 뭐냐면...

프로젝트 구조

그전에 프로젝트를 어떤 구조로 만들었는지 잠깐 복기 형식으로 적도록 하겠습니다.

어차피 이 블로그도 제가 공부한 것들을 복기 형식으로 적는 거라, 딱히 불만은 없는 걸로 하겠습니다.

기본 골자는 FSD(Feature-Sliced Design) 아키텍처입니다. 본래 fsd는 대형 프로젝트에 적합하다고 알려져 있고, 면접에서도 그렇게 대답하지만 공식 레퍼런스에선

FSD는 다음 조건에 해당하면 도입할 수 있습니다:

프런트엔드(웹, 모바일, 데스크톱 등)를 개발하고 있고
라이브러리가 아닌 애플리케이션을 개발하고 있다면

언어, UI 프레임워크, 상태 관리 도구에 대한 제약은 없습니다.
Monorepo 환경에서도 사용 가능하며, 프로젝트 구조를 나눠 점진적으로 적용할 수 있습니다.

라고 나와있네요. 즉, 프런트엔드로 개발하면서, 라이브러리가 아니라면 그냥 써도 된다는 겁니다.

fsd에 관한 자세한 글은 아래를 참조해 주세요

기능 분할 설계(Feature-Sliced Design, FSD)란

Feature-Sliced Design(FSD)는 프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론입니다. FSD는 이름 그대로 기능 단위로 분할하는 것에 초점이 맞춰져 있으며 현재 많은 주목을 받는 아키텍처 중

weaklion1.tistory.com

fsd에 관해 좀 더 레퍼런스를 찾다 보면 알겠지만, 명확한 정의는 없습니다.

명확한 답이 없다는 건 자유롭기도 하지만, 구조를 벗어나기도 쉽다는 뜻입니다.

가령 feature라는 단어의 뜻만 보고 특정한 entity의 crud만 집어넣어야 한다라고 해석할 수도 있는 거죠.

이 부분은 사실 fsd 홈페이지에서도 명확하게 정의가 돼있지 않아 난감했는데, 최근에 정의된 게 있더라고요.

Entity 간 관계

원칙적으로 Slice끼리는 서로 모르면 좋습니다.
하지만 현실적으로 다른 Entity를 포함하거나 상호작용하는 경우가 있습니다.
이때는 로직을 상위 Layer(Feature/Page)로 올려 처리하세요.

만약 한 Entity 데이터에 다른 Entity가 포함된다면,
@x 표기를 사용해 교차 Public API로 연결을 명시적으로 드러내세요.

Layer | Feature-Sliced Design

Entity 간에 관계에서도 다른 entity를 포함하거나 상호작용을 한다면 상위 layer에서 처리하라고 레퍼런스에선 이야기를 하고 있었습니다.

이를 토대로 폴더 구조를 만들었습니다.

이렇게 보니 굳이 fsd로 할 필요가 없긴 합니다. 그냥 편한 대로 하면 되겠습니다

그래도 어쨌든 저는 fsd라는 아키텍처에 대해 좀 더 공부하고 싶었고, 좋은 계기가 되긴 했습니다.

특이한 점은 entites에 entity가 하나에, features에 canvas와 관련된 기능만 있다는 점입니다.

엥? 아까 네가 말한 거랑 다른데?라고 할 수 있는데 맞습니다.

처음엔 entites에 line과 text, 그리고 eraser 총 3개의 엔티티가 있었습니다.

그리고 3개의 엔티티가 상호작용하는 걸 features에서 관리했는데

ui만 다르고, 내용은 비슷한 컴포넌트를 나눌 필요가 없다고 생각해서 shape라는 엔티티 안에 ui만 따로 해서

관리하는 걸로 결정했습니다.

features에도 마찬가지로 shape와 엔티티의 기능들을 처리하고 있지만

canvas라는 거대한 종이 안에서 처리되는 기능들이기 때문에 이름을 명시적으로 바꿨습니다.

좀 더 자세한 건 기능을 알아볼 때 보도록 하겠습니다.

나머지는 딱히 특별한 건 없습니다. 다만 widgets이 없는데, 이 자리엔 canvas가 들어가도 무방합니다.

다음엔 어떤 방법으로 도형을 지웠는지, 기능에 대해서 알아볼 건데

그건 이다음 글에 적도록 하겠습니다.

ai를 이용해 웹 사이트(or 유튜브)를 번역해보자.

weaklion — Tue, 11 Nov 2025 17:51:22 +0900

개발 블로그나 유튜브를 보다보면 영어로 된 레퍼런스가 많습니다.

예전에야 이걸 구글 번역기로 하나하나 돌려서 해결을 했지만, 세상이 좋아져서 요즘엔 간단한 방법으로 알 수 있게 됐습니다.

어떻게 하느냐?

1. 우선 번역해야 할 사이트를 찾는다.

일단 번역이 필요할 레퍼런스가 필요하겠죠. 지금은 예시로 아래 사이트를 이용하겠습니다.

Behind the eraser

대충 사이트 내용은 line을 erase 할 수 있는 알고리즘입니다.

지금 만들고 있는 토이 프로젝트에 필요해서 가져와봤습니다.

2. Google NoteBookLM

NotebookLM

Google NoteBookLM은 구글에서 만든 인공지능 노트 애플리케이션입니다.

사용자가 직접 입력한 컨텐츠를 인공지능이 요약하여 인사이트를 추출해줍니다.

우리는 여기에 필요한 레퍼런스를 입력해야 합니다.

새노트를 만들면 입력해야 할 소스를 업로드 하라고 하는데 우리는 여기에 번역해야할 사이트 or 유튜브를 입력하면 됩니다.

입력을 하게 되면 잠시 후 번역이 요약과 함께 소스를 볼 수 있게 됩니다.

하지만 우리는 요약이 아닌 본문 전체의 번역본을 보길 원합니다.

좌측의 소스를 클릭하면 ai가 출력한 원문을 볼 수 있게 됩니다.

원문을 출력하면 이걸 우리 입맛에 맞게 번역할 수 있습니다.

원문을 복사한 후 사용하는 ai에게 물으면 원하는 결과를 얻을 수 있습니다.

저 같은 경우 복사한 원문을 google gemini를 통해 다른 프롬프트 없이 번역을 요청했습니다.

그 결과.

아래와 같이 원하는 결과를 얻을수 있었습니다, 레퍼런스가 유튜브라도 아래와 같이 동일한 결과를 확인할 수 있습니다.

저 같은 경우 레퍼런스의 양이 적어 기본 버전을 이용했지만, 만약 번역하려는 본문의 양이 많다면 pro버전 사용을 추천합니다.

chatGPT 브라우저가 출시됐네요

weaklion — Wed, 22 Oct 2025 16:57:49 +0900

https://chatgpt.com/ko-KR/atlas/

ai랑 접목해서 브라우저의 정의를 바꾼 것 같습니다.

개인적으로 프론트엔드 개발자로 새로운 지평을 연 듯한 느낌이 드네요.

useImperativeHandle는 무엇인가?

weaklion — Thu, 16 Oct 2025 17:59:52 +0900

최근 리액트를 이용해 간단한 사이드 프로젝트를 진행하고 있습니다.

프론트엔드 개발자로써 사실 리액트보다 vue를 쓰는 기간이 더 많아서, 아직 react에 적응하는 기간인데

사용하면서 가장 곤란했던 부분이 있습니다.

바로 vue는 양방향의 데이터바인딩을 지원하지만, react는 오직 단방향만 지원한다는 점입니다.

오늘은 이 부분을 단적으로 보여주는 react의 useImperativeHandle에 대해서 적어보도록 하겠습니다.

useImperativeHandle

useImperativeHandle은 ref를 통해 부모 컴포넌트에 노출할 인스턴스 값을 사용자 커스텀할 수 있는 기능입니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트에 원하는 인스턴스를 호출할 수있습니다. 주로 fowardRef와 같이 사용합니다.

const CustomComponent = forwardRef((props, ref) => {
	//...

  useImperativeHandle(ref, () => ({
    handleCustomLog: (type, value) => {
      console.log('custom log')
    }
  }));

  // ... 
});

const ParentComponent = () => {
  const customRef = useRef(null);

  const handleLog = () => {
    if (customRef.current) {
      customRef.current.handleCustomLog();

    }
  };

  return (
    <CustomComponent
      ref={customRef}
      /..
    />
  );
};

react 19 버전을 기준으로 forwardRef는 삭제 됐으니, ref로 사용하셔도 무방합니다.

어쨌든 코드를 작성해보니 vue의 defineExpose()와 유사합니다. vue에서는 defineExpose()를 통한 양방향의 데이터바인딩을 권장하고 있지만 , react에서는 권장하지 않는 방식입니다.

주요 이유는 아래와 같습니다.

명령형(Imperative) 코드를 조장함
- React는 "무엇을(what)" 렌더링할지 선언하는 방식을 지향하는데, useImperativeHandle은 "어떻게(how)" 동작할지 명령하는 방식입니다.
- 부모가 자식의 메서드를 직접 호출하는 것은 명령형 패턴입니다.
컴포넌트 캡슐화를 깨뜨림
- 자식 컴포넌트의 내부 구현을 부모에게 노출하게 되어, 컴포넌트의 독립성이 약화됩니다.
- 자식의 내부 구조를 변경하면 부모 코드도 함께 수정해야 할 수 있습니다.
데이터 흐름을 추적하기 어려움
- props를 통한 단방향 흐름이 아니라 ref를 통한 직접 제어이기 때문에, 코드를 읽을 때 데이터 흐름을 파악하기 힘듭니다.
테스트와 유지보수가 어려움
- ref를 통한 직접 조작은 테스트 코드 작성이 복잡해지고, 디버깅도 어렵습니다.

그럼에도 사용해야 한다면 사용하는 게 맞습니다. 저는 dom 제어를 위해서 사용할 것 같습니다.

[vue3] defineModel 알아보기

weaklion — Wed, 28 May 2025 18:01:43 +0900

vue의 가장 큰 특징 중 하나인 양방향 데이터 바인딩에서 주로 사용되는 기능 중 하나가 v-model 입니다.

<script setup>
const model = ref('');
</script>

<template>
  <input v-model="model" />
</template>

(아주)지난 포스팅에서 v-model의 대략적인 사용법에 대해 글을 적은 적이 있습니다. 개인적으로 vue의 가장 강력한 장점 중 하나라 생각하는데 최근에 나온 vue 3.4에서 이걸 더욱 편리하게 해주는 defineModel이 등장했습니다.

<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

뭔 차이야...? 생각 할 수 있는데 좀 더 봅시다.

InputField.vue

<script setup lang="ts">
const modelValue = defineModel<string>()
</script>

<template>
  <input
    type="text"
    v-model="modelValue"
    class="border px-2 py-1 rounded"
    placeholder="입력하세요"
  />
</template>

App.vue

<script setup lang="ts">
import { ref } from 'vue'
import InputField from './components/InputField.vue'

const text = ref('초기값')
</script>

<template>
  <div class="p-4">
    <InputField v-model="text" />
    <p class="mt-2 text-gray-600">입력된 값: {{ text }}</p>
  </div>
</template>

코드를 작성하다 보면 공통 컴포넌트를 만들고 부모가 상태값을 제어하는 경우가 많습니다. vue에선 v-model을 통해 양방향 데이터 바인딩으로 값을 구현하죠.

부모에서 컴포넌트에 v-model에 제어할 상태값을 넣은 후 자식에서 그 값을 defineModel로 가져와 다시 v-model로 제어합니다. 이걸 defineModel 없이 써 봅시다.

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps<{
  modelValue: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()
</script>

<template>
  <input
    type="text"
    :value="props.modelValue"
    @input="event => emit('update:modelValue', event.target.value)"
    class="border px-2 py-1 rounded"
    placeholder="입력하세요"
  />
</template>

defineModel이 없을땐 수동으로 modelValue를 명시하고 emit으로 처리해야 합니다. 타입도 직접 명시해야 하며 코드량도 당연히 많아지겠죠.

input 하나만 해도 이정돈데, 더 많은 상태값을 다뤄야 한다면 그만큼 코드의 리팩토링이 힘들어질 수 있습니다.

defineModel을 썼을 때

UserForm.vue

<script setup lang="ts">
type UserInfo = {
  name: string
  email: string
}

const userInfo = defineModel<UserInfo>('userInfo')
const agreed = defineModel<boolean>('agreed', { required : true })
</script>

<template>
  <div class="space-y-3">
    <input
      v-model="userInfo.name"
      placeholder="이름"
      class="border px-2 py-1 rounded w-full"
    />
    <input
      v-model="userInfo.email"
      placeholder="이메일"
      class="border px-2 py-1 rounded w-full"
    />
    <label class="flex items-center gap-2">
      <input type="checkbox" v-model="agreed" />
      약관에 동의합니다
    </label>
  </div>
</template>

App.vue

<script setup lang="ts">
import { ref } from 'vue'
import UserForm from './components/UserForm.vue'

const userInfo = ref({ name: '홍길동', email: 'hong@example.com' })
const agreed = ref(false)
</script>

<template>
  <UserForm v-model:userInfo="userInfo" v-model:agreed="agreed" />
  <p>입력 결과: {{ userInfo }} / 동의 여부: {{ agreed }}</p>
</template>

defineModel 이전

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

type UserInfo = {
  name: string
  email: string
}

const props = defineProps<{
  userInfo: UserInfo
  agreed: boolean
}>()

const emit = defineEmits<{
  (e: 'update:userInfo', value: UserInfo): void
  (e: 'update:agreed', value: boolean): void
}>()

// 반응형 객체로 만들기 위해 복사
const localUserInfo = { ...props.userInfo }

watchEffect(() => {
  emit('update:userInfo', localUserInfo)
})
</script>

<template>
  <div class="space-y-3">
    <input
      v-model="localUserInfo.name"
      placeholder="이름"
      class="border px-2 py-1 rounded w-full"
    />
    <input
      v-model="localUserInfo.email"
      placeholder="이메일"
      class="border px-2 py-1 rounded w-full"
    />
    <label class="flex items-center gap-2">
      <input
        type="checkbox"
        :checked="props.agreed"
        @change="e => emit('update:agreed', e.target.checked)"
      />
      약관에 동의합니다
    </label>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import UserForm from './components/UserForm.vue'

const userInfo = ref({ name: '홍길동', email: 'hong@example.com' })
const agreed = ref(false)
</script>

<template>
  <UserForm v-model:userInfo="userInfo" v-model:agreed="agreed" />
</template>

안 써도 되긴 하는데... 안 쓸 이유가 없겠죠?

기능 분할 설계(Feature-Sliced Design, FSD)란

weaklion — Wed, 23 Apr 2025 13:09:34 +0900

Feature-Sliced Design(FSD)는 프론트엔드 애플리케이션의 구조를 잡는 아키텍처 방법론입니다. FSD는 이름 그대로 기능 단위로 분할하는 것에 초점이 맞춰져 있으며 현재 많은 주목을 받는 아키텍처 중에 하나 이기도 합니다.

FSD는 대부분의 프로젝트에 적합하다고 공식에선 이야기합니다. 프론트엔드를 개발하고 있는 모든 환경에 적합하며 라이브러리가 아닌 애플리케이션을 만들고 있다면 FSD는 좋은 선택이 될 수 있습니다.

특징

명시적인 비즈니스 로직

도메인 스코프 덕분에 찾고자 하는 로직을 쉽게 발견할 수 있습니다.

유연성

아키텍쳐 구성 요소를 새로운 요구사항에 맞춰 유연하게 교체하고 추가할 수 있습니다.

기술 부채 및 리팩토링

각 모듈을 부작용 없이 독립적으로 수정, 재작성할 수 있습니다.

명시적인 코드 재사용

DRY원칙과 로컬 커스터마이징 사이에 균형을 유지합니다.

FSD의 구조

https://feature-sliced.github.io/documentation

세 개의 구조가 있으며 레이어, 슬라이스, 세그먼트로 표시되어 있습니다.

위 이미지를 토대로 3개의 구조가 어떤 건지에 대해 간략하게 알아보도록 하겠습니다.

레이어(Layers)

레이어는 FSD의 가장 상위 수준 구조입니다. 총 7개로 제한되어 있으며 모든 레이어를 사용할 필요는 없지만 네이밍 규칙은 지키는 걸 권장하고 있습니다. 각 네이밍에 해당하는 역할은 아래와 같습니다.

App - 앱을 실행하는 모든 것 - 라우팅, 진입점, 전역 스타일, 프로바이더.
Processes(더 이상 사용되지 않음) - 페이지 간 복잡한 시나리오.
Pages - 전체 페이지 또는 중첩 라우팅에서 페이지의 주요 부분.
Widgets - 독립적으로 작동하는 대규모 기능 또는 UI 컴포넌트, 보통 하나의 완전한 기능.
Features - 제품 전반에 걸쳐 재사용되는 기능 구현체로, 사용자에게 실질적인 비즈니스 가치를 제공하는 동작 (ex: 리뷰 작성, 제품 평가 등).
Entities - 프로젝트가 다루는 비즈니스 엔티티.(ex : 사용자, 리뷰, 댓글 등)
Shared - 재사용 가능한 기능, 특히 프로젝트/비즈니스의 특성과 분리되어 있을 때. (ex : ui kit, axios config, config 등)

App과 Shared는 다른 레이어들과 달리 슬라이스를 가지지 않고, 세그먼트로만 구성됩니다.

위 계층구조에서 하위 레이어는 상위 레이어의 컴포넌트를 사용할 수 없습니다. 계층 구조에서 레이어의 위치가 낮을 수록 더 많은 곳에서 사용될 확률이 높으며 이러한 선형적인 흐름을 유지해야 관리하기가 더 편합니다.

슬라이스(Slices)

슬라이스는 비즈니스 도메인 별로 코드를 분할합니다. 논리적으로 관련된 모듈들을 그룹회하고 이를 유지함으로써 독립성을 높여줍니다. 슬라이스는 같은 레이어 안에서 다른 슬라이스를 참조할 수 없으며 이 규칙은 높은 응집도와 낮은 결합도 유지에 도움이 됩니다.

슬라이스 이름은 비즈니스 영역에 따라 결정되므로 표준화되어있지 않습니다.용도에 따라 개발자들끼리 네이밍을 마음대로 지어도 상관없습니다.

src/
	features/
			auth/ //인증 슬라이스
			order-list // 상품 리스트 슬라이스
			buy-product // 상품 구매 슬라이스

세그먼트(Segments)

세그먼트는 슬라이스 내의 코드를 나누는데 도움이 됩니다. 세그먼트의 구성 역시 자유롭게 사용 가능하지만, 일반적으로 권장하는 몇가지 세그먼트들이 있습니다.

ui - UI와 관련된 모든 것: UI 컴포넌트, 날짜 포맷터, 스타일 등.
api - 백엔드 상호작용: request 함수, 데이터 타입, mapper 등.
model - 데이터 모델: 스키마, 인터페이스, 스토어, 비즈니스 로직.
lib - 슬라이스 안에 있는 다른 모듈이 필요로 하는 라이브러리 코드.
config - 설정 파일과 기능
const - 필요한 상수

공개 API

각 슬라이스와 세그먼트를 외부에 노출할 수 있는 인터페이스 입니다. index.js 또는 index.ts로 정의하며, 이 파일을 통해 슬라이스, 세그먼트에서 필요한 기능만 외부로 추출하여 독립성을 높일 수 있습니다.

공개 API에 대한 규칙은 아래와 같습니다.

애플리케이션 슬라이스와 세그먼트는 공개 api 인덱스 파일에 정의된 슬라이스의 기능과 컴포넌트만 사용합니다.
정의되지 않는 것들은 격리된 것으로 간주해 슬라이스, 혹은 세그먼트 내부에서만 접근할 수 있습니다.

export { Button } from './Button';
export { Modal} from './Modal';
export { Input } from './Input';

...

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

weaklion — Thu, 27 Mar 2025 15:11:45 +0900

오늘은 gemini 연결하는 방법과 나머지에 대해서 알아보도록 하겠습니다.

캐릭터는 gemini에게 프롬프트를 통해서 물어본 뒤, 그 답을 가져와서 뿌리게 되는데 그러기 위해선 gemini의 api 키가 필요합니다.

api key는 google ai studio에서 가져올 수 있습니다.

https://ai.google.dev

Gemini Developer API | Gemma open models | Google AI for Developers

Build with Gemini 2.0 Flash, 2.0 Pro, and Gemma using the Gemini API and Google AI Studio.

ai.google.dev

위 버튼을 누르고 하라는대로만 하면 api key를 쉽게 얻을 수 있습니다.

이후 api key를 집어넣고 연동합니다.

저는 .env에 api key를 집어넣었고 action에서 가져오는 식으로 사용했습니다.

npm install @google/generative-ai

google 에서 지원하는 generative-ai 라이브러리를 설치 후 ai를 연동합니다.

"use server";

import { GoogleGenerativeAI } from "@google/generative-ai";

const generativeAI = new GoogleGenerativeAI(process.env.API_KEY || "");

const model = generativeAI.getGenerativeModel({
  model: "gemini-1.5-flash",
  generationConfig: { responseMimeType: "application/json" },
});
{
}
export async function getData(count: number, gender: string) {
  try {
    const result = await model.generateContent(
      `웹소설에 등장하는 가상의 한국인 캐릭터들을 생성해주세요. 성별이 **반드시** ${gender}인 ${count}명의 캐릭터를 생성하여 characters 배열에 넣고 JSON 형식으로 출력해주세요. 각 캐릭터는 다음 속성을 가져야 합니다.

- name: 무작위로 선택한 한국인 이름 (문자열)
- age: 나이 (문자열, 예: "25세") (다양한 나이대를 섞어서 무작위로 선택)
- gender: 성별 (문자열, **반드시** "${gender}"로 지정)
- appearance: 외형적 특징을 **상세하게** 설명합니다. 눈 색깔, 머리 스타일, 키, 체형, 옷 스타일 등을 포함하여 구체적으로 묘사 (문자열). (각 캐릭터마다 다른 특징을 갖도록 무작위로 선택)
- background: 캐릭터의 간단한 배경 설명을 구체적으로 작성합니다. 성장 환경, 가족 관계, 특별한 경험 등을 포함하여 각 캐릭터마다 고유한 스토리를 부여 (문자열).
- occupation: 직업 (문자열). (다양한 직업을 무작위로 선택)

출력 형식:
{
  "characters": [
    {
      "name": string,
      "age": string,
      "gender": string,
      "appearance": string,
      "background": string,
      "occupation": string
    },
    ...
  ]
}

각 필드에 대해 구체적이고 다양한 설명을 제공해주세요. 캐릭터들은 서로 다른 특징과 배경을 가져야 하며, 성별은 반드시 프롬프트에 지정된 ${gender}로 생성되어야 합니다. 각 캐릭터는 다른 나이, 직업을 갖도록 해주세요.`
    );
    const response = await result.response;
    const text = await response.text();
    if (text) {
      console.log(text, "결과 텍스트 ");
      return text;
    }
  } catch (e) {
    console.error(e, "error");
  }
}

export async function getList(name: string) {
  try {
    const result = await model.generateContent(
      `앞서 생성된 캐릭터 중 ${name}의 상세한 배경을 제공해주세요. 다음 요소들을 포함하여 자세히 설명해주세요:

1. 가족 관계
2. 성장 환경
3. 교육 배경
4. 주요 삶의 경험이나 전환점
5. 현재 상황에 이르게 된 과정
6. 성격 형성에 영향을 준 사건들
7. 주요 인간관계
8. 꿈과 목표
9. 강점과 약점
10. 특별한 기술이나 재능

형식은 다음과 같이 JSON으로 출력해주세요:

{
  "characterBackground": {
    "name": "${name}",
    "detailedBackground": {
      "familyRelations": string,
      "growthEnvironment": string,
      "educationalBackground": string,
      "lifeExperiences": string,
      "pathToCurrentSituation": string,
      "personalityShapingEvents": string,
      "keyRelationships": string,
      "dreamsAndGoals": string,
      "strengthsAndWeaknesses": string,
      "specialSkillsOrTalents": string
    }
  }
}

각 항목에 대해 2-3문장 정도의 구체적인 설명을 제공해주세요. 캐릭터의 기존 정보와 일관성을 유지하면서, 풍부하고 현실감 있는 배경을 만들어주세요.`
    );
    const response = await result.response;
    const text = await response.text();
    if (text) {
      console.log(text, "결과");
      return text;
    }
  } catch (e) {
    console.error(e, "error");
  }
}

//app/detail/actions.ts

이후 서버 액션에서 설치한 라이브러리에 가져온 api key를 넣고 모델을 만듭니다. 저는 gemeni-1.5를 이용했는데 모델은 다른 것을 이용해도 상관없습니다.

다만 모델에 따라 구글에서 제공하는 가격정책이 다 다르니 이부분은 아래 참조해주세요.

https://ai.google.dev/gemini-api/docs/pricing?hl=ko

Gemini Developer API 가격 책정 | Gemini API | Google AI for Developers

Gemini Developer API 가격 책정

ai.google.dev

api key를 통해서 통신할 때 프롬프트는 정확해야 합니다. 원하는 출력 형식과 인풋을 명확하게 알려줘야 원하는 값을 주기 때문에 되도록 프롬프트를 정확하게 설정합니다.

이 부분은 사람에 따라 많은 팁이 있겠지만 개인적으론 물어볼 모델에게 대략적인 베이스를 물어본 뒤 받은 프롬프트를 다시 모델에게 물어 정확도를 얻는게 가장 결과가 만족스러웠습니다.

이제 서버 액션에 있는 api를 메인에 있는 버튼에 연결하면 끝입니다. 코드엔 react에서 제공하는 suspense를 붙여 ux를 좋게 만들려고 했습니다.

근데 ai에 api로 요청하면 response를 200으로 만든 뒤, 데이터가 나올때 까지 기다리더라구요. 그래서 그냥 loading 상태값 만들어서 loading이 false면 데이터 안보여주도록 만들어 줬습니다.

이후 상세페이지와 리스트엔 요청한 모델에 대한 값을 그대로 보여주면 끝.

export interface Character {
  name: string;
  age: number;
  gender: string;
  appearance: string;
  background: string;
  occupation: string;
}

export interface CharacterBackground {
  name: string;
  detailedBackground: {
    familyRelations: string;
    growthEnvironment: string;
    educationalBackground: string;
    lifeExperiences: string;
    pathToCurrentSituation: string;
    personalityShapingEvents: string;
    keyRelationships: string;
    dreamsAndGoals: string;
    strengthsAndWeaknesses: string;
    specialSkillsOrTalents: string;
  };
}

"use client";

import { CharacterBackground } from "@/app/model";

export default function Client({
  background,
}: {
  background: CharacterBackground;
}) {
  const detail = background;

  return (
    <main className="flex flex-col items-center justify-center size-full">
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        이름 : {detail.name}
      </h3>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        가족 관계 : {detail.detailedBackground.familyRelations}
      </h3>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        성장 환경 : {detail.detailedBackground.growthEnvironment}
      </h3>

      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        교육 배경 : {detail.detailedBackground.educationalBackground}
      </h3>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        주요 삶의 경험이나 전환점 : {detail.detailedBackground.lifeExperiences}
      </h3>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        현재 상황에 이르게 된 과정 :
        {detail.detailedBackground.pathToCurrentSituation}
      </h3>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        성격 형성에 영향을 준 사건들 :{" "}
        {detail.detailedBackground.personalityShapingEvents}
      </h3>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        주요 인간관계: {detail.detailedBackground.keyRelationships}
      </h3>

      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        꿈과 목표: {detail.detailedBackground.dreamsAndGoals}
      </h3>
      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        강점과 약점: {detail.detailedBackground.strengthsAndWeaknesses}
      </h3>

      <h3 className="mt-8 scroll-m-20 text-2xl font-semibold tracking-tight">
        특별한 기술이나 재능 :{detail.detailedBackground.specialSkillsOrTalents}
      </h3>
    </main>
  );
}

딱 보면 알죠?

네 이게 끝입니다. 사실 이번 프로젝트는 ai를 어떻게 사용할지에 대해 초점을 둔지라 ui에 대해선 깊게 생각하지 않았습니다.

덕분에 ai에 대해 공부할 수 있게 됐네요. next는 안 쓸 거 같습니다.

사실 이 프로젝트를 만들고 이미 5~6개월 정도가 흘렀습니다. 만드는데는 1주일도 안걸린 게 설명하려다 보니 더 오랜 시간이 걸렸네요.

제 게으름을 좀 반성해야겠습니다.

여담인데, 이 이후로 next를 실제로 안 썼습니다. 대신 react router v7이 나왔다고 해서 거기 문서나 조금 읽어본 게 다네요. 만약 다음에 react에 ssr이 필요하다면 react router 7을 써보지 않을까 싶습니다. 실제로 next에 불편함을 느낀 사람이 많이 쓰고 있다고도 하고요.

어쨌든 이제 코드에 대한 설명은 끝났습니다. 최종 코드는 아래 repo를 참조해주세요.

http://git@github.com:weaklion/k-character-generator.git

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

weaklion — Wed, 19 Feb 2025 18:27:30 +0900

오늘은 app 폴더 내부에 대해 알아보도록 합시다.

여담인데 최근 rust 언어를 공부하고 있습니다.

개발을 점점 하다보니 로우 랭귀지를 배울 필요성을 느껴서 공부를 시작했는데 배워보니까 꽤나 어렵고 흥미로운 언어더군요.

시간이 난다면 rust에 대해서도 포스트를 남겨보도록 하겠습니다.

다시 돌아와서. 우선 저번에도 말했다 시피 간단한 프로젝트라 페이지를 많이 만들지 않았습니다.

main으로 쓸 main 페이지 폴더, 그리고 결과가 나올 list. 더 구체적인 결과를 나타낼 detail 페이지. 총 3가지입니다.

next는 client와 server를 나눌 것을 권장하고 있는데, 저는 client에서 사용될 코드를 client.tsx로 정의했고, route의 시작지점이 될

페이지이자 서버 컴포넌트는 page.tsx로 정의했습니다.

처음 보여질 페이지는 main입니다. 소괄호 안에 이름을 적고 폴더를 만든다면 그 route로 이동하지 않고 코드를 작성할 수 있습니다.

ex) 만약 main 폴더를 만들었다면 /main 의 라우트가 생기겠지만, 소괄호로 감싼다면 생기지 않습니다.

가장 상위에 만들었기 때문에 localhost:3000. 즉 첫 페이지엔 (main)폴더 안에 page.tsx가 실행이 되겠죠.

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

<suspense>는 컴포넌트의 자식 요소가 렌더링 되기 전 로딩을 선언함으로써 사용자의 경험을 개선할 수 있게 합니다.

위 코드를 해석하자면 client 페이지가 렌더링 되기 전 loader 컴포넌트를 띄우고 렌더링을 마치면 client가 띄어지는 거죠.

"use client";

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { useState } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { Input } from "@/components/ui/input";
import Loader from "@/components/loader";

export default function Home() {
  const [gender, setGender] = useState<"man" | "women">("man");
  const [count, setCount] = useState(1);
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();

  const setQueryParams = (params: {
    gender: "man" | "women";
    count: string;
  }) => {
    const urlSearchParams = new URLSearchParams(searchParams);
    Object.entries(params).forEach(([name, value]) => {
      urlSearchParams.set(name, value);
    });

    return urlSearchParams.toString();
  };

  const handleGenderChange = (value: "man" | "women") => {
    setGender(value);
  };

  const onCreateCharacter = () => {
    const params = {
      gender: gender,
      count: count.toString(),
    };
    const qs = setQueryParams(params);
    setLoading(true);
    router.push(`/list?${qs}`);
  };

  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-12">
      <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
        한국인 캐릭터 생성기
      </h1>

      <h3 className="scroll-m-20 my-4 text-2xl font-semibold tracking-tight">
        성별
      </h3>
      <Select
        onValueChange={(value: "man" | "women") => handleGenderChange(value)}
      >
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="성별을 선택해주세요." />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectItem value="man">남자</SelectItem>
            <SelectItem value="women">여자</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>

      <h3 className="scroll-m-20 my-4 text-2xl font-semibold tracking-tight">
        개수
      </h3>

      <Input
        type="number"
        className="max-w-48"
        value={count}
        onChange={(e) => setCount(e.target.valueAsNumber)}
        placeholder="개수를 입력해주세요."
      />

      <Button className="my-4" onClick={onCreateCharacter}>
        생성
      </Button>
      {loading ? (
        <div className="flex flex-col py-4 gap-2 justify-center">
          <Loader />
          잠시만 기다려 주세요..
        </div>
      ) : (
        ""
      )}
    </main>
  );
}

//(main)/client.tsx

client.tsx 코드입니다. 지금은 코드를 다 보여줬지만, 이 이후론 제가 코딩하면서 인상깊었던 코드에 대해서만 적을까 합니다.

return 되는 템플릿엔 특별한 부분이 없으니 넘어가고, 다른 것 중 특이한 건 라우팅을 하는 방식이었습니다.

저는 이전번에 vue를 쓰고 vue-router를 쓰면서 routing에 썩 불편함을 느끼진 못했습니다. 하지만 이번에 next의 라우팅을 쓰면서 처음으로 불편함을 느꼈습니다.

첫번째로 버전이 올라가면서 쿼리스트링을 통한 방식이 바뀌었다는 점.

useRouter를 이용해서 하는 이전 방식과 다르게 이번엔 url에 원하는 queryString을 직접 집어 넣어야만 합니다. URLSearchParams 인터페이스를 이용해서 하나하나씩 set 해줘야만 하죠.

물론 저도 찾다가 답이 안나와서 한 거긴 합니다. 더 좋은 방식이 있으면 답변해주시면 감사하겠습니다.

저는 아레 레퍼런스를 참조했습니다.

https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams

URLSearchParams - Web API | MDN

URLSearchParams 인터페이스는 URL의 쿼리 문자열을 대상으로 작업할 수 있는 유틸리티 메서드를 정의합니다.

developer.mozilla.org

https://medium.com/@lucarestagno/query-string-params-in-next-js-14-with-app-router-df44c8efa1f9

Query string params in Next.js (14) with App Router

The query string is a part of the URL (Uniform Resource Locator) that assigns values to specific parameters.

medium.com

urlSearchParams로 queryString을 집어넣고 그 url을 router로 push 합니다.

router.push({ name : "..." , params : {...} })로 딸깍하다가 이걸 다른 방식으로 하더니 영 답답했습니다.

두 번째론 그냥 next js가 불편하더군요. 버전이 올라갈수록 방식 자체가 바뀌는지라 정보를 찾기가 힘들었습니다. 이 부분은 라우팅 뿐만 아니라 다른 것도 마찬가지인지라 next.js를 쓰는 다른 유저들도 만만찮게 불편을 토로하더군요.

어쨌든 router.push로 변환한 url을 넣으면 라우팅을 하는데, 이 때 input에 넣은 값들을 ai의 프롬프트에 집어 넣습니다.

그 과정에서 원래는 suspense로 처리하면 될 걸, 굳이 loading을 넣어서 처리했는데요.

이건 api에 값을 requeest했을 때 곧바로 200으로 상태값이 떨어지는데도 response를 늦게 불러와서 제가 loading을 제어하기 위해 넣었습니다. 이건 프롬프트에 대한 결과를 다룰 때 더 자세히 봅시다.

이제 gemini와 통신하기 위한 api를 만들어야 합니다. 저는 next.js의 서버 액션을 통해 api를 만들었는데요. 그 전에 gemini와 연동하기 위한 준비를 해야겠죠.

그 과정은 다음 시간에... 알아 보도록 하겠습니다.

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

weaklion — Thu, 23 Jan 2025 18:10:43 +0900

저번까지는 Intro였고요. 오늘부터는 본격적으로 코딩을 해봅시다. 다만 코드의 구조가 간단하고, 얼마 없는지라 꽤나 싱겁게 끝날 수도 있어요.

이전에 말했다시피 저는 app router를 사용했습니다. app router를 쓰게 되면 기본적으로

위와 같이 폴더가 만들어질겁니다.

처음 프로젝트가 만들어지면 기본으로 next.js 템플릿 스타일과 페이지가 있을텐데, 지웁시다. 그리고 메인화면을 원하는대로 수정합시다.

여기서부터 코드를 어떻게 짜야하는지 하나하나 가르쳐 드리진 않겠습니다. 저도 아직 next.js를 모르고, react도 애기 수준이라 코드 작성법은 오히려 다른 분의 블로그가 더 잘 되있을거에요.

그래서 지금부턴 제가 짠 코드를 보여드리고, 왜 이런식으로 짰는지에 대해서만 설명을 드리도록 하겠습니다.

우선 폴더 구조 입니다.

app 폴더는 기본적으로 app router를 했을 때 생성되있는 폴더입니다. typescript로 구성했기 떄문에 필요한 타입 정의를 위해 model이라는 폴더를 만들었고, 그 안에서 타입을 정의 했습니다.

components라는 폴더엔 공용으로 사용할 ui들이 정의 되있는데요. 여기서 폴더 구조를 보면 슬슬 눈치채셨겠지만, components 폴더는 제가 스스로 만든 게 아니라 shadcn 라이브러리를 사용했기 때문에 생성된 폴더입니다.

https://ui.shadcn.com/docs

현재 리액트에서 가장 인기가 많은 css 라이브러리로, shadcn을 이용해 컴포넌트를 구축하기 위해선, components 폴더와 ui폴더가 있어야만 합니다. shadcn 내부에서 tailwindcss를 사용하기 때문에 그것도 포함이 되어야 하고요.

shadcn 에서 가져온 컴포넌트들은 모두 ui에 만들어집니다. 그외에 제가 사용할 컴포넌트들은 그냥 ui 폴더 바깥에다가 만들었습니다.

"use client";

import { ChevronLeft } from "lucide-react";
import { Button } from "./ui/button";
import { useRouter } from "next/navigation";

export default function Header() {
  const router = useRouter();

  const onClickBackButton = () => {
    router.back();
  };

  return (
    <header className="sticky top-0 z-30 flex h-14 items-center bg-background">
      <Button
        size="icon"
        variant="ghost"
        className="ml-4"
        onClick={onClickBackButton}
      >
        <ChevronLeft />
      </Button>
    </header>
  );
}
// components/header.tsx

간단하게 만들어 본 header입니다. 이전에도 말했다시피 app router는 server와 client 컴포넌트를 따로 구분하기 때문에, header 컴포넌트는 클라이언트에서 사용하기 위해 'use client'를 사용했습니다.

export default function Loader() {
  return (
    <div role="status" className="flex justify-center">
      <svg
        aria-hidden="true"
        className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
        viewBox="0 0 100 101"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
          fill="currentColor"
        />
        <path
          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
          fill="currentFill"
        />
      </svg>
      <span className="sr-only">Loading...</span>
    </div>
  );
}
// components/loader.tsx

로더는 로더..svg로 그냥 로더만 돌아가도록 구성했습니다. 딱히 뭐 없어요.

lib 폴더도 shadcn을 설치하면 추가되는 폴더입니다. 컴포넌트 내부에서 tailwind-merge를 쓰기 위함으로, 알 필요는 없지만 굳이 알자면 이미 컴포넌트 내부에서 구현한 인라인 클래스 스타일과 밖에서 선언한 클래스 스타일이 중복되는 게 있을 때 override하여 밖에서 선언한 클래스로 선언하게 만들어주는 라이브러리 입니다.

(ex : 컴포넌트 내부에서 container 스타일을 px-1 으로 선언하고, 외부에서 p-3로 선언했을 때 p-3로 만들어줌)

tailwindcss만을 위한 라이브러리로, shadcn 내부 컴포넌트에서 주로 사용됩니다.

model 폴더엔 컴포넌트나 api 통신시 사용되는 타입들을 선언했습니다. 지금은 작은 프로젝트라 index.ts 하나만으로 가능하겠지만, 규모가 커진다면 더 깔끔하게 바꿔야겠죠.

export interface Character {
  name: string;
  age: number;
  gender: string;
  appearance: string;
  background: string;
  occupation: string;
}

export interface CharacterBackground {
  name: string;
  detailedBackground: {
    familyRelations: string;
    growthEnvironment: string;
    educationalBackground: string;
    lifeExperiences: string;
    pathToCurrentSituation: string;
    personalityShapingEvents: string;
    keyRelationships: string;
    dreamsAndGoals: string;
    strengthsAndWeaknesses: string;
    specialSkillsOrTalents: string;
  };
}

model/index.ts

Charcter 인터페이스는 추후 api를 호출 할 때 필요한 타입으로, 추후 gemini 와 데이터를 주고받을 때 사용될 타입입니다.

CharacterBackground는 캐릭터의 자세한 배경을 알고싶을 때 사용하는 타입으로, 추후 둘을 어떻게 사용할지 코드를 보시면 더 잘 이해가 될 것 같네요.

이제 마지막으로 app 폴더만 남았네요. 여기서부터가 진짜인데, 진짜는 다음 시간에 알아보겠습니다.

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

weaklion — Thu, 9 Jan 2025 18:21:05 +0900

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

그 전에, 우리는 지난 번 선택했던 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

A playground to explore new Next.js App Router features such as nested layouts, instant loading states, streaming, and component level data fetching.

app-router.vercel.app

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

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