HTML + VUE.JS + FireBase > 소프트웨어

1. NPM 설치

1) npm init vue@latest

TypeScript는 JavaScript의 상위 집합으로, 정적 타입을 지원하는 프로그래밍 언어입니다. 즉, JavaScript에 타입 시스템을 추가한 언어라고 할 수 있습니다. TypeScript 코드는 나중에 JavaScript로 컴파일되며, 모든 최신 브라우저나 JavaScript 환경에서 실행됩니다.

JSX(JavaScript XML)는 JavaScript 문법의 확장으로, JavaScript 코드 안에 HTML과 비슷한 구문을 작성할 수 있게 해줍니다. 원래는 React.js에서 도입된 개념이지만, Vue.js에서도 지원될 수 있습니다

Vue Router는 Vue.js 애플리케이션에서 페이지 간 이동을 처리하는 도구입니다. SPA에서 여러 페이지를 마치 전통적인 여러 HTML 파일처럼 다룰 수 있도록 해줍니다. 그러나 실제로는 전체 애플리케이션이 하나의 페이지에서 실행되고, 페이지 간 이동은 클라이언트 측에서 동적으로 처리됩니다. 

Add Pinia for state management? 는 프로젝트에서 Pinia를 사용할지 묻는 질문입니다. Pinia는 Vue.js 애플리케이션에서 상태 관리를 위한 공식 라이브러리로, Vuex의 후속 라이브러리로 개발되었습니다. Pinia는 Vue 3와 함께 사용되며, Vuex보다 가볍고 더 간결한 API를 제공합니다. 

유닛 테스트는 애플리케이션의 개별적인 작은 단위(보통 함수나 컴포넌트)를 독립적으로 테스트하는 방법입니다. 유닛 테스트를 통해 코드가 의도한 대로 작동하는지 자동으로 검증할 수 있습니다. 

npx vitest

function add(a, b) {

  return a + b;

}

2) npm install 

3) npm run format 

4) npm run dev

2. Firebase & Firebase Hosting

npm install -g firebase-tools

firebase login

firebase init

3. Vue.js 설정 

1) npm init -y 

2) npm install vue

4. 배포 준비 및 배포 

1) firebase deploy

2)

3)

4)

firebase.json
 

{

  "firestore": {

    "rules": "firestore.rules",

    "indexes": "firestore.indexes.json"

  },

  "hosting": {

    "site": "centreor-com",

    "public": "public",

    "ignore": [

      "firebase.json",

      "**/.*",

      "**/node_modules/**"

    ],

    "rewrites": [

      {

        "source": "**",

        "destination": "/index.html"

      }

    ]

  }

}