개발자 / 오픈소스

예시로 살펴보는 넥스트JS용 풀스택 프레임워크 ‘블리츠JS’

Matthew Tyson | InfoWorld 2022.09.21
블리츠JS(Blitz.js)는 리액트(React)와 넥스트JS(Next.js)를 기반으로 구축된 자바스크립트 프레임워크다. 블리츠JS는 다른 기술과 구별되는 뚜렷한 철학이 있는 풀스택 프레임워크다. 특히 제로(zero)-API 접근법을 추구하는 특징이 있는데 이를 통해 프레임워크가 사용자 인터페이스를 백엔드 데이터스토어에 연결한다. 흥미롭고 독특한 자바스크립트 애플리케이션 개발을 블리츠JS를 활용해 다음과 같이 구현해보자. 
 
ⓒ Getty Images Bank 
 

블리츠 데모 설정

일단 npm i blitz@alpha -g 명령을 사용해서 블리츠를 전역 NPM 패키지로 추가해야한다. 그 다음 blitz new demo-app을 입력해 나오는 툴로 새 프로젝트를 만들 수 있다. 다음은 데모 애플리케이션을 위한 예시 코드다. 

$ blitz new demo-app
✔ Pick which language you'd like to use for your new blitz project › Javascript
✔ Pick which template you'd like to use for your new blitz project › full
✔ Install dependencies? … yes
✔ Pick which form you'd like to use for your new blitz project › React Hook Form
Hang tight while we set up your new Blitz app!

예시 1. 새 블리츠 애플리케이션 만들기

모든 종속 항목 설치가 끝나면, 방금 만들어진 새 디렉터리로(cd demo-app) 이동해서 blitz dev 명령어를 입력한 후 개발 서버를 시작할 수 있다. 이제 서버가 localhost:3000에서 실행되며 아래와 같은 시작 화면을 볼 수 있을 것이다.
 
ⓒ 블리츠JS 시작화면

가장 먼저 눈에 띄는 부분은 블리츠의 생성기가 다른 프론트엔드 프레임워크와 달리 더 세부적인 전체 스택 스캐폴딩을 지원한다는 점이다. 특히 사용자 생성과 로그인을 제공한다. 이 기능으로 사용자를 만들고 로그인/로그아웃시킬 수 있다.

이제 시작 페이지의 제안에 나온 것처럼 명령줄을 통해 모델을 추가해 보자. 명령줄로 이동해서 CTRL-C를 눌러 개발 서버를 먼저 중지시킨다. 그다음 blitz generate all project name:string을 입력한다. 이 명령을 실행하면 project라는 새 모델 객체가 추가된다. 여기서 name이라는 문자열 필드 하나를 볼 수 있다. 

이런 과정이 다 완료되면, prisma migrate dev 실행 여부를 확인하는 메시지를 확인해야 한다. 블리츠는 파일 기반 SQLite 데이터베이스를 설치해서 사용하며, 이 데이터베이스는 객체 관계 매핑(ORM) 계층인 프리즈마(Prisma)를 통해 매핑된다. SQLite와 프리즈마는 각각 데이터 객체가 지속되는 장소와 방법을 담당한다. prisma migrate dev 명령은 프리즈마에 dev 데이터베이스(개발에 사용되는 기본 데이터베이스)의 변경을 반영하여 자체적으로 업데이트하도록 한다.

참고로 블리츠에서 데이터베이스와 ORM 계층은 모듈형이므로 원할 경우 기본 옵션 대신 몽고DB 등을 사용할 수 있다. 대신 다른 DB를 선택할 경우, 블리츠에 변경 관련 이름을 제공해야 한다. 변경 이름은 추적 용도로 사용된다.
 

새 프로젝트 생성

생성 초기 작업이 완료되면 blitz dev 명령으로 서버를 다시 시작한다. 브라우저로 돌아와서 localhost:3000/projects를 방문해보자. 새 사용자 인터페이스가 표시되고, 이를 사용해서 새 프로젝트를 만들 수 있다. 프로젝트 만들기(Create Project)를 선택하면 된다. 로그인이 되지 않은 상태에서 새 프로젝트 만들기를 시도하면 “Error: You are not authenticated”라는 메시지가 표시되는데 이를 통해 인증 작업이 진행 중임을 알 수 있다.

