PostgreSQL 데이터베이스로 웹 애플리케이션을 빌드하고 배포하는 방법은 무엇인가요?

한국인

How to build and deploy a web application with a PostgreSQL database_

이 문서에서는 AI 기술을 사용하여 Postgres 데이터베이스로 웹 애플리케이션을 빌드하고 배포하는 방법에 대해 알아봅니다.

개발 워크플로에 AI를 추가하면 생산성에 도움이 될 수 있습니다. 반복적인 작업을 자동화하고 코드 생성과 같은 AI 기능을 사용하여 개발 시간을 단축하고 비용을 절감할 수 있습니다.

Contents

1 웹 개발에서 AI 사용의 이점
2 Back4app AI 에이전트 및 PostgreSQL을 사용하여 백엔드 구축하기
3 Back4app AI 에이전트로 프론트엔드 구축하기
4 Back4app 컨테이너에 웹 앱 배포하기
5 결론

웹 개발에서 AI 사용의 이점

웹 개발에 AI를 통합하면 다음과 같은 이점이 있습니다.

반복 작업 자동화

개발 워크플로에 AI를 도입하면 더미 데이터 및 상용구 코드 생성과 같은 반복적인 작업을 자동화하는 데 도움이 됩니다.

또한 단위 테스트 및 통합 테스트를 생성하는 데 도움이 될 수 있습니다.

그러나 AI는 많은 작업을 자동화할 수 있지만 완벽한 솔루션이 아니며 여전히 사람의 감독이 필요하다는 점에 유의해야 합니다.

항상 AI 도구의 결과물을 검토하고 검증하여 정확한지 확인하세요.

코드 생성

AI 도구는 코드 스니펫 또는 전체 함수를 작성하는 데 도움을 줄 수 있습니다. 이러한 자동화를 통해 코딩 프로세스의 속도를 높여 더 높은 수준의 설계와 문제 해결에 집중할 수 있습니다.

그러나 AI가 생성한 코드는 오해의 소지가 있을 수 있고 소프트웨어 개발 수명 주기 후반에 발견하기 어려운 버그로 이어질 수 있으므로 코드를 프로덕션에 푸시하기 전에 반드시 검증을 거쳐야 합니다.

코드 최적화 개선

AI 도구는 코드의 일부를 재작성하거나 리팩터링하여 보다 효율적이고 유지 관리하기 쉬운 솔루션을 생성할 수 있는 방법을 제안하여 코드를 최적화하는 데 도움을 줄 수 있습니다.

여기에는 복잡한 로직을 단순화하거나, 중복 코드를 제거하거나, 언어 기능을 더 잘 사용하는 것이 포함될 수 있습니다.

또한 AI 도구는 보다 효율적인 알고리즘과 데이터 구조를 선택하여 코드의 전반적인 성능과 데이터 작업의 효율성을 개선하는 데 도움을 줄 수 있습니다.

버그 감지 및 수정

AI 도구는 오류를 분석하고 오류에 대한 실행 가능한 솔루션을 제공하여 코드를 더 빠르게 디버깅할 수 있도록 도와줍니다.

예를 들어 Back4app 컨테이너를 사용하여 애플리케이션을 배포할 때 Back4app AI는 Docker파일의 실수로 인해 발생한 오류를 분석하여 오류를 해결하고 애플리케이션을 성공적으로 배포하는 데 도움이 되는 제안을 제공합니다.

Back4app AI 에이전트 및 PostgreSQL을 사용하여 백엔드 구축하기

이 튜토리얼에서는 라이브러리 API를 빌드합니다. 다음 표를 사용하여 PostgreSQL 데이터베이스와 상호 작용합니다: 도서, 저자, 도서 체크아웃 및 라이브러리 멤버.

데이터베이스 구조 및 설계

도서 테이블에는 제목, 저자, 출판 연도, 총 부수, 사용 가능한 부수 등 도서에 대한 대부분의 정보가 포함되어 있습니다.

