Quickstarters
레드우드JS로 기본 CRUD 앱 만드는 방법? 단계별 가이드

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

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

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

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

2) Collection: Users
- Fields:
  - _id: ObjectId (auto-generated primary key)
  - username: String (unique)
  - email: String (unique)
  - password_hash: String
  - created_at: Date (auto-generated)
  - updated_at: Date (auto-updated)
﻿
이 AI 기반 접근 방식을 활용하면 시간을 절약할 뿐만 아니라 잘 최적화되고 일관된 스키마를 보장합니다.
﻿
3단계 – 관리자 앱 활성화 및 CRUD 작업 관리
관리자 앱 소개
Back4app 관리 앱은 사용하기 쉬운 코드 없는 인터페이스로, 백엔드 데이터를 손쉽게 처리할 수 있도록 도와줍니다. 드래그 앤 드롭 기능을 통해 CRUD 작업(예: 레코드 추가, 보기, 업데이트 및 삭제)을 쉽게 수행할 수 있습니다.
관리 앱 활성화 방법
“더보기” 메뉴로 이동하여 Back4app 대시보드에서.
“관리 앱” 선택 후 “관리 앱 활성화.”
관리 자격 증명 설정 초기 관리 사용자를 생성하여 역할(예: B4aAdminUser) 및 시스템 컬렉션을 설정합니다.
관리 앱 활성화
﻿
활성화 후, 관리 앱에 로그인하여 데이터를 관리합니다.
관리 앱 대시보드
﻿
관리 앱을 통한 CRUD 수행
관리 앱 내에서 다음을 수행할 수 있습니다:
새 레코드 추가: 컬렉션(예: 항목)에서 “레코드 추가” 버튼을 사용하여 새 데이터를 삽입합니다.
레코드 보기 및 수정: 레코드를 클릭하여 세부 정보를 보고 업데이트합니다.
레코드 제거: 더 이상 필요하지 않은 데이터를 삭제 옵션을 선택하여 제거합니다.
이 직관적인 인터페이스는 데이터 관리 작업을 크게 단순화합니다.
﻿
4단계 – RedwoodJS와 Back4app 통합
이제 백엔드가 설정되고 관리 가능한 상태가 되었으므로, RedwoodJS 프론트엔드를 Back4app과 연결할 시간입니다.
GraphQL API 통합 사용하기
RedwoodJS는 GraphQL을 기반으로 구축되어 있어 API 호출을 통해 Back4app과 통합하는 데 완벽한 조합입니다. SDK를 사용하는 대신, GraphQL 쿼리와 변이를 사용하여 백엔드와 상호작용하게 됩니다.
RedwoodJS 프로젝트 설정하기
새로운 RedwoodJS 애플리케이션 생성하기:
Bash
yarn create redwood-app basic-crud-app-redwood
yarn create redwood-app basic-crud-app-redwood
﻿
프로젝트 디렉토리로 이동하기:
Bash
cd basic-crud-app-redwood
cd basic-crud-app-redwood
﻿
환경 변수를 설정하기:
당신의 .env 파일에 Back4app 자격 증명을 추가하세요:
Text
BACK4APP_APP_ID=YOUR_APPLICATION_ID
BACK4APP_REST_API_KEY=YOUR_REST_API_KEY
BACK4APP_SERVER_URL=https://parseapi.back4app.com
BACK4APP_APP_ID=YOUR_APPLICATION_ID
BACK4APP_REST_API_KEY=YOUR_REST_API_KEY
BACK4APP_SERVER_URL=https://parseapi.back4app.com
﻿
RedwoodJS 셀로 데이터 가져오기
RedwoodJS 셀은 데이터 가져오기를 간소화합니다. 다음은 항목을 검색하는 셀의 예입니다:
JS
// web/src/components/ItemsCell/ItemsCell.js
export const QUERY = gql`
  query ITEMS_QUERY {
    items: itemsCollection {
      _id
      title
      description
    }
  }
`;

export const Loading = () => <div>Loading items…</div>;

export const Empty = () => <div>No items available.</div>;

export const Failure = ({ error }) => <div>Error: {error.message}</div>;

export const Success = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item._id}>
          <strong>{item.title}</strong> — {item.description}
        </li>
      ))}
    </ul>
  );
};
// web/src/components/ItemsCell/ItemsCell.js
export const QUERY = gql`
  query ITEMS_QUERY {
    items: itemsCollection {
      _id
      title
      description
    }
  }
`;

export const Loading = () => <div>Loading items…</div>;

export const Empty = () => <div>No items available.</div>;

export const Failure = ({ error }) => <div>Error: {error.message}</div>;

