Nuxt 애플리케이션을 빌드하고 배포하는 방법은 무엇인가요?
Nuxt.js는 웹 앱을 개발할 수 있는 Vue.js, Nitro 및 Vite를 기반으로 만들어진 오픈 소스 프레임워크입니다.
서버 측 렌더링을 위한 React 프레임워크인 Next.js에서 영감을 얻은 Nuxt.js를 사용하면 개발자는 다양한 렌더링 모드를 적용하여 빠른 웹 애플리케이션을 제작할 수 있습니다.
2016년에 출시된 Nuxt.js는 개발자 친화적인 철학과 풍부한 기능으로 인해 개발자들 사이에서 폭넓은 지지를 받고 있습니다.
Contents
Nuxt.js의 장점
Nuxt.js는 Vue.js 개발을 위한 강력한 선택이 될 수 있는 몇 가지 장점을 제공합니다:
유니버설 렌더링
Nuxt.js는 웹 앱이 사용자 측에 표시되는 방식을 제어합니다. 서버에서 초기 페이지를 렌더링하는 것으로 시작하므로 특히 인터넷 연결 속도가 느린 사용자의 경우 로딩 속도가 매우 빠릅니다.
이렇게 하면 검색 엔진이 웹사이트를 더 빠르게 크롤링하여 SEO를 개선하는 데 도움이 됩니다.
그런 다음 Nuxt.js는 앱 내 페이지 간 이동을 위해 클라이언트 측 렌더링(SPA)으로 원활하게 전환합니다. 이렇게 하면 최신 웹 사이트에서 기대할 수 있는 것처럼 빠르고 반응성이 유지됩니다.
하이드레이션 및 코드 분할을 통한 성능 최적화
Nuxt 3는 선택적 하이드레이션을 지원하므로 앱의 상태 세그먼트가 클라이언트 측에서 하이드레이션되어 첫 페이지 로딩이 빨라지고 사용자 경험이 향상되므로 상태 트리가 크고 파트가 많은 앱에 매우 유용합니다.
Next.js와 마찬가지로 Nuxt는 경로에 따라 파일을 자동으로 더 작은 번들로 분할합니다.
이렇게 하면 브라우저는 서버에서 현재 보기와 관련된 코드만 필요로 하므로 사용자의 페이지 로드 시간이 크게 단축됩니다.
즉, 대역폭 리소스 사용량이 줄어들고 사용자 환경이 개선됩니다.
내장 라우팅
Nuxt.js는 기본적으로 파일 기반 라우팅을 통해 경로를 처리하여 애플리케이션 내에서 탐색 및 경로 관리를 간소화합니다.
또한 보다 복잡한 라우팅 시나리오에 맞게 동적으로 경로를 구성할 수 있습니다.
API 경로
Nuxt.js를 사용하면 간단한 작업을 위해 별도의 서버를 설정할 필요가 없습니다! 여기에는 API 경로라는 단축키가 내장되어 있습니다.
API 경로는 서버 측 렌더링 중에 데이터 가져오기를 처리할 수 있으며 RESTful 및 GraphQL API를 지원합니다. 이렇게 하면 앱의 속도가 빨라지고 검색 엔진이 앱의 콘텐츠를 더 잘 이해할 수 있습니다.
Nuxt.js의 제한 사항
Nuxt.js는 강력한 개발 환경을 제공하지만 고려해야 할 몇 가지 제한 사항이 있습니다:
학습 곡선
Nuxt.js는 기존 Vue.js 개발과는 다른 개념을 도입했습니다. Nuxt.js를 처음 사용하는 경우 특정 아키텍처와 기능에 적응하는 데 시간이 필요합니다.
Nuxt는 또한 방대한 도구, 라이브러리, 플러그인 생태계를 제공합니다. 이러한 옵션에 익숙해지면 초기 학습 곡선이 더 길어질 수 있습니다.
제한된 에코시스템
React나 Angular와 같은 다른 주요 프레임워크와 달리 Nuxt는 비교적 신생 프레임워크입니다. 따라서 타사 라이브러리 및 플러그인 생태계가 계속 성장하고 있습니다.
특정 상황에서 특정 요구 사항을 충족하는 맞춤형 솔루션을 구축해야 합니다.
서버 측 렌더링의 복잡성
서버 측 렌더링(SSR)은 Nuxt.js의 강력한 기능이지만 앱 개발을 더 복잡하게 만들 수 있습니다. 보다 간단한 렌더링 방식에 비해 SSR은 학습 곡선이 더 가파릅니다.
또한 SSR을 효과적으로 구현하려면 데이터 가져오기 및 애플리케이션 상태에 대한 세심한 계획과 관리가 필요합니다.
이로 인해 서버에서 처음 렌더링된 콘텐츠와 클라이언트에서 렌더링된 최종 인터랙티브 버전 간에 잠재적인 오류 또는 불일치가 발생할 수 있습니다.
Back4app에서 Nuxt.js 애플리케이션 빌드 및 배포하기
연락처 관리 애플리케이션을 구축하여 Back4App으로 Nuxt 앱을 빌드하고 배포하는 방법을 더 잘 이해합니다.
이 앱을 통해 사용자는 연락처 정보를 생성, 조회, 삭제할 수 있어 네트워크 연락처부를 체계적으로 관리하고 쉽게 액세스할 수 있습니다.
이 프로젝트의 백엔드에서는 이름, 이메일, 전화번호, 회사 등의 연락처 정보를 저장하기 위해 Back4app에 내장된 PostgreSQL 데이터베이스를 사용할 것입니다.
Back4App의 AI 에이전트를 사용하면 이 과정이 더 쉬워집니다.
프로젝트의 프론트엔드에서는 Nuxt.js를 사용하여 앱의 UI를 생성합니다. 그런 다음 Parse SDK를 사용하여 프론트 엔드와 백엔드를 연결한 후 Back4App 컨테이너를 사용하여 Nuxt 프론트 엔드를 배포합니다.
시작해 보겠습니다.
Nuxt.js 애플리케이션용 백엔드 만들기
Nuxt 앱을 만드는 첫 번째 단계는 백엔드를 준비하는 것입니다.
연락처 애플리케이션의 백엔드 생성을 시작하려면 Back4App 웹사이트로 이동하여 로그인한 다음 “새 앱 만들기“를 클릭하여 새 애플리케이션을 만듭니다.
아래 이미지와 같이 새 애플리케이션을 빌드한 후 표시되는 ‘서비스로서의 백엔드‘ 옵션을 선택합니다.
애플리케이션의 이름을 지정하고 데이터베이스에 사용할 PostgreSQL 옵션을 선택합니다.
“생성” 버튼을 클릭하면 Back4App이 데이터베이스를 포함하여 애플리케이션을 설정하는 데 약간의 시간이 걸립니다.
모든 준비가 완료되면 아래 이미지와 같이 자동으로 애플리케이션으로 이동합니다.
앱에 사용할 PostgreSQL 데이터베이스 디자인을 구성하려면 Back4app의 AI 에이전트로 이동하여 다음 프롬프트를 입력합니다.
Create database tables in my Back4app app; do you need me to provide any information?
데이터베이스를 설정하기 위해 AI 에이전트는 필요한 항목의 목록을 생성합니다. 이 목록에는 애플리케이션의 고유 키와 데이터 구조(스키마) 등의 세부 정보가 포함됩니다.
AI 에이전트에게 앱 키를 제공한 후 데이터베이스 스키마의 모양을 AI 에이전트에 입력합니다. 구축 중인 연락처 애플리케이션의 경우 아래 그림과 비슷해야 합니다:
1. Contact Class:
Class Name: Contact
Fields:
objectId (String, Automatically generated by Back4App).
name (String, Required)
email (String, Required)
phone (String, Required)
address (String, Required)
company (String, Optional)
위의 정보를 상담원에게 전달한 후 데이터베이스를 탐색하여 연락처 클래스 및 관련 필드가 생성되었는지 확인할 수 있습니다.
그런 다음, 아래 프롬프트에 따라 AI 에이전트가 테스트 데이터로 데이터베이스를 채우도록 요청합니다.
Populate my contact database with some test data with around 10 test contacts with variations in their information.
이제 작업할 테스트 데이터가 생겼습니다.
클라우드 코드 만들기
Back4App의 클라우드 코드 기능을 사용하면 Back4App 서버에서 직접 사용자 지정 자바스크립트 코드를 실행할 수 있습니다.
이 기능은 모바일 앱이나 웹사이트의 처리 부하를 줄이는 데 도움이 됩니다. 또한 클라우드 코드가 Back4App의 보안 서버에서 실행되므로 보안 취약성으로부터 데이터와 애플리케이션을 보호하는 데 도움이 됩니다.
이제 연락처로 채워진 테스트 데이터베이스가 완성되었으니 이제 연락처 관리 시스템의 기능을 구현할 차례입니다.
이 섹션에서는 애플리케이션의 특정 기능을 구현하기 위해 클라우드 코드를 만드는 방법을 알아봅니다:
- 모든 연락처 보기
- 새 연락처 만들기
- 연락처 삭제하기
Back4App AI 에이전트로 이러한 기능을 구현할 수 있습니다. 시작해 보겠습니다.
라이브러리에서 모든 책을 가져오려면 Back4App AI 에이전트에 필요한 클라우드 코드를 생성하는 다음 프롬프트를 제공하세요.
Develop a cloud code function named "getContacts" to retrieve all contacts
from the database. The function should return an array containing objects
representing a contact instance with its associated keys and values.
다음으로, 다음 프롬프트를 전달하여 새 연락처를 생성하도록 Back4App AI 에이전트에 작업을 지정합니다:
Generate a cloud code function named “createContact” that takes in the necessary arguments to create a new contact in the Contact class.
마지막으로, 데이터베이스에서 연락처를 삭제하는 기능을 생성하기 위해 다음과 같은 프롬프트를 Back4App AI 에이전트에 제공합니다.
Create a cloud code function "deleteContact" that deletes a contact from the Contact class based on the provided "objectId." If the deletion is successful, return a message indicating success. If there's an error, return an error message.
에이전트가 클라우드 함수를 올바르게 생성했는지 확인하려면 이 탐색 경로의 끝에 있는 main.js 파일을 검토하세요.
Back4app 대시보드 → 클라우드 코드 → 기능 및 웹 호스팅 → 클라우드 → main.js.
클라우드 함수가 올바르게 생성되었는지 확인하려면 동일한 main.js 파일에 정의한 세 가지 함수가 표시되어야 합니다.
애플리케이션의 프론트엔드 구축
우리가 만든 모든 클라우드 코드 기능과 상호작용할 수 있는 프런트엔드를 만들 것입니다. 이 프런트엔드는 Nuxt.js로 만들 것입니다.
프런트엔드 개발을 시작하려면 원하는 디렉터리의 터미널에서 다음 코드를 연속적으로 실행하세요:
npx nuxi init b4a_nuxt_app
cd b4a_nuxt_app
npm install이 코드 줄은 b4a_nuxt_app을 이름으로 하는 Nuxt 애플리케이션을 초기화한 다음 애플리케이션이 올바르게 작동하는 데 필요한 모든 패키지와 종속성을 설치합니다.
터미널에서 위의 명령을 실행한 후 애플리케이션의 스타일을 지정하는 데 도움이 되는 몇 가지 npm 패키지를 설치합니다. 터미널에서 다음 npm 명령을 연속적으로 실행하여 이러한 패키지를 설치합니다:
npm install sass
npm install -D tailwindcss postcss autoprefixer
위의 코드 줄은 CSS 전처리기인 SASS와 유틸리티 CSS 프레임워크인 TailwindCSS를 설치합니다. 이 패키지를 활용하여 애플리케이션의 스타일을 빠르게 지정할 수 있습니다.
다음으로 다음 명령을 실행하여 애플리케이션에서 TailwindCSS를 구성합니다:
npx tailwindcss init
위의 코드는 Nuxt 애플리케이션의 루트 디렉터리에 tailwind.config.js 파일을 생성합니다.
이 tailwind.config.js 파일은 Nuxt.js 내에서 Tailwind CSS 통합을 위한 중앙 구성 지점입니다. 이 파일을 통해 특정 프로젝트 요구 사항에 맞게 Tailwind CSS의 다양한 측면을 사용자 정의할 수 있습니다.
선호하는 텍스트 편집기(VSCode, Eclipse, Sublime Text)에서 애플리케이션을 엽니다. tailwind.config.js 파일로 이동하여 아래 코드 블록처럼 보이도록 구조화합니다:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./app.vue",
"./error.vue",
],
theme: {
extend: {},
},
plugins: [],
};
위 코드 블록의 콘텐츠 배열에는 Tailwind CSS가 유틸리티 클래스를 생성하기 위해 모니터링할 파일 경로가 있습니다.
다음으로 앱의 루트 디렉토리에 에셋 폴더를 만듭니다. 이 폴더에 main.scss 파일을 만들어 애플리케이션에 스타일을 추가합니다. main.scss 파일에 아래 코드를 붙여넣습니다:
/* main.scss */
@import url("<https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap>");
@import url("<https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap>");
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
background-color: #f2f2f2;
}
.montserrat {
font-family: "Montserrat", sans-serif;
}
.roboto {
font-family: "Roboto", sans-serif;
}
위의 코드 블록은 두 개의 서로 다른 Google Fonts 가져오고, 요소 스타일링을 위해 Tailwind CSS를 통합하고, 웹 애플리케이션의 배경색을 밝은 회색으로 설정하고, 가져온 글꼴을 효율적으로 적용하기 위한 사용자 정의 클래스를 정의합니다.
이 main.scss 파일은 웹 애플리케이션의 시각적 스타일을 구축하기 위한 견고한 기반을 제공합니다.
Nuxt 앱의 구성이 들어 있는 nuxt.config.ts 파일에 아래 코드를 붙여넣습니다:
// nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
css: ["~/assets/main.scss"],
ssr: false,
});
Nuxt 구성 파일에서 main.scss 파일을 Nuxt 애플리케이션이 사용할 유일한 CSS 파일로 정의했습니다. 또한 Nuxt 애플리케이션에 대해 서버 측 렌더링을 비활성화했습니다.
Nuxt가 파일 기반 라우팅 시스템을 통해 라우팅을 자동으로 처리하고 애플리케이션 구성이 완료되었으므로 이제 다른 웹 페이지를 만들 수 있습니다.
이 애플리케이션의 사용자 인터페이스를 구축하기 위해 프로젝트 루트의 페이지 폴더에 세 개의 페이지를 만들겠습니다. 이 페이지들은 다음과 같습니다:
index.vue: 애플리케이션의 목적을 소개하는 홈 페이지입니다.contactForm.vue: 이 페이지에서는 사용자가 새 연락처를 만들고 데이터베이스에 저장할 수 있습니다.contactsList.vue: 이 페이지에는 데이터베이스에 저장된 모든 연락처가 나열됩니다.
이제 index.vue 파일에 다음 코드를 붙여넣습니다:
// index.vue
<template>
<div class="welcome montserrat flex flex-col gap-8 items-center mt-10">
<h1 class="text-4xl">Welcome to {{ appName }}!</h1>
<p class="text-[#888888] font-md text-md w-1/2">
This application helps you manage your contacts. You can view existing
contacts, add new ones, and keep your contact information organized.
</p>
<NuxtLink to="/contactForm">
<button
class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
>
Add Contact
</button>
</NuxtLink>
</div>
</template>
<script setup>
const appName = "Contact Book";
</script>
<style scoped>
.welcome {
text-align: center;
padding: 2rem;
}
</style>
이 코드 블록은 연락처 관리 애플리케이션의 시작 페이지를 만듭니다.
제목, 앱의 목적에 대한 설명, 문의 양식 페이지로 이동하는 버튼이 표시됩니다. 코드 블록에는 애플리케이션의 스타일을 지정하기 위한 TailWind 클래스도 정의되어 있습니다.
또한 contactForm.vue 파일에 다음 코드를 붙여넣습니다:
<template>
<div>
<p class="montserrat text-2xl font-medium text-center">
Fill the form below to create a contact
</p>
<form
@submit.prevent="createContact"
class="flex flex-col gap-8 items-center mt-10"
>
<input
v-model="contact.name"
type="text"
placeholder="Name"
required
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<input
v-model="contact.email"
type="email"
placeholder="Email"
required
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<input
v-model="contact.phone"
type="tel"
placeholder="Phone"
required
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<input
v-model="contact.address"
type="text"
placeholder="Address"
required
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<input
v-model="contact.company"
type="text"
placeholder="Company"
class="w-1/2 p-3 hover:shadow-lg outline-none montserrat"
/>
<div>
<button
class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
type="submit"
>
Submit
</button>
</div>
<p v-if="message" :class="{ error: isError }">{{ message }}</p>
</form>
</div>
</template>
<script setup>
import { ref } from "vue";
const contact = ref({
name: "",
email: "",
phone: "",
address: "",
company: "",
});
const message = ref("");
const isError = ref(false);
</script>
<style>
.error {
color: red;
}
</style>
위의 코드 블록은 앱 사용자가 연락처를 만들고 저장하는 데 사용할 수 있는 양식의 구조를 정의합니다. 핵심은 다음과 같습니다:
양식 요소는 다양한 입력 필드를 사용하여 연락처 세부 정보(이름, 이메일, 전화, 주소, 회사)를 캡처합니다.
각 입력 필드는 연락처 개체의 속성(v-model)에 연결되며 유효성 검사를 위해 적절한 입력 유형을 사용합니다.
제출 버튼은 다음 섹션에서 구현할 createContact 함수를 트리거합니다. 메시지 영역에는 메시지 및 isError 변수에 따라 피드백(성공 또는 오류)도 표시됩니다.
코드 블록은 Vue의 참조를 사용하여 3개의 반응형 변수를 생성합니다:
연락처: 입력한 연락처 정보를 저장합니다.메시지를저장합니다: 사용자에게 보내는 피드백 메시지를 저장합니다.isError: 메시지가 오류를 나타내는지 여부를 나타냅니다.
간단한 스타일 규칙은 코드 블록의 .error 클래스를 사용하여 오류 메시지의 모양을 정의합니다.
또한 contactsList.vue 파일에 다음 코드를 붙여넣습니다:
<template>
<div class="px-8">
<p class="montserrat text-3xl font-medium mb-10">Your Contacts</p>
<div class="grid grid-cols-3 gap-5 items-center justify-center">
<div
v-for="contact in contacts"
:key="contact.objectId"
class="contact montserrat bg-[#FFFFFF] hover:shadow-lg mb-4 rounded-lg
flex flex-col gap-3 p-3 w-11/12 items-center"
>
<p class="text-lg">Name: {{ contact.name }}</p>
<p class="text-lg">Email: {{ contact.email }}</p>
<p class="text-lg">Phone: {{ contact.phone }}</p>
<p class="text-lg">Address: {{ contact.address }}</p>
<p class="text-lg">Company: {{ contact.company }}</p>
<div class="mt-5">
<button
@click="deleteContact(contact.objectId)"
class="px-4 py-2 hover:bg-[#333333] hover:text-white rounded-lg font-medium"
>
Delete
</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const contacts = ref([]);
</script>
위의 코드 블록은 애플리케이션의 연락처 목록을 표시합니다. 핵심 사항은 다음과 같습니다:
코드 블록은 “내 연락처”라는 제목의 섹션을 만들고 연락처를 표시하는 데 반응형 그리드 레이아웃(열 3개)을 사용합니다.
v-for를 사용하여 연락처 배열을 반복하여 각 연락처의 정보(이름, 이메일, 전화, 주소, 회사)를 표시합니다.
각 연락처 항목에는 ‘삭제’ 버튼이 있으며, 이 버튼은 나중에 구현할 deleteContact 함수를 트리거합니다.
코드 블록은 반응형 배열(연락처)을 사용하여 연락처 목록을 저장합니다. 이렇게 하면 데이터가 변경될 때 UI가 동적으로 업데이트됩니다. 연락처 배열은 Back4app 데이터베이스에서 가져온 데이터를 저장합니다.
루트 디렉터리의 app.vue 파일에 아래 코드를 붙여넣어 모든 페이지에 대한 경로를 포함하세요.
<template>
<div>
<NuxtLayout>
<header class="flex justify-between p-8 roboto font-light">
<NuxtLink to="/">
<p class="text-2xl">Contact Book</p>
</NuxtLink>
<nav class="flex gap-5 text-md">
<NuxtLink to="/contactsList" class="hover:text-[#888888]"
>Contacts</NuxtLink
>
<NuxtLink to="/contactForm" class="hover:text-[#888888]"
>Add Contact</NuxtLink
>
</nav>
</header>
<main>
<NuxtPage />
</main>
</NuxtLayout>
</div>
</template>
코드 블록은 Nuxt 애플리케이션의 전체 레이아웃을 정의합니다. 컴포넌트로 전체 레이아웃을 정의합니다.
코드 블록에는 가로 탐색 메뉴가 있으며 contactsList.vue 및 contactForm.vue 페이지로 연결되는 링크가 있습니다.
코드 블록에는 또한 컴포넌트도 포함되어 있는데, 이는 현재 페이지의 콘텐츠를 동적으로 렌더링하는 Nuxt.js의 핵심 컴포넌트입니다.
이렇게 하면 앱에서 사용자의 애플리케이션 내 탐색을 기반으로 적절한 콘텐츠를 표시할 수 있습니다.
애플리케이션의 프론트엔드 및 백엔드 비트 연결하기
Nuxt 연락처 애플리케이션을 Back4app 데이터베이스 및 백엔드 인스턴스에 연결하려면 Parse SDK를 설치해야 합니다.
Parse SDK는 프런트엔드 애플리케이션(사용자 인터페이스)과 Back4App 백엔드를 연결하여 Back4App 데이터베이스 및 클라우드 기능과 상호 작용할 수 있도록 합니다.
Parse SDK를 설치하려면 루트 디렉터리의 터미널에서 다음 명령을 실행합니다:
npm install parse설치 후 다음 정보를 가져와서 Parse를 초기화해야 합니다:
- 애플리케이션 ID
- 자바스크립트 키
- Back4app 서버 URL
이 정보는 Back4app 애플리케이션의 대시보드에서 보안 및 키로 이동하여 확인할 수 있습니다. 앱 ID와 자바스크립트 키를 애플리케이션에 안전하게 보관하세요.
이제 app.vue 파일을 수정하여 애플리케이션에서 Parse를 초기화합니다:
<template>
<!-- Previous Content -->
</template>
<script setup>
import Parse from 'parse';
// Initialize Parse SDK
Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = '<https://parseapi.back4app.com>';
</script>
또한 contactForm.vue 및 contactsList.vue 파일을 수정하여 클라우드 코드 함수를 애플리케이션의 프런트 엔드에 연결하세요.
contactForm.vue 페이지에 다음 코드를 붙여넣습니다:
<template>
<!-- Previous Content -->
</template>
<script setup>
import { ref } from 'vue';
import Parse from 'parse';
const contact = ref({
name: '',
email: '',
phone: '',
address: '',
company: '',
});
const message = ref('');
const isError = ref(false);
const createContact = async () => {
try {
await Parse.Cloud.run('createContact', { ...contact.value });
message.value = 'Contact created successfully!';
isError.value = false;
contact.value = { name: '', email: '', phone: '', address: '', company: '' };
} catch (error) {
message.value = `Error: ${error.message}`;
isError.value = true;
}
};
</script>
<style>
.error {
color: red;
}
</style>
위의 코드 블록은 새 연락처를 만드는 로직에 대한 클라우드 코드 함수를 Nuxt 애플리케이션에 연결합니다.
백엔드와 상호 작용하여 연락처 정보를 저장하고 작업의 성공 또는 실패에 따라 사용자에게 피드백을 제공합니다.
코드 블록은 (try-catch 블록을 사용하여) Parse SDK를 사용하여 Back4App 서버에서 createContact라는 함수를 실행하려고 시도합니다(await Parse.Cloud.run('createContact', {...contact.value})). 그러면 연락처 정보(contact.value)가 Back4App 서버로 전송되어 저장됩니다.
저장이 성공하면 “연락처가 성공적으로 생성되었습니다!”라는 메시지가 나타나고 양식이 지워지면서 연락처 개체가 초기화되고 새 항목을 입력할 수 있습니다.
그러나 오류가 발생하면 템플릿 리터럴(${error.message})이 있는 서버의 세부 정보를 포함한 정보성 오류 메시지가 표시됩니다.
contactsList.vue 파일에 다음 코드를 붙여넣습니다:
<template>
<!-- Previous Content -->
</template>
<script setup>
import { ref, onMounted } from "vue";
import Parse from "parse";
const contacts = ref([]);
const fetchContacts = async () => {
try {
contacts.value = await Parse.Cloud.run("getContacts");
} catch (error) {
console.error("Failed to fetch contacts", error);
}
};
const deleteContact = async (objectId) => {
try {
await Parse.Cloud.run("deleteContact", { objectId });
contacts.value = contacts.value.filter(
(contact) => contact.objectId !== objectId,
);
} catch (error) {
console.error("Failed to delete contact", error);
}
};
onMounted(fetchContacts);
</script>
위의 코드는 애플리케이션의 연락처 가져오기 및 삭제를 관리합니다. 이 코드는 Back4App 백엔드와 상호 작용하여 데이터 저장 및 검색을 처리합니다.
코드 블록은 두 가지 필수 기능을 정의합니다:
fetchContacts: 이 비동기 함수는 백엔드에서 연락처 목록을 검색합니다. 이 함수는 Back4App 서버에서 클라우드 코드 함수 “getContacts”를 호출하는Parse.Cloud.run('getContacts')을사용합니다. 검색된 연락처는연락처라는이름의 반응형 배열에 저장됩니다.
삭제 연락처: 이 비동기 함수는 특정 연락처 삭제를 처리합니다. 이 함수는 백엔드 데이터베이스 내 연락처의 고유 식별자인objectId를인수로 받습니다. 이 함수는Parse.Cloud.run('deleteContact', { objectId })을 사용하여 삭제할objectId를전달하여 “deleteContact”라는 이름의 클라우드 코드 함수를 호출합니다. 성공하면 이 코드는 로컬연락처배열을 필터링하여 삭제된 연락처를 제거합니다.
이제 애플리케이션의 프론트 엔드와 백엔드 연결이 완료되었으므로 아래 npm 명령을 실행하여 애플리케이션을 미리 볼 수 있습니다.
npm run devNuxt Nitro 서버가 로딩되는 것을 확인할 수 있습니다. 로딩이 완료되면 URL http://localhost:3000/ 에서 애플리케이션을 사용할 수 있습니다. URL로 이동하면 아래 이미지와 유사한 화면이 표시됩니다.
연락처 페이지로 이동하면 연락처 배열이 표시됩니다. 이러한 연락처는 Back4app 백엔드 생성 시 Back4app AI 에이전트가 생성한 더미 데이터입니다.
연락처 추가 링크를 클릭하면 새 연락처에 대한 세부 정보를 입력할 수 있는 양식이 표시됩니다. 예를 들어
‘제출’ 버튼을 클릭하면 필드를 명확하게 확인할 수 있습니다. 연락처 페이지로 이동하면 새로 만든 연락처를 볼 수 있습니다.
완전히 구축된 웹 애플리케이션 배포
다음은 Nuxt 앱을 배포하는 단계입니다. 애플리케이션 빌드와 테스트가 완료되었으므로 이제 Back4app 컨테이너를 사용하여 Nuxt 애플리케이션을 배포하여 앱을 공개할 수 있습니다.
배포 프로세스를 앞당기려면 Back4App AI 에이전트에 다음 지침을 입력합니다:
Give me simplified steps to deploy my Nuxt application with Back4app containers
아래에 설명된 단계와 비슷한 단계가 표시됩니다.
Containerize Your Application (Create a Dockerfile)
Build and Push Docker Image
Configure Deployment
Deploy Your Container애플리케이션을 도커화하려면 루트 디렉터리에 Docker파일과 .dockerignore 파일을 생성하고 아래에 다음 스크립트를 붙여넣습니다.
도커파일에서:
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
RUN npm run build
CMD [ "npm", "run", "start" ]
또한 .dockerignore 파일에서:
node_modules
.nuxt
도커파일에는 도커 이미지 빌드에 대한 지침이 포함되어 있습니다. Docker파일에는 필요한 앱 종속성에 대한 설치 단계가 포함되어 있습니다.
.dockerignore 파일은 이미지를 빌드할 때 제외할 파일과 폴더를 Docker에 알려주는 패턴을 나열하는 간단한 텍스트 파일입니다.
이제 애플리케이션의 도커 이미지를 빌드하려면 터미널에서 다음 도커 명령을 실행합니다:
docker build -t b4a_contacts_app .
Back4app에 애플리케이션을 배포하기 전에 애플리케이션을 GitHub 계정으로 푸시해야 합니다. 애플리케이션을 푸시한 후에는 GitHub 계정을 Back4app과 통합하세요.
이 작업은 Back4app Github 앱으로 수행할 수 있습니다. GitHub를 Back4app과 통합한 후에는 이제 애플리케이션을 배포할 수 있습니다.
Back4app 대시보드에서 컨테이너 페이지로 이동합니다.
그런 다음 화면에서 ‘새 앱 만들기’ 버튼을 클릭합니다. 그런 다음 배포할 리포지토리를 선택하고 이름을 b4a_contacts_app으로 지정한 다음 애플리케이션을 만듭니다. 배포를 완료하는 데 시간이 다소 걸릴 수 있습니다.
배포 후 라이브 앱은 이 URL( https://b4acontactsapp1-5990olnw.b4a.run/)에서 사용할 수 있습니다.
결론
이 글에서는 Back4app 에코시스템 내에서 PostgreSQL 데이터베이스를 사용하여 Nuxt.js 애플리케이션을 빌드하고 배포하는 방법을 배웠습니다.
또한 Nuxt.js로 웹 애플리케이션을 구축할 때의 장단점에 대해서도 배웠습니다.
Back4App의 AI 에이전트로 클라우드 코드 기능을 구축하고 데이터베이스를 설계하는 것부터 Back4App 백엔드의 로우코드, 사용자 친화적인 인터페이스에 대한 이해까지.
또한 Back4App 컨테이너와 함께 Nuxt 애플리케이션을 배포하고 앱 개발을 간소화하기 위해 Back4App이 제공하는 다양한 도구에 익숙해졌습니다.
이러한 도구의 조합으로 웹 애플리케이션을 빠르게 빌드하고 배포할 수 있습니다.
AI 에이전트의 작동 방식에 대해 자세히 알아보고 앱 개발 간소화에 익숙해지세요.
