CodeHoon

사용환경 : Vue.js 3, Firebase 9.1.5

youtube에 있는 동영상 강의를 보던 와중 자꾸 firebase 관련한 에러가 해결이 안되어서 직접 찾아보고 적용하여 성공하였다.

1. 모듈 생성 (module exports part.)
2. 실제 적용 위치

이렇게 두 가지로 나뉘어서 어느곳에서도 사용할 수 있도록 모듈을 생성해놓았다.
그리고 실제 적용 위치에 대한 내용을 작성하도록 하겠다.

1. Module exports = { } !

firebase 8번대의 버전부터 이전과는 다르게 적용해야한다.

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

// 프로젝트 생성 후 받은 정보를 복사 붙여넣기 해주시면 됩니다.
const firebaseApp = initializeApp({
  apiKey: "...",
  authDomain: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
})
const db = getFirestore(firebaseApp)
export default db

initializeApp ({ }) 내부에 들어갈 내용으로는 이곳을 참고하면 된다.

>> 그래도 잘 모르시겠다면 이 글의 맨 마지막에 찾는 방법을 작성해놓았습니다. 확인부탁드립니다.

2. 실제 적용 위치

해당 함수를 호출할 때에는 반드시 Promise 방식인 async await을 적용해서 작성해야 한다.

import db from '@/firebase/firebaseInit.js'
import { doc, setDoc } from "firebase/firestore";

methods: {
    async uploadInvoice () {	// async 함수 를 작성     
        // 저장될 데이터 내용
        const docData = {
          ...
        }
        //await 로 담아주기 
        await setDoc(doc(db, "data", "one"), docData);
        // 후처리는 알아서!
      }
}

해당 내용을 실행 후, 파이어베이스 프로젝트로 이동하여 내용을 보면, 아래와 같이 데이터가 들어가있음을 확인이 가능하다.

끝~!

도움이 되셨다면, 광고 한 번씩 클릭해주시면 블로그 운영에 힘이 됩니다.

만약, 내 key 관련한 정보를 찾지 못하겠으면 아래의 경로로 들어가주시면 확인이 가능합니다.

본인의 프로젝트 - 앱 소개 - setting - 일반 - 아래 스크롤(내 앱) 

도움이 되셨다면, 광고 한 번씩 클릭해주시면 블로그 운영에 힘이 됩니다.

사용환경 : Vue.js 2, vue-cli, vue-Router 사용

router-link + binding 를 통해 해당 내용을 전달해준다.

<router-link :to="'/detail/'+123453" >

여기서 `123453` 이 전달하고자하는 변수가 될 수도 있다.

1. Home.vue

<template>
// 각각의 id를 가진 리스트를 v-for로 출력.
<div class="movie" v-for="movie in movies" :key="movie.imdbID">
	<router-link :to="'/movie/' + movie.imdbID" />
    	// router-link를 통해 반복문을 통해 출력된 movie 객체의 id값을 전달하고자 한다.

</template>

2. Index.js (router)

  {
    path: '/movie/:id',
    name: 'Movie Detail',
    component: MovieDetail
  }

: 바인딩을 통해 id값을 전달할것이라고 선언한다.

3. MovieDetail.vue

2가지 방법으로 출력이 가능하다.

  1. html 요소에 바로 텍스트만 출력
  2. script 내에서 추가 가공 후 또다른 전체 데이터를 출력

  1. html 요소에 출력

  html 요소에 출력하는 것은 간단하다.

<template>
	<div> {{ $route.params.id }} </div>
</template>

이렇게 바로 사용이 가능하다.

  2. script 내에서 가공 (후 또 다른 전체 데이터를 출력)

  위에서 $route를 바로 사용하던데에 반해 이번에는 vue의 useRoute 기능을 사용해야 한다.

import { useRoute } from 'vue-router'

export default {
  setup () {
    const route = useRoute()
    const paramsValue = route.params.id  
  }
}

이렇게 paramsValue로 변수를 선언하여 사용할 수 있다.

이 글은 해당 문서를 참조하였습니다.

■ Computed 속성 사용하기

1. {{ }} 템플릿 내에 복잡한 연산 로직을 수행하고 싶을 때 사용
2. computed와 methods를 구분하여 사용할 수 있다. 
    -> computed는 캐싱을 하지만 methods는 하지 않는다.
