Building a CRUD Application with Qwik: A Comprehensive Tutorial

40min
개요
이 가이드를 통해 Qwik을 사용하여 완전한 기능을 갖춘 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 방법을 배울 것입니다.
데이터 관리를 위해 앱을 Back4app에 연결하면서 필수 작업을 시연할 것입니다. 처음에 데이터 관리를 위한 백엔드로 사용할 Basic-CRUD-App-Qwik이라는 제목의 Back4app 프로젝트를 설정할 것입니다.
다음으로, 수동으로 또는 Back4app AI 에이전트의 도움을 받아 컬렉션과 필드를 정의하여 확장 가능한 데이터베이스를 구성할 것입니다. 이는 CRUD 작업을 효율적으로 처리할 수 있도록 데이터 모델이 최적화되도록 보장합니다.
그런 다음, 컬렉션을 원활하게 관리하기 위해 사용자 친화적인 드래그 앤 드롭 인터페이스인 Back4app 관리 앱을 활용할 것입니다. 이 도구는 직관적인 방법으로 레코드를 생성, 업데이트 및 삭제할 수 있도록 하여 데이터 작업을 간소화합니다.
마지막으로, REST 또는 GraphQL API를 사용하여 Qwik 프론트엔드를 Back4app과 통합하고 강력한 보안 제어를 구현할 것입니다.
이 튜토리얼이 끝나면, 귀하의 프로덕션 준비가 완료된 애플리케이션은 CRUD 작업을 처리할 뿐만 아니라 사용자 인증 및 안전한 데이터 액세스를 지원할 것입니다.
필수 통찰
신뢰할 수 있는 백엔드를 사용하여 데이터를 효과적으로 처리하는 CRUD 애플리케이션 개발 기술을 익히세요.
적응 가능한 백엔드를 설계하고 이를 Qwik 프론트엔드와 결합하여 사용자 상호작용을 향상시키는 방법을 알아보세요.
CRUD 기능을 간소화하기 위해 드래그 앤 드롭 관리 인터페이스(Back4app Admin App)의 장점을 탐색하세요.
웹 애플리케이션을 신속하게 배포하기 위한 Docker 컨테이너화 등 배포 전략에 대해 알아보세요.
﻿
필수 조건
시작하기 전에 다음 사항을 확인하세요:
새 프로젝트 설정이 포함된 Back4app 계정입니다.
도움이 필요하면 Back4app 시작하기를 방문하세요.
Qwik 개발 환경입니다.
다음 Qwik 문서를 사용하여 프로젝트를 설정하세요. Node.js(버전 14 이상)가 설치되어 있는지 확인하세요.
JavaScript, Qwik 및 REST API에 대한 기본 이해입니다.
리프레셔가 필요하면 Qwik 문서를 참조하세요.
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 설정하기
Back4app 계정에 로그인하세요.
“새 앱” 클릭 대시보드에서.
프로젝트 이름 입력: Basic-CRUD-App-Qwik 및 지침에 따라 프로젝트를 생성하세요.
새 프로젝트 만들기
﻿
새 프로젝트가 대시보드에 나타나며, 애플리케이션의 백엔드 기초를 형성합니다.
﻿
2단계 – 데이터베이스 스키마 설계
데이터 모델 작성
이 CRUD 앱을 위해 여러 컬렉션을 정의할 것입니다. 아래는 CRUD 작업을 처리하기 위한 효과적인 데이터베이스 스키마를 만드는 데 도움이 되는 필드와 유형을 설명하는 예시입니다.
1. 항목 수집
이 수집은 각 항목에 대한 세부 정보를 포함합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 기본 키.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간략한 세부정보.
생성일
날짜
항목이 생성된 타임스탬프.
업데이트됨
날짜
마지막 업데이트의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 세부정보 및 인증 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 기본 키.
사용자 이름
문자열
사용자를 위한 고유 식별자.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호_해시
문자열
로그인을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
사용자 계정의 마지막 업데이트 타임스탬프.
Back4app 대시보드를 통해 새로운 클래스를 생성하고 각 열을 필요에 맞게 구성하여 이러한 컬렉션을 수동으로 추가할 수 있습니다.
새 클래스 만들기
﻿
유형을 선택하고 이름을 제공하며 기본값과 제약 조건을 구성하여 필드를 쉽게 추가하세요.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 설명적인 프롬프트를 기반으로 스키마를 자동으로 생성할 수 있습니다. 이 기능은 프로젝트 설정을 가속화하고 일관성을 보장합니다.
AI 에이전트 작동 방법:
AI 에이전트에 접근하기:
Back4app 대시보드 또는 프로젝트 설정에서 찾으세요.
데이터 모델 상세 설명:
필요한 컬렉션과 필드를 설명하는 프롬프트를 제공하세요.
검토 및 구현:
생성된 스키마 제안을 평가하고 프로젝트에 적용하세요.
샘플 프롬프트
Text
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
Create the following collections in my Back4app project:

