현대 웹 개발에서 새로운 기술 스택이 나올 때마다 유튜버가 하나씩 만든다는 농담이 있을 정도입니다. 실제로 계산해 보면 두 번뿐이지만, 두 번이나 있었다는 게 오히려 신기하네요.

여기서 말하는 것은 모두가 잘 아는 Theo가 만든 T3 Stack과 최근에 등장한 JStack입니다. JStack는 Upstash의 DevRel 리드인 Josh가 만들었습니다. 사실 완전히 최근은 아니지만, 저는 항상 프레임워크가 어느 정도 성숙하고 커뮤니티 피드백이 쌓일 때까지 기다렸다가 써보는 편입니다.

그렇다면 결론적으로 저는 JStack를 T3 Stack보다 더 선호했을까요? 제가 가장 좋아하는 백엔드 서비스인 Appwrite와의 궁합은 어땠을까요? 그리고 Appwrite Sites에 호스팅할 수 있을지의 여부 등 하나씩 살펴봅시다. 렛츠기릿!

시작하기 (Getting Started)

먼저 프로젝트를 초기화해 봅시다:

bunx create-jstack-app@latest

선택한 옵션은 다음과 같습니다:

┌   jStack CLI
│
◇  What will your project be called?
│  testing-jstack-appwrite
│
◇  Which database ORM would you like to use?
│  None
│
◇  Should we run 'bun install' for you?
│  Yes

Using: bun

✔ testing-jstack-appwrite scaffolded successfully!

개발 서버를 실행해 기본 화면을 확인해 봅시다:

cd cd testing-jstack-appwrite
bun dev

JStack 기본 랜딩 페이지가 바로 표시됩니다

프로젝트 초기 설정

ORM 옵션을 건너뛰어도 JStack은 /src/server 폴더와 예제용 posts 라우터를 생성합니다. 다만 이 데이터베이스는 배열로만 구성된 목(Mock) DB라서 실제로는 데이터가 저장되지 않습니다.

// Mocked DB
interface Post {
  id: number;
  name: string;
}

const posts: Post[] = [
  {
    id: 1,
    name: "Hello World",
  },
];

일반적으로 ORM을 선택하지 않은 이유는, Appwrite가 자체적으로 스키마 관리 기능을 제공하기 때문에 별도의 ORM이 필요 없기 때문입니다. 이제 Appwrite 설정을 위해 https://cloud.appwrite.io 에서 프로젝트를 생성해봅시다.

Appwrite를 처음 사용한다면 공식 Web Quick Start 문서 를 먼저 보는 것을 추천드립니다.

Appwrite 프로젝트 생성 요약:

New project model (Appwrite)