3. watch 보다 computed를 사용하는 것이 코드의 반복성 때문에 더 낫다
4. 기본적으로 getter 함수만 가지고 있지만, setter 함수를 만들어 사용할 수 있다.

■ Example

<template>
<div id="example">
  <p>원본 메시지: "{{ message }}"</p>
  <p>역순으로 표시한 메시지: "{{ reversedMessage }}"</p>
</div>
</template>

var vm = new Vue({
  el: '#example',
  data: {
    message: '안녕하세요'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

이때, reservedMessage의 값은 항상 message의 값에 의존한다.
추가적으로, message의 값이 존재하지 않는다면 reservedMessage는 연산되지 않는다.

 ✔ Computed 속성은 항상 어딘가에 의존한다.

computed: {
	now: function () {
		return Date.now()  // Update 되지 않음
	}
}​

Date.now() 와 같은 아무곳에도 의존하지 않는 속성일 경우 업데이트 되지 않는다.

Methods 로도 같은 결과를 낼 수 있다.

methods: {
	reversedMessage: function () {
		return this.message.split('').reverse().join()
	}
}

  => methods를 사용할때에는 cache가 저장되지 않는다. 

■ Computed VS Watch

Computed의 코드들이 Watch 코드들보다 훨씬 적은 코드를 사용하고 있다는 것을 알 수 있다.

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  // computed 속성의 코드 길이는 짧다.
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  // watch 속성의 길이는 반복적이고 data부분에 추가적으로 기입을 해서 사용해야 편하다.
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

vue 3,  vue-cli 4.5.x 의 환경을 사용하고 있습니다.

■ LocalStorage

 - 로컬 스토리지에 관하여 자세한 내용은 MDN의  링크를 확인해주시기 바랍니다.

사용 방법은 아주 간단합니다.

localStorage.setItem() 으로 저장, localStorage.getItem() 으로 호출 입니다.

번외로 localStorage.removeItem() 로 지정하여 삭제가 가능하고, localStorage.clear()로 모두 삭제가 가능합니다.

■ 예제

//add.vue

<template>
  <div class="add">
      <input 
        type="text" 
        class="add__input" 
        placeholder="Enter your task" 
        v-model="newTodoItem"
        @keyup.enter="addTodoItem"
      />
      <button 
        class="add__button"
        @click="addTodoItem"  
      >Add</button>
  </div>
</template>

Input:text 창에서 enter를 누르거나, button을 클릭하면 addTodoItem이라는 함수가 호출되게 하였습니다.

v-model을 통하여 input에 작성되어져 있는 value와 연동하였습니다.

export default {
  data () {
    return {
      newTodoItem: ''
    }
  },
  methods: {
    addTodoItem () { 
      if(this.newTodoItem !== '') {

        const value = {
          item: this.newtodoItem,
          date: `${new Date().getMonth() + 1}/${new Date().getDate()}`,
          compeleted: false
        }

        // setItem 이라는 method 속에 key, value를 전달
        localStorage.setItem(this.newTodoItem, JSON.stringify(value))
        this.clearInput()

      }
    },
    clearInput () {
      this.newTodoItem = ''
    }
  }

}

localStorage.setItem( )은 key와 value를 전달 수가 있는데, 이를 응용하여 value에 JSON 객체를 전달하도록 하였습니다.

value라는 객체에 위에서 작성한 input의 값을 저장하고, localStorage에 데이터를 저장하였습니다.

로컬 스토리지에 저장된 것을 확인하고 싶다면, 개발자도구 -> Application -> 저장용량 -> 로컬 스토리지 에서 확인하실 수 있습니다.

- Vue-cli 4.5 를 사용하고있습니다.

vue.config.js에서 scss, sass를 지정해주려는 가운데, appendData 에 대한 에러가 발생하였을 때 적용하여 해결하였습니다.

appendData -> additionalData

로 변경해주었습니다.

[ Vue Instatnce의 위치와 함수의 사용법에 따른 this.function의 값 출력  ]

Original Function : 함수 내에서 새로운 Instance를 생성하기 때문에 this.을 찾지 못한다.
그래서 새로운 함수 내의 function 을 호출하면 값을 뱉어내지 않는다.

Arrow Function : 선언되던말던간에 기존의 Instance의 위치 그대로 this.를 찾음
그래서 새로운 Arrowfunction 내에서 function을 호출하면 값을 뱉어낸다. 

그냥 뭐 그렇다고.... ㅎㅎ ;;

별 내용은 없고 그냥 Vue와 데이터베이스 구현하는데 필요하여 구현해봤다.

물론 어느 블로그 참고..

뷰티파이는 css-framework와 유사하나 Vue와 직접적으로 연동하여 사용할 수 있다.

Webpack 이란?

• html, css, javascript 등 많은 파일을 하나의 .js파일로 변환 해주는 도구
• 코드 관리 용이, 로딩 속도 증가, 버전 관리 용이 등의 장점이 있음.

필요조건

• node, npm

구현 내용

• 수학문제 프로그램
• create 에서 build 까지 기술
• build 후에는 구동되고 있는 웹서버에 올리고 index.html 파일을 실행하는 것으로 사용이 가능함

전체 구현내용 흐름

1. 프로젝트 폴더 생성, 이동
2. npm init : package.json 생성
3. npm i vue : npm module 로 vue 설치
4. npm webpack webpack-cli -D : npm module로 webpack과 cli 를 developer모드로 설치
5. npm i vue-loader -D : npm module로 vue-loader를 설치
6. npm i vue-template-compiler -D : npm module로 vue-temnplate-compiler 설치
7. npm i css-loader : css-loader 설치
8. npm i vue-style-loader : vue-style-loader 설치
9. npm run build : 8번 이후 코드를 작성 후 프로덕션 프로젝트 생성

Codes

// main.js

import Vue from 'vue'
import app from './App.vue'

new Vue(app).$mount('#root')

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
</body>
</html>

// package.json : build 명령어 추가

"scripts": {
    "build": "webpack --watch",
  },

// webpack.config.js

// entry객체 내에 app의 path.join 지정  
const path = require('path')        
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    mode: 'production',
    entry: {    // app => 합쳐질 파일명, main.js => webpack으로 build 할 파일
        app: path.join(__dirname, 'main.js') 
    },
    module: {    // rules를 통해 '.vue'로 끝나는 파일은 vue-loader를 사용하겠다고 정의
        rules:   // 이유: webpack은 기본적으로 javascript를 처리 App.vue 파일은 javascript 파일이 아니기 때문에, vue-loader가 처리하게 만듬
				[{ 
            test: /\.vue$/,
            use: 'vue-loader'
        },
        {
            test: /\.css$/,
            use: ['vue-style-loader', 'css-loader']
        }
    ]},
    plugins: [  // vueloader plugin을 사용하기 위해 vue-loader plugin 모듈을 가져옴
        new VueLoaderPlugin()
    ],
    output: {   // build결과물에 대한 정보. 
        filename: 'app.js', // build 파일명 
        path: path.join(__dirname, 'dist')  // 파일이 저장될 디렉터리 지정
    }
}

기타

node.js 와 vue.js 에서 모듈들을 삽입하는 방식의 차이. require, import...

// In node.js
 require, module.export

// In Vue.js
 import, export default

이렇게 직접 하나씩 module들을 다운로드 하고 삽입하는 것은 vue-cli가 잘나와서 굳이 필요하다고는 생각치 않는다.
하지만 프로젝트 기본을 설정하는 webpack.config.js 를 어떻게 구조화하는지에 따라 명령어에 따라 에러가 발생할 수도있다는 것을 한 번 더 느끼게 해주었고, vue의 config가 어떤 식으로 돌아가는 지 이해가 더 잘되었다.

그간 프로젝트 만들고 에러 해결해 나가는 것에 급급해 했지만, 하나씩 기초를 다질 때가 된 것 같아 이렇게 webpack에 대해 알아보았다.

예전에 bootstrap css-framework를 사용하면서 dist가 무엇인가? 에 대해 의문을 가졌지만 그 때에는 그것보다 구현하는데에 급급했기에 넘어갔지만, 이번 기회에 dist가 왜 발생하고, 어떤 식으로 프로젝트를 구성하는지에 대해 좀 더 잘 알 수 있었다.