1) Collection: Items
- Fields:
  - _id: ObjectId (auto-generated)
  - title: String
  - description: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 접근 방식은 시간을 절약하고 애플리케이션에 맞춘 잘 구조화된 스키마를 보장합니다.
﻿
3단계 – 관리 앱 활성화 및 CRUD 작업 관리
관리 앱 소개
Back4app 관리 앱은 백엔드 데이터를 관리하기 위한 코드 없는 인터페이스를 제공합니다. 직관적인 드래그 앤 드롭 기능을 통해 CRUD 작업을 쉽게 수행할 수 있습니다.
관리자 앱 활성화 방법
“더보기” 메뉴에 접근하기 Back4app 대시보드에서.
“관리자 앱” 선택하기 그리고 클릭하기 “관리자 앱 활성화.”
관리자 자격 증명 설정하기 관리자 사용자를 생성하여 자동으로 역할과 시스템 컬렉션을 설정합니다.
관리자 앱 활성화
﻿
활성화 후, 관리자 앱에 로그인하여 데이터를 손쉽게 관리하세요.
관리자 앱 대시보드
﻿
관리자 앱을 통한 CRUD 작업 수행하기
기록 추가하기: 새로운 항목을 생성하기 위해 모든 컬렉션(예: 항목) 내에서 “기록 추가” 버튼을 사용하세요.
기록 보기/편집하기: 세부 정보를 확인하거나 업데이트를 하려면 기록을 클릭하세요.
기록 제거하기: 삭제 기능을 사용하여 오래된 항목을 제거하세요.
이 도구는 데이터 작업을 간소화하여 원활한 사용자 경험을 보장합니다.
﻿
4단계 – Qwik과 Back4app 연결하기
이제 백엔드가 구성되었으므로 Qwik 프론트엔드를 Back4app과 통합할 시간입니다.
옵션: REST 또는 GraphQL API 사용하기
Back4app과 상호작용하기 위해 REST API 호출을 사용할 것입니다.
예시: Qwik에서 REST를 통해 항목 가져오기
Qwik 컴포넌트 생성 (예: src/components/ItemsList.tsx) 아이템을 검색하고 표시합니다:
Text
// src/components/ItemsList.tsx
import { component$, useTask$ } from '@builder.io/qwik';

export const ItemsList = component$(() => {
  const items = [];

  useTask$(async () => {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const data = await response.json();
      items.push(...data.results);
    } catch (error) {
      console.error('Error retrieving items:', error);
    }
  });

  return (
    <div>
      <h2>Items</h2>
      <ul>
        {items.map((item: any) => (
          <li key={item.objectId}>
            {item.title} — {item.description}
          </li>
        ))}
      </ul>
    </div>
  );
});
export default ItemsList;
// src/components/ItemsList.tsx
import { component$, useTask$ } from '@builder.io/qwik';

export const ItemsList = component$(() => {
  const items = [];

  useTask$(async () => {
    try {
      const response = await fetch('https://parseapi.back4app.com/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      const data = await response.json();
      items.push(...data.results);
    } catch (error) {
      console.error('Error retrieving items:', error);
    }
  });

  return (
    <div>
      <h2>Items</h2>
      <ul>
        {items.map((item: any) => (
          <li key={item.objectId}>
            {item.title} — {item.description}
          </li>
        ))}
      </ul>
    </div>
  );
});
export default ItemsList;
﻿
이 컴포넌트는 fetch API를 사용하여 Back4app의 REST 엔드포인트를 호출하고 아이템 목록을 검색합니다.
다른 CRUD 작업(생성, 업데이트, 삭제)을 위해 유사한 REST 호출을 Qwik 컴포넌트에 통합하세요.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 구현
객체에 ACL을 설정하여 데이터 보안을 강화하세요. 예를 들어, 특정 아이템에 대한 액세스를 제한하려면:
Text
async function createPrivateItem(itemData: { title: string; description: string }, ownerId: string) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          [ownerId]: { read: true, write: true },
          '*': { read: false, write: false }
        }
      })
    });
    const result = await response.json();
    console.log('Created private item:', result);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
