Vue.js와 Firebase: 백엔드를 작성하지 않고 애플리케이션을 개발하는 방법

Vue.js와 Firebase: 백엔드를 작성하지 않고 애플리케이션을 개발하는 방법

 

백엔드 로직을 작성하지 않고 데이터베이스를 구성하지 않고 애플리케이션을 만들고 싶으십니까? 네, 할 수 있습니다.

Google은 모바일 및 웹 애플리케이션을 만들기 위한 Firebase라는 플랫폼을 개발했습니다. Firebase는 분석 추적, 앱 충돌 보고 및 수정, 마케팅 및 제품 실험 생성을 위한 도구를 제공합니다. 서버나 클라우드 인스턴스를 설정하지 않고도 Firebase를 통해 애플리케이션을 라이브로 배포할 수도 있습니다.

Firebase란 무엇인가요?

Firebase Real-time Database is a NoSQL cloud database that is used to store and sync the data. The data from the database can be synced at a time across all the clients such as android, web as well as IOS. The data in the database is stored in the JSON format, and it updates in real-time with every connected client.
Reference: https://firebase.google.com/

이 기사의 목적은 백엔드 코드를 한 줄도 작성하지 않고 데이터베이스를 구성하지 않고 모든 기술의 프론트엔드 애플리케이션을 Firebase와 연결하는 방법을 보여주는 것입니다. 백엔드 코드 없이 작동하고 데이터를 저장한다는 의미는 아닙니다. Firebase가 귀하를 대신하여 모든 것을 처리합니다. 이러한 플랫폼을 제공하는 Firebase 덕분에 모든 백엔드 문제를 자동으로 관리합니다. 데이터베이스를 생성하면 클라이언트에 대한 HTTP API 끝점이 자동으로 생성되고 개발자에게 단일 참조 URL이 제공됩니다. 이를 통해 데이터를 가져와 Firebase 데이터베이스에 삽입할 수 있습니다.

응용 프로그램 개발을 시작하겠습니다.

1. Firebase로 이동: https://firebase.google.com/
2. '를 클릭시작하다' 또는 '콘솔로 이동'.
3. '를 클릭프로젝트 추가'를 입력하고 프로젝트 이름을 입력합니다.
   나는 사용했다 demo-app 프로젝트 이름.
4. 그런 다음 다음/계속새 프로젝트가 생성됩니다.
5. 프로젝트를 성공적으로 생성한 후 '실시간 데이터베이스' 그림-1과 같이 대시보드 왼쪽에서

그림-1: 대시보드의 왼쪽 패널

6. '데이터베이스 생성'는 그림-2와 같이 대시보드에 표시됩니다.

그림-2: 실시간 데이터베이스 생성

7. 마법사가 열리고 '데이터베이스 위치' 데이터를 저장할 위치에서. 제 경우에는 '벨기에' 원하는 대로 선택할 수 있습니다. 다음으로 '보안 규칙'. '를 선택하세요.테스트 모드에서 시작' 라디오 옵션에서.

8. '를 클릭합니다.할 수 있게 하다' 버튼을 누르면 그림-3과 같이 실시간 데이터베이스가 생성됩니다. 여기에 내 URL을 숨깁니다. 'null'은 빈 데이터베이스가 있음을 나타냅니다.

그림-3: 데이터베이스의 데이터 개요

9. '참조 URL' 데이터베이스에 데이터를 GET 및 POST하기 위해 나중에 응용 프로그램에서 사용할 것입니다.

프런트 엔드의 모든 기술을 원하는 대로 선택할 수 있습니다. React, Vue, Angular 또는 Vanilla JavaScript. 그것은 모두를 위해 작동합니다. 편의를 위해 Vue.js 전문 지식이 있으므로 Vue.js를 선택합니다.

전제 조건

시스템에 node.js가 설치되어 있어야 합니다. 그렇지 않으면 운영 체제에 따라 공식 사이트에서 설치 프로그램을 다운로드하십시오.
노드JS

뷰 프로젝트 생성

1. 터미널을 열고 다음 명령을 실행합니다.

$ npm install -g @vue/cli

