Vue.js로 CRUD 앱을 개발하는 방법?

32min
소개
이 가이드에서는 Vue.js를 사용하여 완전한 기능을 갖춘 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 알아봅니다.
우리는 Back4app의 힘을 활용하여 백엔드를 손쉽게 처리할 것입니다. 이 튜토리얼은 Back4app 프로젝트 설정, 동적 데이터 모델 작성, Vue.js로 CRUD 작업 구현을 안내합니다.
먼저, Basic-CRUD-App-Vue라는 이름의 Back4app 프로젝트를 설정하여 애플리케이션에 강력한 비관계형 데이터베이스를 제공합니다. 수집 및 필드를 수동으로 구성하거나 Back4app의 지능형 AI 에이전트를 사용하여 데이터 모델을 설계합니다.
다음으로, Back4app 관리 앱을 사용하여 데이터를 관리합니다. 이 사용자 친화적인 드래그 앤 드롭 인터페이스를 통해 레코드를 쉽게 생성, 읽기, 업데이트 및 삭제할 수 있습니다.
마지막으로, Vue.js 프론트엔드를 REST API 호출(axios 사용)을 통해 Back4app과 통합하여 안전하고 효율적인 CRUD 작업을 실행합니다.
이 튜토리얼이 끝날 무렵, 필수 CRUD 기능과 안전한 사용자 인증 및 데이터 관리를 수행하는 프로덕션 준비가 완료된 Vue.js 애플리케이션을 갖게 될 것입니다.
주요 요점
확장 가능한 백엔드로 지원되는 Vue.js 기반 CRUD 앱을 구축하는 방법을 배우세요.
유연한 백엔드를 구조화하고 이를 Vue.js 프로젝트와 연결하는 방법을 이해하세요.
Back4app의 직관적인 관리 앱을 사용하여 원활한 CRUD 작업을 수행하는 방법을 알아보세요.
Vue.js 애플리케이션을 위한 Docker 컨테이너화 등 배포 기술을 탐색하세요.
﻿
전제 조건
시작하기 전에 다음을 확인하세요:
새 프로젝트가 설정된 Back4app 계정입니다.
도움이 필요하신가요? Back4app 시작하기를 참조하세요.
Vue.js 개발 환경입니다.
Vue CLI 또는 VSCode와 같은 좋아하는 IDE를 사용하세요.
Vue.js, 현대 JavaScript 및 REST API에 대한 기본 지식입니다.
필요한 경우 Vue.js 문서를 복습하세요.
﻿
1단계 – 프로젝트 설정
새로운 Back4app 프로젝트 만들기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 버튼을 클릭하세요. 
프로젝트 이름을 지정하세요: Basic-CRUD-App-Vue 그리고 설정을 완료하기 위해 안내에 따라 진행하세요.
새 프로젝트 만들기
﻿
프로젝트를 만든 후, 대시보드에 나타나며 백엔드의 기초를 마련합니다.
﻿
2단계 – 데이터 모델 설계
데이터 구조화
이 CRUD 애플리케이션을 위해, Back4app 프로젝트 내에 여러 컬렉션을 정의할 것입니다. 아래의 예시는 CRUD 기능에 필요한 핵심 컬렉션과 그 필드를 설명합니다.
1. 아이템 컬렉션
이 컬렉션은 각 아이템에 대한 세부 정보를 저장합니다.
필드
데이터 유형
설명
_id
객체 ID
자동으로 생성된 고유 ID.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간략한 요약.
생성일
날짜
항목 생성의 타임스탬프.
업데이트됨
날짜
마지막 업데이트의 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 자격 증명 및 인증 데이터를 처리합니다.
필드
데이터 유형
설명
_id
객체 ID
자동으로 생성된 고유 ID.
사용자 이름
문자열
사용자를 위한 고유한 사용자 이름.
이메일
문자열
고유한 이메일 주소.
비밀번호 해시
문자열
로그인을 위한 암호화된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
마지막 계정 업데이트 타임스탬프.
Back4app 대시보드에서 이러한 컬렉션과 필드를 수동으로 추가할 수 있습니다.
새 클래스 만들기
﻿
데이터 유형을 선택하고, 필드 이름을 제공하며, 기본값을 설정하고, 필요한 경우 필드를 필수로 표시하여 필드를 추가할 수 있습니다.
열 만들기
﻿
스키마 설정을 위한 Back4app AI 에이전트 활용하기
통합된 Back4app AI 에이전트는 설명에 따라 데이터 스키마를 자동으로 생성할 수 있습니다. 이 도구는 설정 속도를 높이고 모델이 CRUD 요구 사항을 충족하는지 확인합니다.
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단계 – Vue.js 애플리케이션을 Back4app과 연결하기
백엔드가 준비되면, Vue.js 앱을 Back4app과 연결할 시간입니다.
Axios를 사용한 REST API 호출
CRUD 작업을 수행하기 위해 axios를 통해 REST API 호출을 사용할 것입니다.
Axios 설치:
프로젝트 디렉토리에서 다음 명령을 실행하세요:
Bash
npm install axios
npm install axios
﻿
Axios 설정:
파일에 axios 인스턴스를 생성하세요 (예: api.js):
JS
// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://parseapi.back4app.com',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  }
});