저자 테이블은 도서 테이블과 일대다 관계를 갖습니다. 즉, 한 명의 저자는 여러 권의 책을 가질 수 있지만 각 책에는 한 명의 저자만 가질 수 있습니다. 또한 저자의 전체 이름과 같은 저자에 대한 세부 정보도 포함됩니다.

라이브러리 멤버 테이블에는 이름, 이메일, 전화 번호와 같은 라이브러리 멤버에 대한 정보가 포함되어 있습니다.

BookCheckout 테이블은 Book 테이블과 LibraryMember 테이블 간에 다대다 관계를 설정하는 정션 테이블 역할을 합니다.

즉, 한 회원이 여러 권의 책을 빌릴 수 있고 여러 회원이 한 권의 책을 빌릴 수 있습니다. 책과 책을 빌린 회원을 체크아웃_날짜, 기한, 반납 날짜와 함께 참조합니다.

다음은 데이터베이스에 대한 데이터베이스 모델 다이어그램입니다.

Back4app에서 데이터베이스 만들기

back4app.com으로 이동하여 로그인한 다음(계정이 없는 경우 계정 만들기) 화면 오른쪽 상단의 ‘새 앱’ 버튼을 클릭합니다.

아래 이미지와 같이 서비스형 백엔드 옵션을 선택합니다.

아래 이미지와 같이 앱의 이름을 지정하고 PostgreSQL 옵션을 선택합니다.

Back4app AI 에이전트로 이동하여 아래 프롬프트를 입력합니다:

"I need you to create database tables in my Back4app app; what do you need me to provide?"

이 AI 에이전트는 데이터베이스 테이블을 생성하는 데 필요한 목록을 반환합니다. 여기에는 애플리케이션 키와 스키마 정의가 포함되어야 합니다.

이전 섹션의 데이터베이스 설계를 기반으로 스키마 정의는 아래 코드 블록과 유사해야 합니다:

1. **Authors Class:**
    - Class Name: `Authors`
    - Fields:
        - `authorId` (Auto-generated, Primary Key)
        - `authorName` (String, Required)
2. **Books Class:**
    - Class Name: `Books`
    - Fields:
        - `bookId` (Auto-generated, Primary Key)
        - `title` (String, Required)
        - `author` (Pointer to the `Authors` class)
        - `publicationYear` (Number)
        - `availableCopies` (Number)
        - `totalCopies` (Number)
3. **LibraryMembers Class:**
    - Class Name: `LibraryMembers`
    - Fields:
        - `memberId` (Auto-generated, Primary Key)
        - `name` (String, Required)
        - `email` (String, Required)
        - `phoneNumber` (String)
4. **BookCheckouts Class:**
    - Class Name: `BookCheckouts`
    - Fields:
        - `checkoutId` (Auto-generated, Primary Key)
        - `book` (Pointer to the `Books` class)
        - `member` (Pointer to the `LibraryMembers` class)
        - `checkoutDate` (Date)
        - `dueDate` (Date)
        - `returnDate` (Date)

위의 코드 블록은 데이터 유형과 관계를 올바르게 설명하여 AI가 데이터베이스를 정확하게 생성할 수 있도록 데이터베이스 스키마를 설명하는 방식입니다.

AI 에이전트에게 세부 정보를 제공하고 에이전트가 데이터베이스를 성공적으로 생성했음을 확인하면 애플리케이션 대시보드에서 데이터베이스가 생성되었는지 확인할 수 있습니다.

그런 다음 아래 프롬프트를 사용하여 AI 에이전트에게 테스트 데이터로 데이터베이스를 채우도록 요청합니다.

Populate my database with test data for the Authors, their books, 
and some library members who have checked out books from the library.

이제 데이터베이스에 작업할 테스트 데이터가 생겼습니다.

dummy-data - Your Application's Backend, Simplified

클라우드 코드 만들기

이제 작업할 테스트 데이터가 생겼으므로 라이브러리 관리 시스템의 기능을 구현해야 합니다.

이 튜토리얼에서는 앱에 다음과 같은 기능이 제공됩니다.

도서관에 있는 모든 책을 가져옵니다.
라이브러리에서 특정 책을 봅니다.
특정 저자의 모든 책을 볼 수 있습니다.
도서관에서 책을 빌리세요.
빌린 책을 도서관에 반납합니다.