export const Success = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item._id}>
          <strong>{item.title}</strong> — {item.description}
        </li>
      ))}
    </ul>
  );
};
﻿
RedwoodJS 컴포넌트에서 유사한 GraphQL 쿼리 및 변형을 통합하여 CRUD 작업을 수행할 수 있습니다.
﻿
5단계 – 백엔드 보안
접근 제어 구현
객체에 직접 접근 제어 목록(ACL)을 설정하여 데이터를 보호하세요. 예를 들어, 개인 아이템을 생성할 때 소유자만 읽기/쓰기 권한을 가질 수 있도록 할 수 있습니다.
JS
async function createPrivateItem(itemData, owner) {
  const response = await fetch(`${process.env.BACK4APP_SERVER_URL}/classes/Items`, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': process.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': process.env.BACK4APP_REST_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        [owner]: { read: true, write: true },
        "*": { read: false, write: false }
      }
    })
  });
  return response.json();
}
async function createPrivateItem(itemData, owner) {
  const response = await fetch(`${process.env.BACK4APP_SERVER_URL}/classes/Items`, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': process.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': process.env.BACK4APP_REST_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: itemData.title,
      description: itemData.description,
      ACL: {
        [owner]: { read: true, write: true },
        "*": { read: false, write: false }
      }
    })
  });
  return response.json();
}
﻿
클래스 수준 권한 구성
Back4app 대시보드 내에서 각 컬렉션에 대한 클래스 수준 권한(CLPS)을 설정하여 인증된 사용자 또는 특정 역할에 대한 접근을 제한하여 데이터의 보안을 유지합니다.
﻿
6단계 – 사용자 인증 관리
계정 관리 설정
Back4app은 강력한 사용자 시스템을 활용하며, 이를 RedwoodJS에 통합하여 사용자 인증을 수행할 수 있습니다. RedwoodJS 앱에서 API 호출을 통해 사용자 가입 및 로그인을 처리합니다.
예시: 사용자 등록
JS
// web/src/components/Auth/SignUp.js
import { useState } from 'react';

const SignUp = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(`${process.env.BACK4APP_SERVER_URL}/users`, {
        method: 'POST',
        headers: {
          'X-Parse-Application-Id': process.env.BACK4APP_APP_ID,
          'X-Parse-REST-API-Key': process.env.BACK4APP_REST_API_KEY,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, email, password })
      });
      const data = await response.json();
      if (data.error) {
        alert('Sign up failed: ' + data.error);
      } else {
        alert('User successfully registered!');
      }
    } catch (error) {
      console.error('Registration error:', error);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};

export default SignUp;
// web/src/components/Auth/SignUp.js
import { useState } from 'react';

const SignUp = () => {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch(`${process.env.BACK4APP_SERVER_URL}/users`, {
        method: 'POST',
        headers: {
          'X-Parse-Application-Id': process.env.BACK4APP_APP_ID,
          'X-Parse-REST-API-Key': process.env.BACK4APP_REST_API_KEY,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, email, password })
      });
      const data = await response.json();
      if (data.error) {
        alert('Sign up failed: ' + data.error);
      } else {
        alert('User successfully registered!');
      }
    } catch (error) {
      console.error('Registration error:', error);
    }
  };

  return (
    <form onSubmit={handleSignUp}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Sign Up</button>
    </form>
  );
};

export default SignUp;
﻿
로그인 및 사용자 세션 유지에 대해 유사한 방법을 적용할 수 있습니다.
﻿
7단계 – 웹 배포를 통한 RedwoodJS 프론트엔드 배포
Back4app의 웹 배포 기능은 RedwoodJS 프론트엔드를 원활하게 호스팅할 수 있게 해줍니다. 코드를 프로덕션에 푸시하기 위해 다음 단계를 따르세요:
7.1 프로덕션 버전 빌드하기
터미널에서 프로젝트 폴더를 엽니다.
빌드 명령어를 실행합니다:
Bash
yarn rw build
yarn rw build
﻿
이 명령은 최적화된 정적 파일이 포함된 web/dist 폴더를 생성합니다.
빌드 출력을 확인합니다:
 web/dist 폴더에 모든 필요한 자산과 함께 index.html 파일이 포함되어 있는지 확인합니다.
