Remix로 CRUD 애플리케이션 만들기?

34min
개요
이 안내서에서는 Remix JS를 사용하여 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 배웁니다.
우리는 데이터 저장을 원활하게 처리하기 위해 Back4app을 백엔드 서비스로 사용할 것입니다. 이 가이드는 Back4app 프로젝트 설정, 동적 데이터 스키마 설계, 그리고 Remix JS 애플리케이션에서 CRUD 작업을 연결하는 방법을 다룹니다.
먼저, 우리는 Basic-CRUD-App-Remix라는 이름의 Back4app 프로젝트를 설정하여 확장 가능한 비관계형 데이터 저장소를 제공합니다.
그런 다음, Back4app 대시보드를 통해 수동으로 컬렉션과 필드를 설정하여 데이터 모델을 생성하거나, 통합된 AI 에이전트를 사용하여 자동으로 설정할 수 있습니다.
다음으로, 드래그 앤 드롭 작업을 사용하여 데이터를 쉽게 관리할 수 있는 사용자 친화적인 인터페이스인 Back4app 관리 앱을 탐색합니다.
마지막으로, Remix JS 애플리케이션을 REST API 호출을 통해 Back4app에 연결하여 CRUD 기능과 사용자 인증이 강력하고 안전하도록 합니다.
이 튜토리얼이 끝나면 기본 CRUD 작업과 안전한 사용자 관리를 수행할 수 있는 프로덕션 준비 완료 Remix JS 애플리케이션을 갖게 됩니다.
배울 내용
Remix JS와 신뢰할 수 있는 백엔드를 사용하여 CRUD 앱을 만드는 방법.
백엔드를 구조화하고 Remix JS 프론트엔드와 통합하는 모범 사례.
데이터 관리 작업을 단순화하기 위해 Back4app 관리 앱을 사용하는 방법.
Docker를 사용한 컨테이너화 등 Remix JS 애플리케이션을 배포하는 기술.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
새 프로젝트가 준비된 Back4app 계정입니다.
도움이 필요하신가요? Back4app 시작하기를 방문하세요.
작동하는 Remix JS 개발 환경입니다.
VS Code와 같은 최신 코드 편집기를 사용할 수 있습니다. Node.js(버전 14 이상)가 설치되어 있어야 합니다.
JavaScript, React 및 RESTful API에 대한 기본 지식입니다.
복습을 원하시면 Remix 문서를 확인하세요.
﻿
1단계 – 프로젝트 설정
새 Back4app 프로젝트 시작하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-Remix 및 생성 프로세스를 완료하는 단계를 따르세요.
새 프로젝트 만들기
﻿
프로젝트가 준비되면 대시보드에 나타나며, 백엔드의 기초를 제공합니다.
﻿
2단계 – 데이터 모델 만들기
데이터 구조 설정
이 CRUD 애플리케이션에서는 Back4app에서 여러 컬렉션을 정의합니다. 아래는 CRUD 기능을 지원하는 주요 컬렉션 및 필드의 예입니다.
1. 아이템 컬렉션
이 컬렉션은 각 항목에 대한 세부 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동으로 생성된 고유 식별자.
제목
문자열
항목의 이름 또는 제목.
설명
문자열
항목을 설명하는 간단한 요약.
생성일
날짜
항목이 추가된 시간의 타임스탬프.
업데이트됨
날짜
마지막 수정의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 자격 증명 및 인증 정보를 관리합니다.
필드
데이터 유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유한 사용자 이름.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호 해시
문자열
안전한 인증을 위한 해시된 비밀번호.
생성일
날짜
계정이 생성된 시간의 타임스탬프.
업데이트됨
날짜
계정이 업데이트된 시간의 타임스탬프.
이러한 컬렉션을 생성하고 Back4app 대시보드에서 직접 필드를 추가할 수 있습니다.
새 클래스 만들기
﻿
새 필드를 추가하려면 데이터 유형을 선택하고 필드 이름을 입력한 다음 필요에 따라 기본값 또는 필수 옵션을 설정하면 됩니다.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 사용하기
Back4app에 통합된 AI 에이전트는 설명을 기반으로 스키마를 자동 생성하여 초기 설정을 간소화합니다.
AI 에이전트 사용 방법:
AI 에이전트에 접근하기:
Back4app 대시보드에 로그인하고 프로젝트 설정에서 AI 에이전트를 찾습니다.
데이터 모델 설명하기:
필요한 컬렉션과 필드에 대한 자세한 설명을 제공합니다.
검토 및 확인:
AI 에이전트가 제안된 스키마를 제시합니다. 세부 사항을 확인하고 설정을 확정합니다.
예시 프롬프트
Text
Create the following collections in my Back4app project:

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

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

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated)
  - username: String (unique)
  - email: String (unique)
  - passwordHash: String
  - createdAt: Date (auto-generated)
  - updatedAt: Date (auto-updated)