이 기능은 Back4app의 클라우드 코드 함수를 사용하여 구현할 수 있으며, 이를 통해 애플리케이션이 HTTP 요청에 의해 트리거된 이벤트에 대한 응답으로 Back4app에서 JavaScript 함수를 실행할 수 있습니다.

Back4app AI 에이전트를 사용하여 사용자 지정 클라우드 코드 함수를 생성하여 개발 프로세스를 간소화할 수 있습니다.

Back4app AI 에이전트에게 아래 프롬프트를 입력하여 라이브러리의 모든 책을 가져오기 위한 클라우드 코드를 생성하세요.

Create a cloud code function called `getAllBooks` 
that will return all the books in the database with their respective authors.

그런 다음 Back4app AI 에이전트에게 아래 프롬프트에 ID에서 책을 가져오기 위한 클라우드 코드를 생성하도록 지시합니다.

Create a cloud code function called `viewBook(bookId)`
that allows me to provide a book ID and return a book with the matching ID.

그런 다음, 특정 저자의 모든 책을 가져오기 위한 클라우드 코드를 생성하도록 Back4app AI 에이전트에게 아래 프롬프트를 입력합니다.

Create a cloud code function called `getByAuthor(authorName)` that allows me to provide an author name and return all the books by the author.

그런 다음 Back4app AI 에이전트에게 아래 프롬프트를 입력하여 도서관에서 책을 빌리기 위한 클라우드 코드를 생성합니다.