7.2 소스 코드를 정리하고 커밋하기
귀하의 리포지토리는 RedwoodJS 애플리케이션의 전체 소스를 호스팅해야 합니다. 일반적인 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Redwood/
├── api/
├── web/
│   ├── dist/
│   ├── src/
│   │   ├── components/
│   │   │   ├── ItemsCell/
│   │   │   └── Auth/
│   │   └── App.js
│   └── index.html
├── .env
└── package.json
Basic-CRUD-App-Redwood/
├── api/
├── web/
│   ├── dist/
│   ├── src/
│   │   ├── components/
│   │   │   ├── ItemsCell/
│   │   │   └── Auth/
│   │   └── App.js
│   └── index.html
├── .env
└── package.json
﻿
GitHub에 커밋하기
Git 초기화 (필요한 경우):
Bash
git init
git init
﻿
파일 스테이징하기:
Bash
git add .
git add .
﻿
코드 커밋하기:
Bash
git commit -m "RedwoodJS CRUD 프론트엔드 초기 커밋"
git commit -m "RedwoodJS CRUD 프론트엔드 초기 커밋"
﻿
GitHub 리포지토리 생성하기 (예: Basic-CRUD-App-Redwood) 그리고 코드를 푸시하기:
Bash
git remote add origin https://github.com/your-username/Basic-CRUD-App-Redwood.git
git push -u origin main
git remote add origin https://github.com/your-username/Basic-CRUD-App-Redwood.git
git push -u origin main
﻿
7.3 웹 배포와 통합하기
웹 배포에 접근하기 당신의 Back4app 대시보드에서 프로젝트(기본-CRUD-앱-레드우드) 아래.
GitHub 계정 연결하기 아직 연결하지 않았다면, 안내에 따라.
저장소 및 브랜치 선택하기 (예: main) 레드우드JS 코드가 포함된.
7.4 배포 매개변수 설정하기
빌드 명령어: yarn rw build를 지정하세요. 저장소에 미리 빌드된 배포가 포함되어 있지 않은 경우.
출력 디렉토리: 출력 디렉토리를 web/dist로 설정하세요.
환경 변수: 필요한 환경 변수를 포함하세요, 예를 들어 Back4app 키.
7.5 도커로 컨테이너화하기
배포를 위해 도커를 선호한다면, Dockerfile을 저장소에 포함하세요. 예를 들어:
Dockerfile
# Use an official Node image for building the app
FROM node:16-alpine as builder

# Set the working directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json ./

# Install dependencies
RUN yarn install

# Copy the project files
COPY . .

# Build the RedwoodJS app
RUN yarn rw build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/web/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use an official Node image for building the app
FROM node:16-alpine as builder

# Set the working directory
WORKDIR /app

# Copy dependency definitions
COPY package*.json ./

# Install dependencies
RUN yarn install

# Copy the project files
COPY . .

# Build the RedwoodJS app
RUN yarn rw build

# Use Nginx to serve the static files
FROM nginx:stable-alpine
COPY --from=builder /app/web/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.6 애플리케이션 배포
배포 버튼을 누르세요 Back4app에서 구성을 완료한 후.
배포 프로세스를 모니터링하세요:
Back4app이 코드를 가져오고, 프로젝트를 빌드하며, 컨테이너화된 환경에 배포합니다.
애플리케이션 URL을 가져오세요:
배포가 완료되면 RedwoodJS 애플리케이션이 호스팅되는 URL이 제공됩니다.
7.7 배포 확인
제공된 URL을 열어보세요 브라우저에서 사이트가 로드되는지 확인합니다.
애플리케이션 기능 테스트:
모든 페이지, 경로 및 자산이 올바르게 로드되는지 확인합니다.
필요시 문제 해결:
필요한 디버깅을 위해 브라우저 개발자 도구와 Back4app 배포 로그를 활용하세요.
﻿
8단계 – 최종 생각과 미래 방향
Back4app을 사용하여 RedwoodJS 기반 CRUD 애플리케이션을 구축한 것을 축하합니다! 
당신은 Basic-CRUD-App-Redwood이라는 제목의 프로젝트를 성공적으로 설정하고, 항목 및 사용자에 대한 상세한 데이터베이스 컬렉션을 생성했으며, 강력한 데이터 관리 및 보안과 함께 깔끔한 프론트엔드를 통합했습니다.
다음은 무엇인가요?
프론트엔드 개선하기:
상세 항목 페이지, 검색 기능 및 실시간 업데이트와 같은 기능으로 RedwoodJS 애플리케이션을 향상시키세요.
고급 기능 통합하기:
서버리스 기능, 타사 통합 또는 더 복잡한 접근 제어를 추가하는 것을 고려하세요.
추가 리소스 탐색하기:
더 깊이 들어가 Back4app 문서 및 RedwoodJS 가이드를 통해 추가 개선을 위한 정보를 찾아보세요.
이 튜토리얼을 따라함으로써, 이제 확장 가능한 CRUD 백엔드를 개발하고 이를 Back4app을 사용하여 현대적인 RedwoodJS 프론트엔드와 원활하게 통합하는 방법을 알게 되었습니다. 코딩 여정을 즐기세요!
필드	데이터 유형	목적
_id	객체 ID	자동 생성된 고유 식별자.
제목	문자열	항목의 이름 또는 제목.
설명	문자열	항목을 설명하는 간단한 요약.
생성일	날짜	레코드 생성 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
필드	데이터 유형	목적
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유 식별자.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호_해시	문자열	인증을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	최신 업데이트의 타임스탬프.
업데이트됨 24 Feb 2025
이 페이지가 도움이 되었습니까?
Blazor로 기본 CRUD 애플리케이션을 만드는 방법은?
Deno로 CRUD 애플리케이션을 개발하는 방법? 종합 가이드