2. 다음 명령을 실행하여 Vue 애플리케이션을 생성합니다.

$ vue create demo-app

3. 위의 명령은 다음과 같은 프로젝트 폴더를 생성합니다. demo-app. 다음으로 이동 demo-app 디렉토리 변경 명령으로 디렉토리:

$ cd demo-app

4. 이제 애플리케이션을 실행합니다.

npm run serve

5. 브라우저를 열고 `http://localhost:8080/`으로 이동합니다.

그림-4와 같이 vue.js 시작 페이지가 표시됩니다. Vue 애플리케이션이 제대로 작동하고 있음을 의미합니다.

그림-4: Vue 애플리케이션 시작 페이지

이제 VS Code에서 프로젝트 폴더를 열고 내용을 변경하십시오. HelloWorld.vue 디렉토리 아래에 아래 코드가 있는 파일 src/components.

샘플 코드: src/components/HelloWorld.vue

코드 설명

코드를 조각으로 설명하겠습니다.

1. 템플릿 태그 내에서 div 태그는 사용자 인터페이스의 HTML 요소(입력, 레이블, 목록)에 사용되어 사용자 입력 및 출력을 표시합니다.
2. 스크립트 태그 내부의 데이터 속성은 사용자 데이터를 처리하는 데 필요한 데이터 속성을 나타냅니다. fname — 사용자의 이름을 문자열로 나타내며, fname v-model을 사용하여 입력 필드.
   lname 사용자의 성을 문자열로 나타내며, lname v-model을 사용하여 입력 필드. users UI에서 저장된 데이터베이스에 표시된 사용자의 목록/배열을 나타내는 데 사용됩니다.
3. method 속성은 내부에서 사용되는 모든 메서드를 보유합니다. HelloWorld.vue 페이지. 위의 코드에는 두 가지 메서드가 있습니다. click_post() 그리고 click_get() Firebase의 실시간 데이터베이스에서 사용자 데이터를 삽입/게시하고 가져오거나 가져오는 데 사용됩니다.
   click_post() 메소드는 v-on 지시문을 사용하여 제출 후 버튼과 바인딩되며 사용자의 데이터를 삽입하는 데 사용됩니다(firstname 그리고 lastname) 데이터베이스에 입력합니다. 함수 정의는 내장된 fetch 함수를 사용하여 API를 호출합니다. 메소드 및 헤더 필드는 표준이며 본문에는 사용자의 이름과 성을 포함하는 JSON 콘텐츠가 있습니다.
   click_get() 방법은 get to submit 버튼은 v-on 지시문을 사용하여 Firebase 실시간 데이터베이스에서 사용자 목록을 가져오는 데 사용됩니다. 이 함수는 또한 내장된 fetch 함수를 사용하여 API의 끝점을 호출합니다. 응답에는 구문 분석 및 저장될 수 있는 JSON 개체가 포함되어 있습니다. users 데이터 속성.
4. 정렬되지 않은 목록 템플릿 내부의 태그는 'users' 데이터 속성을 반복하고 모든 사용자를 목록 항목으로 표시합니다.
5.  
6. .

5. 가져오기 기능 내부의 URL을 다음으로 바꿉니다. reference URL 두 가지 방법 모두에서 Firebase 실시간 데이터베이스의 click_post() 그리고 click_get(). URL 뒤에 /test.json. 'test'는 사용자의 레코드가 JSON 형식으로 저장되는 데이터베이스 테이블 이름입니다.

이제 브라우저 ''에서 애플리케이션을 열면 다음과 같은 사용자 인터페이스가 열립니다.

샘플 사용자 인터페이스

애플리케이션 실행

사용자의 이름과 성을 입력하고 클릭하십시오. INSERT 버튼을 누르면 Firebase 데이터베이스에 JSON으로 레코드가 삽입됩니다.

Firebase 실시간 데이터베이스에 JSON 형식으로 저장된 레코드

이제 SHOW 버튼을 누르면 Firebase 데이터베이스에 저장된 모든 사용자가 표시됩니다.

Firebase 데이터베이스에 저장된 사용자 목록 표시

그게 다야. 읽어 주셔서 감사합니다.