﻿
이 AI 지원 방법은 프로세스를 가속화하고 스키마가 앱의 요구에 완벽하게 맞춰지도록 보장합니다.
﻿
3단계 – 관리 앱 활성화 및 CRUD 작업 처리
관리 앱 개요
Back4app 관리 앱은 백엔드 데이터 관리를 간소화하는 코드 없는 인터페이스를 제공합니다. 드래그 앤 드롭 기능을 통해 CRUD 작업(예: 레코드 추가, 편집 및 삭제)을 보다 직관적으로 수행할 수 있습니다.
관리 앱 활성화
“더보기” 메뉴로 이동하여 Back4app 대시보드에서.
“관리 앱” 선택 후 “관리 앱 활성화.”
관리자 계정 설정을 위해 자격 증명을 입력합니다. 이렇게 하면 역할(예: B4aAdminUser) 및 시스템 클래스도 구성됩니다.
관리 앱 활성화
﻿
활성화 후, 관리 앱에 로그인하여 데이터를 쉽게 관리하세요.
관리 앱 대시보드
﻿
관리 앱을 통한 CRUD 작업 수행
관리 앱 내에서 다음을 수행할 수 있습니다:
새 레코드 삽입:
컬렉션(예: 항목) 내에서 “레코드 추가” 버튼을 사용하여 새 항목을 생성합니다.
레코드 검사 및 수정:
어떤 레코드를 클릭하여 세부 정보를 보고 편집합니다.
레코드 삭제:
더 이상 필요하지 않은 레코드를 제거합니다.
이 직관적인 인터페이스는 데이터 관리 경험을 크게 향상시킵니다.
﻿
4단계 – Remix JS 애플리케이션을 Back4app과 연결하기
백엔드가 설정되었으므로, 이제 Remix JS 앱을 Back4app과 통합할 시간입니다.
Remix JS에서 REST API 호출 사용하기
Parse SDK는 일반적으로 Remix JS와 함께 사용되지 않으므로, CRUD 작업을 REST API 요청을 통해 수행합니다.
1. Remix JS 프로젝트 설정하기
아직 하지 않았다면, 새로운 Remix 프로젝트를 생성하세요:
Bash
npx create-remix@latest
npx create-remix@latest
﻿
프롬프트에 따라 배포 대상을 선택하세요.
2. Remix에서 API 요청하기
CRUD 작업을 처리하기 위해 app/routes 디렉토리 아래에 API 경로 파일을 생성하세요. 예를 들어, items.server.js라는 파일을 만들어 항목을 가져오고, 생성하고, 업데이트하고, 삭제하는 기능을 포함할 수 있습니다.
예시: 항목 가져오기
Text
// app/routes/items.server.js
import { json } from "@remix-run/node";

export async function loader() {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });
  const data = await response.json();
  return json(data);
}
// app/routes/items.server.js
import { json } from "@remix-run/node";

export async function loader() {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "GET",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
    },
  });
  const data = await response.json();
  return json(data);
}
﻿
유사하게, 항목 생성, 업데이트 및 삭제를 처리하기 위해 POST, PUT 및 DELETE 경로를 생성할 수 있습니다.
3. UI 구성 요소 연결하기
당신의 Remix 컴포넌트에서 useLoaderData와 같은 훅을 사용하여 데이터를 가져오고 fetch API 또는 액션 함수를 사용하여 데이터를 Back4app으로 다시 보낼 수 있습니다.
예를 들어, 당신의 React 컴포넌트에서:
Text
// app/routes/items.jsx
import { useLoaderData, Form } from "@remix-run/react";