Create a cloud code function called `borrowBookFromLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID  and records a book checkout for the member with the due date and return date set to a month from the current date. 

The function should also check if the book is available (ie `availableCopies` != 0). The book should display a proper error message if it is unavailable.

마지막으로 Back4app AI 에이전트에게 아래 프롬프트를 입력하여 도서관에 책을 반납하기 위한 클라우드 코드를 생성합니다.

Create a cloud code function called `returnBookToLibrary(libraryMemberId, bookId)` that allows me to provide a Library member ID and a Book ID. 

The function should fetch the BookCheckout record  with the libraryMemberId and bookId provided and update  the return date of the BookCheckout record to the current date. 

The function should also increment the book's `availableCopies` by 1.

Back4app 대시보드 → 클라우드 코드 → 함수 및 웹 호스팅 → 클라우드 → main.js에서 AI 에이전트가 클라우드 함수를 올바르게 생성했는지 확인할 수 있습니다.

이제 몇 가지 프롬프트를 통해 기능적인 백엔드를 만들었습니다. 다음으로 백엔드와 상호 작용할 수 있는 UI를 구축합니다.

Back4app AI 에이전트로 프론트엔드 구축하기

이 섹션에서는 React를 사용하여 웹 애플리케이션의 UI를 빌드합니다.

먼저 AI 에이전트에게 애플리케이션의 UI를 만드는 데 필요한 단계에 대한 개략적인 개요를 아래 프롬프트에 입력합니다.

Describe the steps required to build a React Frontend for my backend. I want the app to have the following routes
1. `/books` to display all the books in the library
2. `/books/:bookId` to view a specific book
3. `/books/authors/:authorName` to view all books by a specific author
4. `/books/:bookId/borrow` allows a member to borrow a book
5. `/books/:bookId/return-to-library` allows a member to return a book to the library
I also want the app to be created using vite

상담원은 아래 단계와 다를 수 있지만 궁극적으로 동일한 결과를 얻을 수 있는 몇 가지 단계로 응답해야 합니다. AI가 설명한 단계가 명확하지 않은 경우 다른 프롬프트에서 AI에게 명확히 설명해 달라고 요청할 수 있습니다.

1단계: 새 Vite 프로젝트 초기화 및 종속성 설치

터미널에서 아래 명령을 실행하여 Vite로 새 React 앱을 스캐폴딩하세요:

npm create vite@latest library-app -- --template react

프로젝트 디렉터리로 이동하여 아래 명령을 실행하여 설치 종속성을 실행합니다:

cd library-app && npm install

아래 명령을 실행하여 라우팅을 위한 React 라우터와 Back4app과 상호 작용하기 위한 Parse SDK를 설치하세요:

npm install react-router-dom parse

2단계: JavaScript Parse SDK 초기화하기

아래 코드 블록을 main.jsx 파일에 추가하여 애플리케이션에서 Parse를 초기화하세요.

import Parse from "parse";

const PARSE_APPLICATION_ID = "YOUR_APPLICATION_ID";
const PARSE_HOST_URL = "<https://parseapi.back4app.com/>";
const PARSE_JAVASCRIPT_KEY = "YOUR_JAVASCRIPT_KEY";

Parse.initialize(PARSE_APPLICATION_ID, PARSE_JAVASCRIPT_KEY);
Parse.serverURL = PARSE_HOST_URL;

Back4app 대시보드 → 앱 설정 → 보안 및 키에서 찾을 수 있는 “YOUR_APPLICATION_ID” 및 “YOUR_JAVASCRIPT_KEY”를 실제 값으로 바꾸는 것을 잊지 마세요.

3단계: 라우팅 설정

App.jsx 파일의 코드를 아래 코드 블록으로 바꿉니다:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Books from './components/Books';
import BookDetails from './components/BookDetails';
import BooksByAuthor from './components/BooksByAuthor';
import BorrowBook from './components/BorrowBook';
import ReturnBook from './components/ReturnBook';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/books" element={<Books />} />
        <Route path="/books/:bookId" element={<BookDetails />} />
        <Route path="/books/authors/:authorName" element={<BooksByAuthor />} />
        <Route path="/books/:bookId/borrow" element={<BorrowBook />} />
        <Route path="/books/:bookId/return-to-library" element={<ReturnBook />} />
      </Routes>
    </Router>
  );
};

export default App;

4단계: 컴포넌트 빌드 및 스타일 지정

AI 에이전트에 따르면 앱에는 5가지 구성 요소가 있어야 합니다:

책 구성 요소
BooksDetails 컴포넌트
BooksByAuthor 컴포넌트
BorrowBook 구성 요소
리턴북 구성 요소

먼저 프로젝트 디렉토리에 “components” 폴더를 만들고 컴포넌트에 대한 각 파일을 만듭니다. 그런 다음 “components” 폴더에 CSS 폴더를 만들고 각 컴포넌트에 대한 CSS 파일을 만듭니다.

컴포넌트 폴더는 아래 이미지와 같아야 합니다:

다음으로, 아래 프롬프트를 AI에 제공하여 책 컴포넌트를 만들고 스타일을 지정합니다:

Create the component for the `books` route. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked. 

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header like "Books".

AI는 Books.css 파일용 스타일시트와 Books.jsx용 jsx 코드 스니펫으로 응답해야 합니다.

각 파일에 코드 블록을 추가하고 Books.css를 main.jsx 파일로 가져옵니다.

이렇게요:

//main.jsx
import "./components/css/Books.css";

참고: 사용자 정의 스타일이 사용자 정의 스타일보다 우선하지 않도록 하려면index.css 파일을 비활성화하세요.

아래 프롬프트를 AI에 입력하여 BookDetails 컴포넌트를 만들고 스타일을 지정하세요.

Create a component for the `books/:bookId` route. The component should have a button that takes you to the `books/:bookId/borrow` route to allow the user to borrow the book. 

The component should also have a button that takes you to the `books/:bookId/return-to-library` route that allows a user to return a book.  

The component should also include a link to the author names of the book that takes the user to the `/books/authors/:authorName` route, allowing them to view books from other authors. 

Be sure to add proper class names for styling and ensure that you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).

AI는 BookDetails.css 파일에 대한 스타일시트와 BookDetails.jsx에 대한 jsx 코드 스니펫으로 응답해야 합니다. 각각의 파일에 코드 블록을 추가합니다.

AI에게 아래 프롬프트를 입력하여 BooksByAuthor 컴포넌트를 생성하세요:

Create a component for the `books/authors/:authorName` route. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects).  

When the book card is clicked, I want to go to the route /books/:bookId ⁠ using the bookId ⁠ of the bookcard I clicked.

For the styling, the books should be displayed in a grid at the center of the webpage, taking the full width of the browser. 

The component should also have a proper header, such as `AuthorName's Books` for example "Jane Austen's Books".

