블리츠 데모 설정
일단 npm i blitz@alpha -g 명령을 사용해서 블리츠를 전역 NPM 패키지로 추가해야한다. 그 다음 blitz new demo-app을 입력해 나오는 툴로 새 프로젝트를 만들 수 있다. 다음은 데모 애플리케이션을 위한 예시 코드다.예시 1. 새 블리츠 애플리케이션 만들기
$ 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!
모든 종속 항목 설치가 끝나면, 방금 만들어진 새 디렉터리로(cd demo-app) 이동해서 blitz dev 명령어를 입력한 후 개발 서버를 시작할 수 있다. 이제 서버가 localhost:3000에서 실행되며 아래와 같은 시작 화면을 볼 수 있을 것이다.
가장 먼저 눈에 띄는 부분은 블리츠의 생성기가 다른 프론트엔드 프레임워크와 달리 더 세부적인 전체 스택 스캐폴딩을 지원한다는 점이다. 특히 사용자 생성과 로그인을 제공한다. 이 기능으로 사용자를 만들고 로그인/로그아웃시킬 수 있다.
이제 시작 페이지의 제안에 나온 것처럼 명령줄을 통해 모델을 추가해 보자. 명령줄로 이동해서 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 변수는 요청을 처리하는 페이지에 노출되어 경로의 이 위치에 있는 매개변수의 값을 저장한다.
예시 2. 프로젝트 edit.js
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;
먼저 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 호출이 어떻게 실행되는지를 보여준다.
예시 3. getProject.js
import db from "db";
//...
const project = await db.project.findFirst({
where: {
id: input.id,
},
})
db 객체는 프로젝트 멤버의 쿼리 API를 노출한다. 여기서는 이 객체를 사용해서 기준 API를 통해 프로젝트를 찾는다(전달한 projectId 매개변수를 사용). db API는 대부분 프리즈마 API이며 여기에 블리츠가 몇 가지 헬퍼를 덧붙인 것이다. 객체의 변형은 객체 생성 및 쿼리와 비슷한 방식으로 진행되는데, 뷰는 명시적인 API 호출 없이 프론트엔드를 백엔드에 연결하는 블리츠 인프라에 의존한다.
인증이 처리되는 방식을 알아보기 위해 projects/create.js를 보면, 다음 예시 4와 같이 내보낸 페이지에서 authenticate 필드가 true로 설정되었음을 알 수 있다.
예시 4. 페이지 보호하기
NewProjectPage.authenticate = true;
export default NewProjectPage;
여기서도 블리츠가 많은 작업과 세부 사항을 숨겨준다. 마찬가지로, 주 pages/index.js에서 현재 사용자는 useCurrentUser 후크로 검색된다. 쿼리 및 변형의 경우 세션 개체가 저장된 ctx 객체가 자동으로 인수로 전달된다. ctx.session.$isAuthorized()를 확인해 호출을 보호하는 queries/getProject.js 파일에서 후자의 기능이 실제 사용되는 모습을 볼 수 있다.
결론
블리츠는 독자적이고 강력한 풀스택 프레임워크다. 기반 작업이 어렵지 않으면서 내부적으로 많은 작업이 알아서 수행된다. 블리츠JS와 관련 개념을 이해하게 되면 기본 객체를 중심으로 CRUD를 구축하고, 간단한 권한 부여를 수행하는 등 이해하기 쉬운 경로를 따라 빠르게 개발을 진행할 수 있다.editor@itworld.co.kr
함께 보면 좋은 콘텐츠
Sponsored
Surfshark
“유료 VPN, 분명한 가치 있다” VPN 선택 가이드
ⓒ Surfshark VPN(가상 사설 네트워크, Virtual Private Network)은 인터넷 사용자에게 개인 정보 보호와 보안을 제공하는 중요한 도구로 널리 인정받고 있다. VPN은 공공 와이파이 환경에서도 데이터를 안전하게 전송할 수 있고, 개인 정보를 보호하는 데 도움을 준다. VPN 서비스의 수요가 증가하는 것도 같은 이유에서다. 동시에 유료와 무료 중 어떤 VPN을 선택해야 할지 많은 관심을 가지고 살펴보는 사용자가 많다. 가장 먼저 사용자의 관심을 끄는 것은 별도의 예산 부담이 없는 무료 VPN이지만, 그만큼의 한계도 있다. 무료 VPN, 정말 괜찮을까? 무료 VPN 서비스는 편리하고 경제적 부담도 없지만 고려할 점이 아예 없는 것은 아니다. 보안 우려 대부분의 무료 VPN 서비스는 유료 서비스에 비해 보안 수준이 낮을 수 있다. 일부 무료 VPN은 사용자 데이터를 수집해 광고주나 서드파티 업체에 판매하는 경우도 있다. 이러한 상황에서 개인 정보가 유출될 우려가 있다. 속도와 대역폭 제한 무료 VPN 서비스는 종종 속도와 대역폭에 제한을 생긴다. 따라서 사용자는 느린 인터넷 속도를 경험할 수 있으며, 높은 대역폭이 필요한 작업을 수행하는 데 제약을 받을 수 있다. 서비스 제한 무료 VPN 서비스는 종종 서버 위치가 적거나 특정 서비스 또는 웹사이트에 액세스하지 못하는 경우가 생긴다. 또한 사용자 수가 늘어나 서버 부하가 증가하면 서비스의 안정성이 저하될 수 있다. 광고 및 추적 위험 일부 무료 VPN은 광고를 삽입하거나 사용자의 온라인 활동을 추적하여 광고주에게 판매할 수 있다. 이 경우 사용자가 광고를 보아야 하거나 개인 정보를 노출해야 할 수도 있다. 제한된 기능 무료 VPN은 유료 버전에 비해 기능이 제한될 수 있다. 예를 들어, 특정 프로토콜이나 고급 보안 기능을 지원하지 않는 경우가 그렇다. 유료 VPN의 필요성 최근 유행하는 로맨스 스캠은 인터넷 사기의 일종으로, 온라인 데이트나 소셜 미디어를 통해 가짜 프로필을 만들어 상대를 속이는 행위다. 이러한 상황에서 VPN은 사용자가 안전한 연결을 유지하고 사기 행위를 방지하는 데 도움이 된다. VPN을 통해 사용자는 상대방의 신원을 확인하고 의심스러운 활동을 감지할 수 있다. 서프샤크 VPN은 구독 요금제 가입 후 7일간의 무료 체험을 제공하고 있다. ⓒ Surfshark 그 외에도 유료 VPN만의 강점을 적극 이용해야 하는 이유는 다음 3가지로 요약할 수 있다. 보안 강화 해외 여행객이 증가함에 따라 공공 와이파이를 사용하는 경우가 늘어나고 있다. 그러나 공공 와이파이는 보안이 취약해 개인 정보를 노출할 위험이 있다. 따라서 VPN을 사용하여 데이터를 암호화하고 개인 정보를 보호하는 것이 중요하다. 서프샤크 VPN은 사용자의 개인 정보를 안전하게 유지하고 해킹을 방지하는 데 유용하다. 개인정보 보호 인터넷 사용자의 검색 기록과 콘텐츠 소비 패턴은 플랫폼에 의해 추적될 수 있다. VPN을 사용하면 사용자의 IP 주소와 로그를 숨길 수 있으며, 개인 정보를 보호할 수 있다. 또한 VPN은 사용자의 위치를 숨기고 인터넷 활동을 익명으로 유지하는 데 도움이 된다. 지역 제한 해제 해외 여행 중에도 한국에서 송금이 필요한 경우가 생길 수 있다. 그러나 IP가 해외 주소이므로 은행 앱에 접근하는 것이 제한될 수 있다. VPN을 사용하면 지역 제한을 해제해 해외에서도 한국 인터넷 서비스를 이용할 수 있다. 따라서 해외에서도 안전하고 편리하게 인터넷을 이용할 수 있다. 빠르고 안전한 유료 VPN, 서프샤크 VPN ⓒ Surfshark 뛰어난 보안 서프샤크 VPN은 강력한 암호화 기술을 사용하여 사용자의 인터넷 연결을 안전하게 보호한다. 이는 사용자의 개인 정보와 데이터를 보호하고 외부 공격으로부터 사용자를 보호하는 데 도움이 된다. 다양한 서버 위치 서프샤크 VPN은 전 세계 곳곳에 여러 서버가 위치하고 있어, 사용자가 지역 제한된 콘텐츠에 액세스할 수 있다. 해외에서도 로컬 콘텐츠에 손쉽게 접근할 수 있음은 물론이다. 속도와 대역폭 서프샤크 VPN은 빠른 속도와 무제한 대역폭을 제공하여 사용자가 원활한 인터넷 경험을 누릴 수 있도록 지원한다. 온라인 게임, 스트리밍, 다운로드 등 대역폭이 필요한 활동에 이상적이다. 다양한 플랫폼 지원 서프샤크 VPN은 다양한 플랫폼 및 디바이스에서 사용할 수 있다. 윈도우, 맥OS, iOS, 안드로이드 등 다양한 운영체제 및 디바이스에서 호환되어 사용자가 어디서나 안전한 인터넷을 즐길 수 있다. 디바이스 무제한 연결 서프샤크 VPN은 무제한 연결을 제공하여 사용자가 필요할 때 언제든지 디바이스의 갯수에 상관없이 VPN을 사용할 수 있다.