export default function Items() {
  const data = useLoaderData();

  return (
    <div>
      <h1>Items List</h1>
      {data.results.map((item) => (
        <div key={item.objectId}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}

      <Form method="post">
        <input type="text" name="title" placeholder="Item Title" required />
        <textarea name="description" placeholder="Item Description" required />
        <button type="submit">Add Item</button>
      </Form>
    </div>
  );
}
// app/routes/items.jsx
import { useLoaderData, Form } from "@remix-run/react";

export default function Items() {
  const data = useLoaderData();

  return (
    <div>
      <h1>Items List</h1>
      {data.results.map((item) => (
        <div key={item.objectId}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}

      <Form method="post">
        <input type="text" name="title" placeholder="Item Title" required />
        <textarea name="description" placeholder="Item Description" required />
        <button type="submit">Add Item</button>
      </Form>
    </div>
  );
}
﻿
Remix 액션에서 업데이트 및 삭제 작업을 위한 유사한 API 호출을 통합하세요.
﻿
5단계 – 백엔드 보안
액세스 제어 목록(ACL) 구현
객체에 대한 ACL을 설정하여 데이터 보안을 강화하세요. 예를 들어, 생성자만 접근할 수 있는 아이템을 생성하려면:
Text
// Example API call to create a private item using ACLs
async function createPrivateItem(title, description, userSessionToken) {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
      "X-Parse-Session-Token": userSessionToken,
    },
    body: JSON.stringify({
      title,
      description,
      ACL: {
        "*": { "read": false, "write": false },
        "USER_OBJECT_ID": { "read": true, "write": true }
      },
    }),
  });
  return response.json();
}
// Example API call to create a private item using ACLs
async function createPrivateItem(title, description, userSessionToken) {
  const response = await fetch("https://parseapi.back4app.com/classes/Items", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
      "X-Parse-Session-Token": userSessionToken,
    },
    body: JSON.stringify({
      title,
      description,
      ACL: {
        "*": { "read": false, "write": false },
        "USER_OBJECT_ID": { "read": true, "write": true }
      },
    }),
  });
  return response.json();
}
﻿
클래스 수준 권한(CLPS)
Back4app 대시보드에서 CLP를 조정하여 기본 보안 정책을 시행하고, 인증된 사용자만 특정 컬렉션에 접근할 수 있도록 하세요.
﻿
6단계 – 사용자 인증 추가
사용자 관리 구성
Back4app은 인증 관리를 위해 Parse의 내장 사용자 클래스를 활용합니다. Remix 애플리케이션에서 API 호출을 사용하여 사용자 등록 및 로그인을 처리합니다.
예: 사용자 등록 엔드포인트
Text
// app/routes/signup.server.js
import { json, redirect } from "@remix-run/node";

export async function action({ request }) {
  const formData = await request.formData();
  const username = formData.get("username");
  const password = formData.get("password");
  const email = formData.get("email");

  const response = await fetch("https://parseapi.back4app.com/users", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username, password, email }),
  });

  if (!response.ok) {
    throw new Error("Signup failed");
  }

  return redirect("/login");
}
// app/routes/signup.server.js
import { json, redirect } from "@remix-run/node";