생성된 코드를 적절한 파일에 추가합니다.

AI에게 아래 프롬프트를 입력하여 BorrowBook 컴포넌트를 생성하세요:

Create a component for the `/books/:bookId/borrow`. 

The component should display a form that allows users to enter their `libraryMemberId` and borrow the book. 

Be sure to add proper class names for styling and ensure you are accessing the correct properties returned by the Parse server (Plain JavaScript Objects). 

For the styling, the elements should be properly spaced and have a proper header like "Borrow <NAME_OF_BOOK>". 
The form should be at the center of the webpage, taking the full width of the browser. 

The component should also display the number of remaining books.

생성된 코드를 적절한 파일에 추가합니다.

인공지능에게 아래 프롬프트를 입력하여 ReturnBook 컴포넌트를 생성하세요:

Create a component for the `/books/:bookId/return-to-library`.

The component should display a form that allows users to enter their `libraryMemberId` and `bookId` of the book they want to return. 

For the styling, the elements should be properly spaced and have a proper header like "Return Book". 

The form should be at the center of the webpage, taking the full width of the browser.

생성된 코드를 적절한 파일에 추가합니다.

Back4app 컨테이너에 웹 앱 배포하기

이제 애플리케이션 빌드를 마쳤으므로 공개적으로 사용할 수 있도록 배포해야 합니다. 이 튜토리얼에서는 Back4app 컨테이너를 사용하여 앱을 배포합니다.

AI 상담원에게 아래 프롬프트를 입력합니다:

What steps do I need to follow to deploy my app on Back4app containers?

AI는 다음과 유사한 단계로 응답해야 합니다:

Dockerfile 만들기
코드를 공개 리포지토리에 푸시하기
공용 리포지토리를 Back4app에 연결하기
배포

AI 상담원에게 프롬프트를 입력합니다:

Generate a dockerfile for my application

애플리케이션의 루트 디렉토리에 Dockerfile 파일을 생성하고 생성된 코드를 추가합니다.

그런 다음 코드를 공개 리포지토리에 푸시하고 아래 프롬프트를 AI 에이전트에게 전달합니다:

Connect to my "YOUR_REPOSITORY_URL" repository on GitHub and deploy it to Back4app Containers.

위의 프롬프트가 작동하려면 Back4app의 GitHub 앱이 GitHub 계정과 적절하게 통합되어 있어야 합니다. 또는 Back4app 컨테이너를 사용하여 React 앱을 수동으로 배포할 수 있습니다.

결론

Back4app AI 에이전트는 데이터베이스 테이블 생성부터 클라우드 코드 함수 생성, React 프론트엔드 UI 구축, 애플리케이션 배포까지 전체 개발 라이프사이클을 간소화합니다.

이 접근 방식을 사용하면 최소한의 수작업으로 앱의 백엔드와 프론트엔드를 모두 개발할 수 있습니다.

그러나 AI 도구의 결과를 검토하여 정확성을 보장하고 잠재적인 문제를 해결하는 것이 중요합니다.

PostgreSQL 데이터베이스로 웹 애플리케이션을 빌드하고 배포하는 방법은 무엇인가요?

웹 개발에서 AI 사용의 이점

반복 작업 자동화

코드 생성

코드 최적화 개선

버그 감지 및 수정

Back4app AI 에이전트 및 PostgreSQL을 사용하여 백엔드 구축하기

데이터베이스 구조 및 설계

Back4app에서 데이터베이스 만들기

클라우드 코드 만들기

Back4app AI 에이전트로 프론트엔드 구축하기

1단계: 새 Vite 프로젝트 초기화 및 종속성 설치

2단계: JavaScript Parse SDK 초기화하기

3단계: 라우팅 설정

4단계: 컴포넌트 빌드 및 스타일 지정

Back4app 컨테이너에 웹 앱 배포하기

결론

Leave a reply 응답 취소