[클론 코딩] Nuxt3 웹 사이트 만들기(Firestore API 연동하기) - 4편

2023. 7. 8. 03:46초기 과업/FrontEnd

작성자알 수 없는 사용자

728x90
반응형

안녕하세요. 기깔나는 사람들에서 프론트엔드를 맡고있는 해리입니다.

이번편에서는 미소의 예약하기 서비스를 구현합니다. Nuxt3 의 Nitro 서버를 이용한 API 생성 및 Firestore 를 사용하여 견적서 생성까지 다뤄보려고합니다!

 

▶️ firebase 프로젝트 생성 및 firestore 연동은 아래의 링크를 통해 확인하실 수 있습니다.

firebase hosting을 이용한 웹 사이트 배포 및 firestore 사용하기

 

Vue3 + Firebase로 Kanban 보드 만들기 (feat. Nuxt.js) - 2편

안녕하세요! 기깔나는 사람들에서 프론트엔드를 맡고 있는 해리입니다! 이번 편에서는 firebase hosting을 이용한 웹 사이트 배포 및 firestore 사용하기까지 적어보겠습니다. Vue3 + Firebase로 Kanban 보드

giggal-people.tistory.com

 

 

[클론 코딩] Nuxt3 웹 사이트 만들기(프로젝트 생성 및 초기 구성) - 1편

[클론 코딩] Nuxt3 웹 사이트 만들기(Quasar를 이용한 UI 구현) - 2편

[클론 코딩] Nuxt3 웹 사이트 만들기(NuxtLink를 이용한 페이지간 이동 및 Quasar UI 구현) - 3편


 

API 경로 생성

Nuxt3 에서는 h3 라우트 핸들러를 사용하여 API를 생성합니다.

아래와 같이 /server/api  폴더에생성하고자 하는 url에 맞게 폴더와 파일을 생성하면 내부적으로 API가 생성됩니다.

 

마지막으로 해당 디렉터리 기반으로 들어오는 모든 경로를 처리하기 위해 defineEventHandler 를 정의하여 내보내야합니다. event 매개변수에는 들어오는 요청에 대한 모든 필수 세부 정보가 포함되어있습니다.

export default defineEventHandler((event: H3Event) => {
  console.log(event.node.req.method);
  if (event.node.req.method === "GET") {
    const query = getQuery(event);
    console.log(query);

    return { success: true };
  }
});

 

아래와 같이 JSON 데이터가 정상적으로 표시됩니다!

localhost:3000

 

쿼리스트링 로그는 서버에서 정상적으로 가져오는 것을 확인하실 수 있습니다.

 


Firestore 이용한 견적서 저장

 

Firestore에 견적서를 저장할 데이터 경로를 생성해줍니다.

estimate/{문서ID}/smallmoving(소형이사)

estimate/{문서ID}/moving(이사)

estimate/{문서ID}/deepclean(이사청소)

estimate/{문서ID}/internet(인터넷가입)

 

 

Interface 정의

 

firestore은 NoSQL 이기 때문에 스키마를 사용하지 않고 같은 컬렉션에 포함된 여러 문서가 서로 다른 필드를 포함하고 있을 수 있다는 특징이있습니다.

그렇기때문에 프론트에서 각각의 견적서에 필요한 데이터를 인터페이스를 정의하여 소형이사/이사/이사청소/인터넷가입 별로 동일한 데이터 필드를 가질 수 있도록 해주려고합니다.

 

아래는 smallmoving 에서 갖는 견적서 인터페이스입니다.

// 소형이사 견적서 폼
export interface SmallMovingForm {
  // 이사 종류
  type: string;
  // 이사 날짜
  date: string;
  // 이사 시간
  time: string;
  // 도로명 주소
  rdnmAdres: string;
  // 지번 주소
  nmbrAdres: string;
  // 상세 주소
  dtlAdres: string;
  // 짐 옮기는 유형
  moveType: string;
  // 거주지 층수(지상/지하)
  residenceFloor: string;
  // 거주지 층
  numberFloorsResidence: string;
  // 목적지 도로명 주소
  dstntRdnmAdres: string;
  // 목적지 지번 주소
  dstntNmbrAdres: string;
  // 목적지 상세 주소
  dstntDtlAdres: string;
  // 목적지 짐 옮기는 유형
  dstntMoveType: string;
  // 목적지 층수(지상/지하)
  dstntResidenceFloor: string;
  // 목적지 층
  dstntNumberFloorsResidence: string;
  // 트럭 필요 대 수
  truckCount: string;
  // 함께 작업 여부
  isTogetherWork: string;
  // 추가 전달 내용
  cn: string;
}

 

견적서 저장

firestore의 addDoc 메소드를 사용하여 데이터를 저장합니다.

addDoc(database, "collection path");

 

견적서 저장 API 작성

import { H3Event } from "h3";
import { addDoc, collection } from "firebase/firestore";

import { db } from "~/server/utils/firebase";
import { SmallMovingForm } from "~/types/smallmoving";

// 견적서 등록 API
export default defineEventHandler(async (event: H3Event) => {
  if (event.node.req.method === "POST") {
    // request body 처리
    const params: SmallMovingForm = await readBody(event);
    // Timestamp
    const createDt = new Date();

    try {
      const collectionRef = collection(
        db,
        "estimate/5MHstggoLNBA95jGhK1j/smallmoving"
      );
      await addDoc(collectionRef, { ...params, createDt });

      return { success: true };
    } catch (e) {
      console.log(e);
      return { success: false };
    }
  }
});

 

클라이언트에서도 견적서 저장을 위해 fetch를 사용하여 견적서 API를 호출해줍니다. 이제 실제로 견적서를 작성하여 저장해봅시다.

// 견적서 저장
const save = () => {
      fetch("http://localhost:3000/api/report/create", {
        method: "POST",
        body: JSON.stringify(form.value),
      });
};

 

견적서를 작성 후 저장하면 아래와 같이 firestore에 데이터가 쌓이는 것을 확인하실 수 있습니다!

 

 

 


이번편에서는 Nuxt3 Server API 와 Firestore를 이용해 견적서를 생성하는 부분을 다뤄봤습니다. 다음편에서는 관리자 사이트에서 생성된 견적서를 조회하여 계약서를 생성하는 부분을 다뤄보려고합니다.

끝까지 읽어주셔서 감사합니다! 😉

 

 

 

 

728x90
반응형