이제 사용자로 로그인해서 프로젝트 만들기(Create Project) 옵션을 다시 시도한다. 이번에는 이름 필드 한 개가 포함된 양식이 표시될 것이다. 프로젝트를 만들면 블리츠가 적절한 RESTful 스키마를 자동으로 설계하는 과정을 지켜볼 수 있다.

localhost:3000/projects 페이지에는 프로젝트 목록이 표시된다. 클릭하면 localhost:3000/projects/<ID>에서 프로젝트 세부 정보가 나온다. 편집과 삭제도 가능한, 완전한 CRUD 환경이다. 그렇다면 블리츠의 프로젝트 레이아웃은 어떤 형태일까. 다음 정보를 보면 블리츠의 관리 방식을 대략적으로 이해할 수 있다.
 
  • /project-root
    • /db
      • /db.sqlite: SQLite 엔진과 스키마
      • /schema.prisma: 프리즈마 ORM 매핑
      • /migrations: 마이그레이션을 보여주는 디렉터리(롤백에 유용)
    • /mailers: 암호 분실 메일러와 같은 메일러 구성을 위헌 스텁 포함
    • /jest.config.js: JEST 테스트 프레임워크 구성
    • /next.config.js: Next.js 구성 파일
    • /pages: React.js 및 Next.js 프론트엔드 파일
      • /api: 외부(블리츠 외) API 액세스 지원
      • /auth: 로그인, 로그아웃, 가입 페이지
      • /projects: project 엔티티용 페이지. 다른 객체도 동일한 패턴에 따름
    • /test: 테스트 파일(JEST)
    • /app: 앱 인프라
      • /blitz-client.js: 클라이언트 측 구성
      • /blitz-server.js: 서버 측 구성
        • /core: 애플리케이션의 구성요소, 후크 및 레이아웃
        • /projects: project 객체의 쿼리, 변이 및 구성요소
        • /auth 및 /user: 인증 관련 쿼리, 변이 및 구성요소
      • /integrations: 오스제로(Auth0), 센트리(Sentry)와 같은 써드 파티 통합
      • /package.json: dev와 같은 블리츠 스크립트를 포함하는 노드 구성 파일
      • /public: favicon과 같은 정적 파일
 

블리츠JS의 RPC

블리츠의 가장 특이한 점은 원격 프로시저 호출(Remote Procedure Calls), 즉 RPC를 사용한다는 것이다. REST 또는 GraphQL API를 사용하지 않고, 대신 서버 측 코드를 클라이언트 측 자바스크립트로 바로 가져오는 식이다. 그러면 블리츠가 서버 측 코드를 RPC 호출로 변환한다. 클라이언트 측 자바스크립트에서 직접 서버 측 코드에 액세스할 수 있으며 이를 위한 네트워크 상호작용은 블리츠가 구성한다.

이제 blitz-demo/pages/projects/[projectId]/edit.js에서 파일을 열어보자. 참고로 대괄호 구문은 넥스트JS에서 경로 슬러그를 처리하는 방식이다. projectID 변수는 요청을 처리하는 페이지에 노출되어 경로의 이 위치에 있는 매개변수의 값을 저장한다.
 

import { Suspense } from "react";
import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { useQuery, useMutation } from "@blitzjs/rpc";
import { useParam } from "@blitzjs/next";
import Layout from "app/core/layouts/Layout";
import getProject from "app/projects/queries/getProject";
import updateProject from "app/projects/mutations/updateProject";
import { ProjectForm, FORM_ERROR } from "app/projects/components/ProjectForm";
export const EditProject = () => {
  const router = useRouter();
  const projectId = useParam("projectId", "number");
  const [project, { setQueryData }] = useQuery(
    getProject,
    { id: projectId },
    { staleTime: Infinity }
  );
  const [updateProjectMutation] = useMutation(updateProject);
  return (
    <>
      <Head>
        <title>Edit Project {project.id}</title>
      </Head>

      <div>
        <h1>Edit Project {project.id}</h1>
        <pre>{JSON.stringify(project, null, 2)}</pre>

        <ProjectForm
          submitText="Update Project" initialValues={project}
          onSubmit={async (values) => {
            try {
              const updated = await updateProjectMutation({
                id: project.id,
                ...values,
              });
              await setQueryData(updated);
              router.push({
                pathname: `/projects/[projectId]`,
                query: {
                  projectId: updated.id,
                },
              });
            } catch (error) {
              console.error(error);
              return {
                [FORM_ERROR]: error.toString(),
              };
            }
          }}
        />
      </div>
    </>
  );
};