export async function action({ request }) {
  const formData = await request.formData();
  const username = formData.get("username");
  const password = formData.get("password");
  const email = formData.get("email");

  const response = await fetch("https://parseapi.back4app.com/users", {
    method: "POST",
    headers: {
      "X-Parse-Application-Id": "YOUR_APPLICATION_ID",
      "X-Parse-REST-API-Key": "YOUR_REST_API_KEY",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username, password, email }),
  });

  if (!response.ok) {
    throw new Error("Signup failed");
  }

  return redirect("/login");
}
﻿
로그인, 세션 관리 및 비밀번호 재설정을 위한 유사한 엔드포인트를 구현합니다.
﻿
7단계 – Remix JS 애플리케이션 배포
Back4app은 원활한 배포를 지원합니다. Docker를 포함한 다양한 전략을 사용하여 Remix JS 앱을 배포할 수 있습니다.
7.1 Remix JS 애플리케이션 빌드
컴파일 및 번들:
패키지 관리자 및 빌드 스크립트를 사용하여 (예: npm run build) 애플리케이션을 컴파일합니다.
출력 확인:
빌드 출력에 모든 필요한 파일이 포함되어 있는지 확인합니다.
7.2 프로젝트 구조 예시
전형적인 Remix JS 프로젝트는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Remix/
|-- app/
|   |-- routes/
|   |   |-- items.jsx
|   |   |-- items.server.js
|   |   |-- signup.server.js
|   |-- components/
|       |-- ItemForm.jsx
|-- public/
|-- package.json
|-- remix.config.js
|-- README.md
Basic-CRUD-App-Remix/
|-- app/
|   |-- routes/
|   |   |-- items.jsx
|   |   |-- items.server.js
|   |   |-- signup.server.js
|   |-- components/
|       |-- ItemForm.jsx
|-- public/
|-- package.json
|-- remix.config.js
|-- README.md
﻿
7.1 Remix JS 애플리케이션 빌드
7.3 애플리케이션 도커화
컨테이너화를 선택하면, 프로젝트의 루트에 Dockerfile을 추가하세요:
Dockerfile
# Use an official Node.js runtime as a base
FROM node:16-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package files and install dependencies
COPY package.json package-lock.json ./
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Remix app
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the application
CMD ["npm", "start"]
# Use an official Node.js runtime as a base
FROM node:16-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package files and install dependencies
COPY package.json package-lock.json ./
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the Remix app
RUN npm run build

# Expose the port the app runs on
EXPOSE 3000

# Start the application
CMD ["npm", "start"]
﻿
7.4 Back4app 웹 배포를 통한 배포
저장소 연결:
GitHub에 Remix JS 소스 코드를 호스팅하세요.
배포 구성:
Back4app 대시보드에서 웹 배포 기능을 선택하고, 저장소(예: Basic-CRUD-App-Remix)를 연결한 후 올바른 브랜치를 선택하세요.
빌드 및 출력 명령 설정:
빌드 명령(예: npm run build)와 출력 디렉토리를 지정하세요.
앱 배포:
"배포"를 클릭하고 앱이 라이브될 때까지 로그를 모니터링하세요.
﻿
8단계 – 마무리 및 향후 방향
잘 했어요! 이제 Back4app과 통합된 Remix JS를 사용하여 CRUD 애플리케이션을 구축했습니다.
이 가이드에서는 Basic-CRUD-App-Remix이라는 프로젝트를 설정하고, 항목 및 사용자에 대한 컬렉션을 정의하며, Back4app 관리 앱을 통해 데이터를 관리했습니다.
그런 다음 REST API 호출을 통해 Remix JS 앱을 Back4app에 연결하고, 안전한 사용자 인증 및 데이터 보호 조치를 구현했습니다.
다음 단계:
애플리케이션 향상:
검색 기능, 상세 항목 보기 또는 실시간 업데이트와 같은 더 많은 기능을 추가하는 것을 고려하세요.
백엔드 기능 확장:
클라우드 기능, 외부 API 통합 또는 더 고급 액세스 제어를 살펴보세요.
계속 배우기:
Back4app 문서를 방문하고 추가 Remix JS 튜토리얼을 탐색하여 앱을 더욱 최적화하세요.
코딩을 즐기고 Remix JS 여정에 행운이 있기를 바랍니다!
필드	데이터 유형	설명
_id	객체 ID	자동으로 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목을 설명하는 간단한 요약.
생성일	날짜	항목이 추가된 시간의 타임스탬프.
업데이트됨	날짜	마지막 수정의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호 해시	문자열	안전한 인증을 위한 해시된 비밀번호.
생성일	날짜	계정이 생성된 시간의 타임스탬프.
업데이트됨	날짜	계정이 업데이트된 시간의 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Build a Basic CRUD App with Solid?
How to Create a CRUD App with Gatsby?