Nuxt.js로 CRUD 애플리케이션 만들기?

32min
개요
이 안내서에서는 Nuxt.js를 사용하여 완전한 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 구축하는 방법을 알아봅니다.
우리는 데이터 저장 및 관리를 쉽게 처리하기 위해 Back4app을 백엔드 서비스로 사용할 것입니다.
이 가이드는 필수 CRUD 기능을 다루며, Back4app 프로젝트 설정, 다목적 데이터 모델 생성 및 Nuxt.js 애플리케이션과 CRUD 작업 통합 방법을 자세히 설명합니다.
먼저, Basic-CRUD-App-Nuxt라는 이름의 Back4app 프로젝트를 구성하여 강력한 NoSQL 데이터 저장 환경을 제공합니다.
Back4app의 지능형 AI 에이전트를 통해 수동으로 또는 자동으로 클래스를 설정하여 데이터 구조를 정의할 것입니다.
다음으로, 효율적인 데이터 작업을 위한 사용자 친화적인 드래그 앤 드롭 인터페이스인 Back4app 관리 앱을 사용하여 백엔드를 관리할 것입니다.
마지막으로, REST API 호출을 사용하여 Nuxt.js 애플리케이션을 Back4app에 연결하여 안전한 CRUD 작업을 수행할 것입니다.
이 가이드를 마치면 기본 CRUD 작업과 안전한 사용자 인증 및 데이터 관리를 처리할 수 있는 프로덕션 준비가 완료된 Nuxt.js 애플리케이션을 만들게 됩니다.
주요 사항
고성능 백엔드로 Nuxt.js CRUD 애플리케이션을 구축하는 방법을 배우세요.
확장 가능한 백엔드를 설계하고 이를 Nuxt.js 프론트엔드에 연결하는 과정을 이해하세요.
Back4app의 관리 앱이 생성, 읽기, 업데이트 및 삭제와 같은 데이터 작업을 어떻게 간소화하는지 탐색하세요.
원활한 프로덕션 롤아웃을 위한 Docker 컨테이너화와 같은 배포 방법에 대한 통찰력을 얻으세요.
﻿
전제 조건
시작하기 전에 다음 사항을 확인하세요:
새로 구성된 프로젝트가 있는 Back4app 계정입니다.
도움이 필요하면 Back4app 시작하기를 참조하세요.
Nuxt.js를 위한 개발 환경입니다.
Node.js가 설치되어 있고, 선택한 IDE 또는 텍스트 편집기를 설정했는지 확인하세요.
Nuxt.js, Vue.js 및 REST API에 대한 기본 지식입니다.
리프레셔가 필요하면 Nuxt.js 문서를 참조하세요.
﻿
1단계 – 프로젝트 초기화
새 Back4app 프로젝트 설정하기
Back4app 계정에 로그인하세요.
대시보드에서 “새 앱” 옵션을 선택하세요.
프로젝트 이름을 지정하세요: Basic-CRUD-App-Nuxt 및 설정 지침을 따르세요.
새 프로젝트 만들기
﻿
프로젝트가 생성되면 대시보드에 나타나며, 추가 백엔드 구성을 위해 준비됩니다.
﻿
2단계 – 데이터 모델 만들기
데이터 구조 설정하기
이 CRUD 애플리케이션을 위해 Back4app 프로젝트 내에 여러 클래스(또는 컬렉션)를 설정할 것입니다. 아래는 기본 CRUD 기능에 필요한 주요 클래스와 필드의 예입니다.
1. 아이템 컬렉션
이 컬렉션은 각 항목에 대한 세부 정보를 저장합니다.
필드
유형
설명
_id
객체 ID
시스템 생성 고유 식별자.
제목
문자열
항목의 이름.
설명
문자열
항목에 대한 간략한 설명.
생성일
날짜
항목 생성의 타임스탬프.
업데이트됨
날짜
마지막 업데이트를 표시하는 타임스탬프.
2. 사용자 수집
이 컬렉션은 사용자 세부정보 및 인증 정보를 관리합니다.
필드
유형
설명
_id
객체 ID
자동 생성된 고유 식별자.
사용자 이름
문자열
사용자를 위한 고유한 사용자 이름.
이메일
문자열
사용자의 고유 이메일 주소.
비밀번호 해시
문자열
안전한 인증을 위한 해시된 비밀번호.
생성일
날짜
계정 생성 타임스탬프.
업데이트됨
날짜
계정 수정에 대한 타임스탬프.
이러한 컬렉션과 필드를 Back4app 대시보드에서 수동으로 정의할 수 있습니다.
새 클래스 만들기
﻿
필드를 추가하려면 적절한 데이터 유형을 선택하고, 필드 이름을 지정하고, 선택적으로 기본값을 설정하며, 필드가 필수인지 여부를 지정합니다.
열 만들기
﻿
스키마 생성을 위한 Back4app AI 에이전트 활용하기
Back4app AI 에이전트는 제공된 설명에서 자동으로 스키마를 구축할 수 있는 대시보드 내의 유용한 도구입니다. 이 기능은 설정 프로세스를 가속화하고 데이터 모델이 CRUD 작업에 최적화되도록 보장합니다.
AI 에이전트 사용 방법:
AI 에이전트 열기:
Back4app 대시보드의 프로젝트 설정에서 액세스하세요.
스키마 설명하기:
필요한 클래스와 필드를 설명하는 자세한 프롬프트를 제공하세요.
검토 및 확인:
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)
﻿
이 스마트 기능은 시간을 절약하고 데이터 구조가 최적의 CRUD 작업을 위해 일관되게 설정되도록 보장합니다.
﻿
3단계 – 관리 앱 활성화 및 CRUD 작업 처리
관리 앱 개요
Back4app 관리 앱은 원활한 백엔드 데이터 관리를 위한 코드 없는 인터페이스를 제공합니다. 드래그 앤 드롭 기능을 통해 레코드를 추가, 편집, 보기 및 삭제하는 CRUD 작업을 쉽게 수행할 수 있습니다.
관리 앱 활성화
“더보기” 메뉴로 이동 Back4app 대시보드에서.
“관리 앱” 선택 그리고 “관리 앱 활성화.”
관리 계정 설정 초기 자격 증명을 생성하여. 이 단계에서는 B4aAdminUser와 같은 시스템 역할을 생성하고 필수 시스템 컬렉션을 구성합니다.
관리 앱 활성화
﻿
활성화되면 관리 앱에 로그인하여 애플리케이션의 데이터를 손쉽게 관리하세요.
관리자 앱 대시보드
﻿
CRUD 작업을 위한 관리자 앱 사용하기
관리자 앱 내에서 다음을 수행할 수 있습니다:
새 항목 추가: 데이터 삽입을 위해 컬렉션(예: 항목)에서 “레코드 추가” 버튼을 사용하세요.
보기 및 편집: 세부 정보를 확인하거나 수정하려면 레코드를 클릭하세요.
항목 삭제: 더 이상 필요하지 않은 레코드를 제거하세요.
이 직관적인 인터페이스는 애플리케이션의 데이터 관리를 간소화합니다.
﻿
4단계 – Nuxt.js 애플리케이션을 Back4app에 연결하기
백엔드가 준비되면, 다음 작업은 Nuxt.js 앱을 Back4app과 통합하는 것입니다.
REST API 호출 사용하기
Parse SDK는 Nuxt.js와 일반적으로 사용되지 않기 때문에, REST API 호출을 사용하여 CRUD 작업을 수행할 것입니다.
Nuxt.js에서 API 요청 설정하기
Axios 설치:
아직 설치되지 않았다면, Nuxt.js 프로젝트에 Axios를 추가하세요:
Bash
npm install @nuxtjs/axios
npm install @nuxtjs/axios
﻿
Axios 모듈 구성:
당신의 nuxt.config.js, Axios 모듈을 포함하고 기본 구성을 설정하세요:
Text
export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://parseapi.back4app.com'
  }
}
export default {
  modules: ['@nuxtjs/axios'],
  axios: {
    baseURL: 'https://parseapi.back4app.com'
  }
}
﻿
CRUD 작업 수행:
API 호출을 처리하기 위해 서비스(예: services/items.js)를 생성하세요. 아래는 항목을 가져오고, 생성하고, 업데이트하고, 삭제하는 방법의 예입니다:
Text
// services/items.js
export default {
  async fetchItems() {
    try {
      const response = await this.$axios.$get('/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.results;
    } catch (error) {
      console.error('항목 가져오기 오류:', error);
      return [];
    }
  },

  async addItem(title, description) {
    try {
      const response = await this.$axios.$post('/classes/Items', {
        title,
        description
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('항목 생성 오류:', error);
    }
  },

  async updateItem(objectId, newTitle, newDescription) {
    try {
      const response = await this.$axios.$put(`/classes/Items/${objectId}`, {
        title: newTitle,
        description: newDescription
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('항목 업데이트 오류:', error);
    }
  },

  async removeItem(objectId) {
    try {
      const response = await this.$axios.$delete(`/classes/Items/${objectId}`, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('항목 삭제 오류:', error);
    }
  }
}
// services/items.js
export default {
  async fetchItems() {
    try {
      const response = await this.$axios.$get('/classes/Items', {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response.results;
    } catch (error) {
      console.error('항목 가져오기 오류:', error);
      return [];
    }
  },

  async addItem(title, description) {
    try {
      const response = await this.$axios.$post('/classes/Items', {
        title,
        description
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('항목 생성 오류:', error);
    }
  },

  async updateItem(objectId, newTitle, newDescription) {
    try {
      const response = await this.$axios.$put(`/classes/Items/${objectId}`, {
        title: newTitle,
        description: newDescription
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('항목 업데이트 오류:', error);
    }
  },

  async removeItem(objectId) {
    try {
      const response = await this.$axios.$delete(`/classes/Items/${objectId}`, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      return response;
    } catch (error) {
      console.error('항목 삭제 오류:', error);
    }
  }
}
﻿
Nuxt.js 페이지나 구성 요소 내에서 이러한 API 메서드를 통합하여 전체 CRUD 기능을 활성화하세요.
﻿
5단계 – 보안 강화
액세스 제어 목록(ACL) 구현
개별 객체에 대한 ACL을 설정하여 데이터를 보호하세요. 예를 들어, 항목을 제한하여 생성자만 볼 수 있도록 하거나 수정할 수 있습니다:
Text
async function createPrivateItem(title, description, userId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [userId]: { "read": true, "write": true }
    };

    const response = await this.$axios.$post('/classes/Items', {
      title,
      description,
      ACL: acl
    }, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    console.log('Private item created:', response);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
async function createPrivateItem(title, description, userId) {
  try {
    const acl = {
      "*": { "read": false, "write": false },
      [userId]: { "read": true, "write": true }
    };

    const response = await this.$axios.$post('/classes/Items', {
      title,
      description,
      ACL: acl
    }, {
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
      }
    });
    console.log('Private item created:', response);
  } catch (error) {
    console.error('Error creating private item:', error);
  }
}
﻿
클래스 수준 권한(CLP) 설정
Back4app 대시보드에서 CLP를 구성하여 기본 액세스 정책을 시행하고, 인증된 사용자만 특정 컬렉션과 상호작용할 수 있도록 하세요.
﻿
6단계 – 사용자 인증 구현
사용자 등록 및 로그인 설정
Back4app은 인증 관리를 위해 내장된 사용자 컬렉션을 활용합니다. Nuxt.js 앱에서 REST API 호출을 사용하여 등록 및 로그인을 구현하세요.
예시: 사용자 등록 및 로그인
Text
export default {
  async registerUser(username, password, email) {
    try {
      const response = await this.$axios.$post('/users', {
        username,
        password,
        email
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User registered:', response);
      return response;
    } catch (error) {
      console.error('Registration error:', error);
    }
  },

  async loginUser(username, password) {
    try {
      const response = await this.$axios.$get('/login', {
        params: { username, password },
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User logged in:', response);
      return response;
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
export default {
  async registerUser(username, password, email) {
    try {
      const response = await this.$axios.$post('/users', {
        username,
        password,
        email
      }, {
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User registered:', response);
      return response;
    } catch (error) {
      console.error('Registration error:', error);
    }
  },

  async loginUser(username, password) {
    try {
      const response = await this.$axios.$get('/login', {
        params: { username, password },
        headers: {
          'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
          'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY'
        }
      });
      console.log('User logged in:', response);
      return response;
    } catch (error) {
      console.error('Login error:', error);
    }
  }
}
﻿
이 접근 방식은 세션 관리, 비밀번호 복구 및 추가 인증 기능을 지원합니다.
﻿
7단계 – Nuxt.js 애플리케이션 배포
Back4app은 배포 프로세스를 간소화합니다. Docker 컨테이너화를 포함한 다양한 방법으로 Nuxt.js 앱을 배포할 수 있습니다.
7.1 Nuxt.js 프로젝트 빌드하기
애플리케이션 빌드하기:
다음 명령어를 실행하여 프로덕션 빌드를 생성합니다:
Bash
npm run build
npm run build
﻿
애플리케이션 시작하기:
로컬에서 프로덕션 빌드를 테스트하려면 다음을 사용하세요:
Bash
npm run start
npm run start
﻿
7.2 프로젝트 구조 정리하기
전형적인 Nuxt.js 프로젝트 구조는 다음과 같을 수 있습니다:
Text
Basic-CRUD-App-Nuxt/
|-- assets/
|-- components/
|-- layouts/
|-- pages/
|-- plugins/
|-- services/
|   |-- items.js
|   |-- auth.js
|-- static/
|-- nuxt.config.js
|-- package.json
|-- Dockerfile
Basic-CRUD-App-Nuxt/
|-- assets/
|-- components/
|-- layouts/
|-- pages/
|-- plugins/
|-- services/
|   |-- items.js
|   |-- auth.js
|-- static/
|-- nuxt.config.js
|-- package.json
|-- Dockerfile
﻿
7.3 Nuxt.js 앱 도커화하기
컨테이너화를 선호하는 경우, 프로젝트의 루트에 Dockerfile을 포함하세요:
Dockerfile
# Use a Node.js image as the base
FROM node:16-alpine

# Set working directory
WORKDIR /app

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

# Copy the rest of the application
COPY . .

# Build the application
RUN npm run build

# Expose the port (adjust if necessary)
EXPOSE 3000

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

# Set working directory
WORKDIR /app

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

# Copy the rest of the application
COPY . .

# Build the application
RUN npm run build

# Expose the port (adjust if necessary)
EXPOSE 3000

# Start the application
CMD ["npm", "run", "start"]
﻿
7.4 Back4app 웹 배포를 통한 배포
저장소 연결:
당신의 Nuxt.js 프로젝트가 GitHub에 호스팅되어 있는지 확인하세요.
배포 구성:
Back4app 대시보드에서 웹 배포 섹션으로 이동하여 저장소(예: Basic-CRUD-App-Nuxt)를 연결하고 적절한 브랜치를 선택하세요.
빌드 지침 설정:
빌드 명령(예: npm run build)을 정의하고 출력 디렉토리를 지정하세요.
배포:
배포를 클릭하고 애플리케이션이 라이브될 때까지 로그를 따르세요.
﻿
8단계 – 마무리 및 향후 단계
잘했어요! 이제 Back4app과 통합된 Nuxt.js CRUD 애플리케이션을 구축했습니다.
"},{
필드	유형	설명
_id	객체 ID	시스템 생성 고유 식별자.
제목	문자열	항목의 이름.
설명	문자열	항목에 대한 간략한 설명.
생성일	날짜	항목 생성의 타임스탬프.
업데이트됨	날짜	마지막 업데이트를 표시하는 타임스탬프.
필드	유형	설명
_id	객체 ID	자동 생성된 고유 식별자.
사용자 이름	문자열	사용자를 위한 고유한 사용자 이름.
이메일	문자열	사용자의 고유 이메일 주소.
비밀번호 해시	문자열	안전한 인증을 위한 해시된 비밀번호.
생성일	날짜	계정 생성 타임스탬프.
업데이트됨	날짜	계정 수정에 대한 타임스탬프.
업데이트됨 05 Mar 2025
이 페이지가 도움이 되었습니까?
How to Create a CRUD App with Gatsby?
How to Create a CRUD Application with Svelte?