async function createPrivateItem(itemData: { title: string; description: string }, ownerId: string) {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      },
      body: JSON.stringify({
        title: itemData.title,
        description: itemData.description,
        ACL: {
          [ownerId]: { read: true, write: true },
          '*': { read: false, write: false }
        }
      })
    });
    const result = await response.json();
    console.log('Created private item:', result);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
﻿
클래스 수준 권한(CLP) 구성
Back4app 대시보드 내에서 각 컬렉션에 대한 CLP를 조정하여 기본 액세스 정책을 시행하고, 권한이 있는 사용자만 민감한 데이터와 상호작용할 수 있도록 합니다.
﻿
6단계 – 사용자 인증
사용자 계정 설정
Back4app은 인증 관리를 위해 Parse의 사용자 클래스를 사용합니다. Qwik 앱에서 사용자 가입 및 로그인을 아래와 같이 구현하세요.
예시: Qwik의 회원가입 컴포넌트
Text
// src/components/Auth.tsx
import { component$, useStore } from '@builder.io/qwik';

export const SignUp = component$(() => {
  const store = useStore({
    username: '',
    password: '',
    email: ''
  });

  const handleSignUp = async (e: Event) => {
    e.preventDefault();
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          username: store.username,
          password: store.password,
          email: store.email
        })
      });
      const data = await response.json();
      alert('User successfully registered!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  };

  return (
    <form onSubmit$={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={store.username}
        onInput$={(e) => (store.username = (e.target as HTMLInputElement).value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={store.password}
        onInput$={(e) => (store.password = (e.target as HTMLInputElement).value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={store.email}
        onInput$={(e) => (store.email = (e.target as HTMLInputElement).value)}
      />
      <button type="submit">Register</button>
    </form>
  );
});
// src/components/Auth.tsx
import { component$, useStore } from '@builder.io/qwik';

export const SignUp = component$(() => {
  const store = useStore({
    username: '',
    password: '',
    email: ''
  });

  const handleSignUp = async (e: Event) => {
    e.preventDefault();
    try {
      const response = await fetch('https://parseapi.back4app.com/users', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        },
        body: JSON.stringify({
          username: store.username,
          password: store.password,
          email: store.email
        })
      });
      const data = await response.json();
      alert('User successfully registered!');
    } catch (error: any) {
      alert('Registration error: ' + error.message);
    }
  };

  return (
    <form onSubmit$={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={store.username}
        onInput$={(e) => (store.username = (e.target as HTMLInputElement).value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={store.password}
        onInput$={(e) => (store.password = (e.target as HTMLInputElement).value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={store.email}
        onInput$={(e) => (store.email = (e.target as HTMLInputElement).value)}
      />
      <button type="submit">Register</button>
    </form>
  );
});
﻿
유사한 접근 방식은 로그인 및 세션 관리에도 적용할 수 있습니다. 소셜 인증, 이메일 확인 및 비밀번호 복구와 같은 추가 옵션은 Back4app을 통해 구성할 수 있습니다.
﻿
7단계 – 웹 배포를 통한 Qwik 프론트엔드 배포
Back4app의 웹 배포 서비스는 GitHub 리포지토리를 연결하여 Qwik 프론트엔드를 원활하게 호스팅할 수 있게 해줍니다. 사이트를 배포하려면 다음 단계를 따르세요:
7.1 프로덕션 빌드 생성
터미널에서 프로젝트 폴더를 엽니다.
빌드 명령어를 실행합니다:
Bash
npm run build
npm run build
﻿
이것은 최적화된 정적 자산을 포함하는 build 폴더를 생성합니다.
빌드를 확인합니다:
 build 폴더에 index.html 파일과 관련 자산 디렉토리가 있는지 확인합니다.
﻿
7.2 코드를 정리하고 GitHub에 커밋하기
저장소에는 Qwik 프론트엔드의 전체 소스가 포함되어야 합니다. 일반적인 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Qwik-Frontend/
|-- node_modules/
|-- public/
|   └── index.html
|-- src/
|   ├── root.tsx
|   ├── entry.tsx
|   └── components/
|       ├── ItemsList.tsx
|       └── Auth.tsx
|-- package.json
|-- README.md
Basic-CRUD-App-Qwik-Frontend/
|-- node_modules/
|-- public/
|   └── index.html
|-- src/
|   ├── root.tsx
|   ├── entry.tsx
|   └── components/
|       ├── ItemsList.tsx
|       └── Auth.tsx
|-- package.json
|-- README.md
﻿
예시: src/root.tsx
Text
// src/root.tsx
import { component$ } from '@builder.io/qwik';
import ItemsList from './components/ItemsList';

export default component$(() => {
  return (
    <div style={{ padding: '2rem' }}>
      <h1>CRUD Application</h1>
      <ItemsList />
    </div>
  );
});
// src/root.tsx
import { component$ } from '@builder.io/qwik';
import ItemsList from './components/ItemsList';

export default component$(() => {
  return (
    <div style={{ padding: '2rem' }}>
      <h1>CRUD Application</h1>
      <ItemsList />
    </div>
  );
});
﻿
코드 커밋하기:
Git 초기화 (아직 하지 않았다면):
Bash
git init
git init
﻿
파일 스테이징하기:
Bash
git add .
git add .
﻿
변경 사항 커밋하기:
Bash
git commit -m "Qwik 프론트엔드 코드의 초기 커밋"
git commit -m "Qwik 프론트엔드 코드의 초기 커밋"
﻿
GitHub 리포지토리 생성하기:
예를 들어, 이름을 Basic-CRUD-App-Qwik-Frontend로 지정합니다.
코드를 GitHub에 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Qwik-Frontend.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Qwik-Frontend.git
git push -u origin main
﻿
﻿
7.3 리포지토리를 웹 배포에 연결하기
웹 배포 접근하기:
Back4app 대시보드에 로그인하고, 프로젝트 (Basic-CRUD-App-Qwik)를 선택한 후 웹 배포 섹션으로 이동합니다.
GitHub에 연결하기:
화면의 지시에 따라 GitHub 계정을 연결합니다.
리포지토리 및 브랜치 선택하기:
리포지토리 (예: Basic-CRUD-App-Qwik-Frontendmain)를 선택합니다.
﻿
7.4 배포 구성
추가 설정을 지정하십시오:
빌드 명령어:
사전 빌드된 build 폴더가 포함되지 않은 경우, 명령어를 설정하십시오 (예: npm run build).
출력 디렉토리:
출력 디렉토리를 build로 정의하십시오.
환경 변수:
API 키와 같은 필요한 변수를 삽입하십시오.
﻿
7.5 Docker로 Qwik 앱 컨테이너화하기 (선택 사항)
Docker를 선택하는 경우, 다음과 유사한 Dockerfile을 포함하십시오:
Dockerfile
# Use Node for building the app
FROM node:16-alpine as build

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Serve the built app with Nginx
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use Node for building the app
FROM node:16-alpine as build

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Serve the built app with Nginx
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
그런 다음, 웹 배포 설정에서 Docker 옵션을 선택하십시오.
﻿
7.6 애플리케이션 배포하기
배포 버튼 클릭:
구성이 완료되면 배포 버튼을 누르세요.
빌드 확인:
Back4app이 코드를 가져와서 빌드하고 컨테이너를 배포합니다.
URL 받기:
배포 후, 앱이 호스팅되는 URL이 제공됩니다.
﻿
7.7 배포 확인하기
URL 방문:
제공된 링크를 브라우저에서 엽니다.
기능 테스트:
모든 경로와 자산이 올바르게 로드되는지 확인합니다.
필요시 디버깅:
브라우저 개발자 도구와 Back4app 로그를 사용하여 문제를 해결합니다.
﻿
8단계 – 마무리 및 향후 개선 사항
잘 하셨습니다! Qwik과 Back4app을 사용하여 완전한 CRUD 앱을 성공적으로 구축했습니다. 
프로젝트를 설정했습니다 Basic-CRUD-App-Qwik, 아이템과 사용자에 대한 상세한 데이터베이스 스키마를 작성하고, 관리 앱을 통해 데이터를 관리했습니다. 
또한, Qwik 프론트엔드를 백엔드에 연결하고 강력한 보안 조치를 적용했습니다.
다음 단계:
프론트엔드 확장:
상세 아이템 보기, 검색 기능 또는 실시간 업데이트와 같은 기능으로 Qwik 앱을 향상시키세요.
기능 추가:
고급 백엔드 로직, 서드파티 API 또는 역할 기반 접근 제어를 통합하는 것을 고려하세요.
추가 리소스 탐색:
Back4app 문서 및 더 많은 Qwik 튜토리얼을 참조하여 성능 개선 및 맞춤형 통합에 대한 심층 지식을 얻으세요.
이 튜토리얼을 따라 하면서 이제 생성하는 방법을 알게 되었습니다.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 기본 키.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 세부정보.
생성일	날짜	항목이 생성된 타임스탬프.
업데이트됨	날짜	마지막 업데이트의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 기본 키.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	로그인을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	사용자 계정의 마지막 업데이트 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
Building a Basic CRUD Application with Polymer: A Comprehensive Walkthrough
Building a Basic CRUD Application with Lit?