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 - 일반 - 아래 스크롤(내 앱) 

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

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

■ 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

로 변경해주었습니다.

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가 왜 발생하고, 어떤 식으로 프로젝트를 구성하는지에 대해 좀 더 잘 알 수 있었다.

Vue.js 프로젝트를 webpack을 이용해 

npm run build

를 하였을 때 나타나는 경고 문구

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack.config.js 에 어떤 모드로 프로젝트를 설정한것인지 기재를 안해놓았기 때문이다.

그렇기에 mode: 'production'  혹은 'development' 를 추가해주면 된다.

웹소켓에 대해 외부접속도 가능하게 하려고 그간 많은 노력을 했으나 번번이 실패하여 어느덧 3주-4주의 시간이 흘렀다.

로컬 환경에서는 여러 번 성공하였으나 외부접속 부분에서 계속 실패. 방향을 바꿔버렸다.

`그냥 로컬로 돌리자`

간단한 서버가 될 코드 내용이다. index.js 등으로 구현

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server, {
  cors: { origin: "*"  }
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

// websocket으로 데이터 받아오기
const socket = io('ws://localhost:3000');

io.on('connection', (socket) => {
  console.log('a user connected');
});

나를 괴롭혔던 몇 가지의 문제들이 있었다.

1. Port 처리
2. CORS (Access-Control-Allow-Origin) 에러
3. REST API

첫째로 포트 문제였다.

공인 아이피로 접속해야하는데 자꾸 접속이 안됐었다. 서버를 돌려도 안되었고, 등등..
원인은 포트포워딩이었다. 과거에 서버를 설치하는데 내가 직접 건들지 않았던 부분이었기 때문에 신경 자체를 쓰지 못했다.

내 능력부족일 뿐,, ㅠㅠ

그리고 이번 기회로 네트워크 단의 공부를 잘 하게 되었다. 어떤 식으로 흘러가는지 대충 알았던 모습을 그림도 그려가면서 공부하며 이해를 할 수 있었다. ㅂㄷㅂㄷ.. 시간 잡아먹은거 생각하면 치가 떨림.

두 번째로 CORS 에러. 

프론트엔드 개발자들이 가장 자주 보고 친숙한 에러 중의 하나라고 하는데, 이해가 된다. 
걸핏하면 CORS에러에요~ 뿌잉뿌잉하면서 빨간 글씨로 나타나는 녀석이다.

서버에서 분명히 아래와 같이 주었는데도, 계속 에러나고 ㅋㅋㅋ 열받아 죽겠다.

cors: {  origin: "*"  }

ORIGIN * 는 함부로 주면 안된다.

그래도 어느정도 해결해서 다행이다. 전체적인 프로세스도 잘 알았고, 역시 부딪히는만큼 알게 되는 법

마지막으로 REST API 이다.

그래도 위의 두 녀석보다는 훨씬 애를 덜 먹였다. 왜냐하면 기존에도 자주 사용하는 방식이었기 때문. 
RESTFUL API 환경구성을 하기 위해 프론트와 백을 일부로 구분하여 사용하였다.

기존에는 Legacy였기 때문에 코드를 직접 보기 너무나도 끔찍하여 토할 것 같았으나, PHP를 백으로 놓고 데이터만 내뱉게 만들어놓고, Javascript로 나머지를 충당했다. 쓴 라이브러리 등은 ajax를 처음에는 사용하였으나, vue.js를 공부하면서 axios에 대해 알게되었고, 이제는 axios위주로 사용한다. 
axios에 대해서는 과거에 작성한 내용을 참고 바랍니다.

사용환경: Linux(Ubuntu, CentOS), Apache, Node.js, Express, socket.io, php, etc...

Node.js를 통해 express를 돌리던 와중 에러가 발생

"NodeJS address already in use"

port를 이미 사용하고 있다고 에러문구가 출력되었다.

■ Node.js를 사용하던 와중에 서버를 강제로 종료하거나 예기치 않게 종료되지 않는 경우가 생긴다고 한다.

■ 해결방법

1. 포트가 이미 사용되고 있는지 확인

lsof -i TCP:3000

를 통해서 현재 사용중인 3000포트를 확인.

사용 중인 모든 포트를 종료 시키기.

kill -9  'PID'

PID번호를 입력시켜 해당 PID를 모두 종료시킨다.

종료시키고 확인해보면 깔끔하게 다 종료된다.

그리고 다시 서버 시작

node index.js