const EditProjectPage = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <EditProject />
      </Suspense>

      <p>
        <Link
          href={{
            pathname: "/projects",
          }}
        >
          <a>Projects</a>
        </Link>
      </p>
    </div>
  );
};

EditProjectPage.authenticate = true;

EditProjectPage.getLayout = (page) => <Layout>{page}</Layout>;

export default EditProjectPage;

예시 2. 프로젝트 edit.js

먼저 import 라인을 보면 블리츠가 어떻게 작동하는지 이해하는 데 도움이 될 것이다. 데모는 리액트JS, 넥스트JS, 블리츠JS의 라이브러리를 섞어 사용했으며, 각 프로젝트의 구성요소, 블리츠에서 생성한 RPC를 가져온다.

양식 자체는 app/core/components/Form.js에서 내려오는 app/projects/components/ProjectForm.js에서 가져왔다. 폼JS(Form.js)는 양식이 작동하도록 하는 역할을 하는 react-hook-form 라이브러리를 확장한다. 또한 이 양식은 initialValues={project} 속성을 사용해 미리 채워진다. 그럼 해당 페이지는 어떤 방법으로 먼저 project 객체를 획득할까?

project 객체는 블리츠의 useQuery 후크를 통해 const [project, { setQueryData }] = useQuery{...} 라인으로 채워진다. 프로젝트 변수는 최종적으로 useQuery 후크의 결과를 저장하는 변수로 설정된다. setQueryData는 객체의 캐시를 업데이트해서 실행되도록 하는 블리츠의 함수다.

useQuery 및 setQueryData에 대한 더 자세한 내용은 블리츠 공식 문서에서 볼 수 있다. useQuery 후크는 getProject 함수에 의존하며 경로의 projectId 값으로 매개변수화된다. getProject 함수는 app/projects/queries/getProject.js에 있다. 이 줄기를 따라가 보면 getProject.js는 블리츠가 생성해서 /d 디렉터리로 내보내는 db 객체 호출에 의존한다는 것을 볼 수 있다. 예시 3은 getProject 호출이 어떻게 실행되는지를 보여준다.

import db from "db";
//...
const project = await db.project.findFirst({
    where: {
      id: input.id,
    },
  })

예시 3. getProject.js

db 객체는 프로젝트 멤버의 쿼리 API를 노출한다. 여기서는 이 객체를 사용해서 기준 API를 통해 프로젝트를 찾는다(전달한 projectId 매개변수를 사용). db API는 대부분 프리즈마 API이며 여기에 블리츠가 몇 가지 헬퍼를 덧붙인 것이다. 객체의 변형은 객체 생성 및 쿼리와 비슷한 방식으로 진행되는데, 뷰는 명시적인 API 호출 없이 프론트엔드를 백엔드에 연결하는 블리츠 인프라에 의존한다.

인증이 처리되는 방식을 알아보기 위해 projects/create.js를 보면, 다음 예시 4와 같이 내보낸 페이지에서 authenticate 필드가 true로 설정되었음을 알 수 있다.

NewProjectPage.authenticate = true;
export default NewProjectPage;

예시 4. 페이지 보호하기

여기서도 블리츠가 많은 작업과 세부 사항을 숨겨준다. 마찬가지로, 주 pages/index.js에서 현재 사용자는 useCurrentUser 후크로 검색된다. 쿼리 및 변형의 경우 세션 개체가 저장된 ctx 객체가 자동으로 인수로 전달된다. ctx.session.$isAuthorized()를 확인해 호출을 보호하는 queries/getProject.js 파일에서 후자의 기능이 실제 사용되는 모습을 볼 수 있다.

결론

블리츠는 독자적이고 강력한 풀스택 프레임워크다. 기반 작업이 어렵지 않으면서 내부적으로 많은 작업이 알아서 수행된다. 블리츠JS와 관련 개념을 이해하게 되면 기본 객체를 중심으로 CRUD를 구축하고, 간단한 권한 부여를 수행하는 등 이해하기 쉬운 경로를 따라 빠르게 개발을 진행할 수 있다.
editor@itworld.co.kr

회사명 : 한국IDG | 제호: ITWorld | 주소 : 서울시 중구 세종대로 23, 4층 우)04512
| 등록번호 : 서울 아00743 등록발행일자 : 2009년 01월 19일

발행인 : 박형미 | 편집인 : 박재곤 | 청소년보호책임자 : 한정규
| 사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.