export default apiClient;
// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://parseapi.back4app.com',
  headers: {
    'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
    'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
    'Content-Type': 'application/json'
  }
});

export default apiClient;
﻿
Vue 컴포넌트에서 CRUD 메서드 구현:
항목을 가져오고 생성하는 방법의 예는 다음과 같습니다:
JS
// ItemsService.js
import apiClient from './api';

export default {
  fetchItems() {
    return apiClient.get('/classes/Items')
      .then(response => response.data.results)
      .catch(error => console.error('항목 가져오기 오류:', error));
  },

  addItem(title, description) {
    return apiClient.post('/classes/Items', {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('항목 추가 오류:', error));
  },

  updateItem(objectId, title, description) {
    return apiClient.put(`/classes/Items/${objectId}`, {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('항목 업데이트 오류:', error));
  },

  deleteItem(objectId) {
    return apiClient.delete(`/classes/Items/${objectId}`)
    .then(response => response.data)
    .catch(error => console.error('항목 삭제 오류:', error));
  }
};
// ItemsService.js
import apiClient from './api';

export default {
  fetchItems() {
    return apiClient.get('/classes/Items')
      .then(response => response.data.results)
      .catch(error => console.error('항목 가져오기 오류:', error));
  },

  addItem(title, description) {
    return apiClient.post('/classes/Items', {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('항목 추가 오류:', error));
  },

  updateItem(objectId, title, description) {
    return apiClient.put(`/classes/Items/${objectId}`, {
      title,
      description
    })
    .then(response => response.data)
    .catch(error => console.error('항목 업데이트 오류:', error));
  },

  deleteItem(objectId) {
    return apiClient.delete(`/classes/Items/${objectId}`)
    .then(response => response.data)
    .catch(error => console.error('항목 삭제 오류:', error));
  }
};
﻿
이 API 메서드를 Vue 컴포넌트에 통합하여 앱의 데이터를 관리하세요.
﻿
5단계 – 백엔드 보안 설정
액세스 제어 목록(ACL) 구성
기록에 대한 ACL을 설정하여 데이터를 보호하세요. 예를 들어, 소유자만 볼 수 있거나 수정할 수 있는 항목을 생성하려면:
JS
import apiClient from './api';

export function createPrivateItem(title, description, userId) {
  const acl = {
    "*": { "read": false, "write": false },
    [userId]: { "read": true, "write": true }
  };

  return apiClient.post('/classes/Items', {
    title,
    description,
    ACL: acl
  })
  .then(response => response.data)
  .catch(error => console.error('Error creating private item:', error));
}
import apiClient from './api';

export function createPrivateItem(title, description, userId) {
  const acl = {
    "*": { "read": false, "write": false },
    [userId]: { "read": true, "write": true }
  };

  return apiClient.post('/classes/Items', {
    title,
    description,
    ACL: acl
  })
  .then(response => response.data)
  .catch(error => console.error('Error creating private item:', error));
}
﻿
클래스 수준 권한(CLP) 설정
Back4app 대시보드를 사용하여 인증된 사용자만 특정 컬렉션에 접근할 수 있도록 CLP를 구성하세요. 이렇게 하면 기본적으로 백엔드가 안전하게 유지됩니다.
﻿
6단계 – 사용자 인증 구현
사용자 등록 및 로그인 설정
Back4app은 인증을 위해 내장된 사용자 컬렉션을 활용합니다. Vue.js 앱에서 REST API 호출을 사용하여 사용자 가입 및 로그인을 관리할 수 있습니다. 방법은 다음과 같습니다:
JS
// AuthService.js
import apiClient from './api';

export default {
  register(username, password, email) {
    return apiClient.post('/users', {
      username,
      password,
      email
    })
    .then(response => response.data)
    .catch(error => console.error('Registration error:', error));
  },

  login(username, password) {
    return apiClient.get('/login', {
      params: { username, password }
    })
    .then(response => response.data)
    .catch(error => console.error('Login error:', error));
  }
};
// AuthService.js
import apiClient from './api';

export default {
  register(username, password, email) {
    return apiClient.post('/users', {
      username,
      password,
      email
    })
    .then(response => response.data)
    .catch(error => console.error('Registration error:', error));
  },

  login(username, password) {
    return apiClient.get('/login', {
      params: { username, password }
    })
    .then(response => response.data)
    .catch(error => console.error('Login error:', error));
  }
};
﻿
﻿
이 설정은 세션 관리, 비밀번호 재설정 및 추가 인증 기능을 처리할 수 있게 해줍니다.
﻿
7단계 – Vue.js 애플리케이션 배포
Back4app은 배포 프로세스를 간소화합니다. Docker 컨테이너화를 포함한 다양한 방법으로 Vue.js 애플리케이션을 배포할 수 있습니다.
7.1 Vue.js 애플리케이션 빌드
컴파일 및 번들:
Vue CLI를 사용하여 앱을 컴파일합니다:
Bash
npm run build
npm run build
﻿
빌드 검토:
출력 폴더(보통 dist/)에 모든 필요한 파일이 포함되어 있는지 확인합니다.
﻿
7.2 프로젝트 구조 개요
일반적인 Vue.js 프로젝트 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Vue/
|-- public/
|-- src/
|   |-- components/
|   |   |-- ItemList.vue
|   |   |-- ItemForm.vue
|   |-- services/
|   |   |-- api.js
|   |   |-- ItemsService.js
|   |   |-- AuthService.js
|   |-- App.vue
|   |-- main.js
|-- package.json
|-- README.md
Basic-CRUD-App-Vue/
|-- public/
|-- src/
|   |-- components/
|   |   |-- ItemList.vue
|   |   |-- ItemForm.vue
|   |-- services/
|   |   |-- api.js
|   |   |-- ItemsService.js
|   |   |-- AuthService.js
|   |-- App.vue
|   |-- main.js
|-- package.json
|-- README.md
﻿
7.3 Vue.js 앱 도커화
컨테이너화된 배포를 선호하는 경우, 프로젝트 루트에 Dockerfile을 포함하세요:
Dockerfile
# Use a Node image for building the app
FROM node:16 AS build

# Set the working directory
WORKDIR /app

# Install dependencies and build the app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Use an Nginx image to serve the app
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
# Use a Node image for building the app
FROM node:16 AS build

# Set the working directory
WORKDIR /app

# Install dependencies and build the app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Use an Nginx image to serve the app
FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
﻿
7.4 Back4app 웹 배포로 배포하기
GitHub 리포지토리 연결:
당신의 Vue.js 프로젝트가 GitHub에 호스팅되어 있는지 확인하세요.
배포 구성:
Back4app 대시보드에서 웹 배포 옵션을 선택하고, 리포지토리(예: Basic-CRUD-App-Vue)를 연결한 후 원하는 브랜치를 선택하세요.
빌드 명령 설정:
빌드 명령(예: npm run build)을 지정하고 출력 폴더(예: dist)를 지정하세요.
배포:
배포를 클릭하고 앱이 라이브로 전환될 때까지 로그를 지켜보세요.
﻿
8단계 – 최종 생각과 다음 단계
축하합니다! Back4app과 통합된 Vue.js 기반 CRUD 애플리케이션을 구축하셨습니다. 
당신은 Basic-CRUD-App-Vue라는 이름의 프로젝트를 구성하고, 아이템과 사용자에 대한 컬렉션을 설정했으며, 데이터 관리를 위해 Back4app 관리 앱을 사용했습니다. 
또한, Vue.js 프론트엔드를 REST API 호출을 통해 연결하고 보안 조치를 마련했습니다.
다음 단계:
애플리케이션 확장:
고급 필터링, 상세 아이템 보기 또는 실시간 업데이트와 같은 기능을 통합하세요.
백엔드 기능 향상:
클라우드 기능을 탐색하고, 외부 API를 통합하거나 역할 기반 접근 제어를 구현하세요.
계속 배우기:
당신의 앱을 더욱 정교하게 다듬기 위해 Back4app 문서 및 추가 리소스를 참조하세요.
코딩을 즐기고 Vue.js CRUD 애플리케이션을 구축하는 것을 즐기세요!
필드	데이터 유형	설명
_id	객체 ID	자동으로 생성된 고유 ID.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 요약.
생성일	날짜	항목 생성의 타임스탬프.
업데이트됨	날짜	마지막 업데이트의 타임스탬프.
필드	데이터 유형	설명
_id	객체 ID	자동으로 생성된 고유 ID.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	고유한 이메일 주소.
비밀번호 해시	문자열	로그인을 위한 암호화된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	마지막 계정 업데이트 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Create a CRUD Application with Elm?
How to Build CRUD App with JavaScript?