IT 잡동사니

노드에서 파이어베이스 실시간 DB를 사용하려고 하면 

아래 코드에서 오류가 발생한다.

var db = admin.database();

찾아보니 파이어베이스의 컴포넌트가 제대로 설치가 안돼서 그렇다고 한다.

프로젝트에서 아래 명령어로 라이브러리 설치를 해주면 해결된다.

npm install --save @firebase/app

출처

https://github.com/firebase/firebase-admin-node/issues/722

vue를 사용하고자 이것저것 찾아보았다.

인터넷에서 흔히들 올린 vue 사용방법은 아래 사진처럼 node 서버를 사용하는데 서버의 API를 독자적으로 호출해서 데이터를 받아와야한다.

하지만 ejs 형식을 자주 쓰던 나는 이 방식이 정말 맘에 안들었다.

아니 서버 요청을 하는데 페이지에다가 데이터를 한번에 넣어주면 안되나?

그래서 인터넷에서 찾아보니 express-vue 라는 npm은 내가 원하는 방식으로 vue 페이지에 데이터를 넣어주는 방식이어서 사용하기로 마음먹었다. - 사용하려는 과정에서 삽질을 많이 하였다.

express-vue

express-vue 샘플앱

얼마나 간편한가 ejs와 비슷하다.

express-vue를 사용하기 위한 소스를 첨부하겠다.

먼저 npm을 설치한다

$ npm install --save express-vue

var express = require("express");
var app = express();
var expressVue = require("express-vue");
const vueOptions = {
        VUE_DEV: true,
    rootPath: path.join(__dirname, '/views')
};
const expressVueMiddleware = expressVue.init(vueOptions);
app.use(expressVueMiddleware);

express-vue를 세팅한다.

vue파일을 위치시켜야한다.

본인같은 경우는 root폴더 아래에 views라는 폴더를 만들어서 vue파일을 넣었다.

router.get('/user_list', function (req, res) {
    util.basicLog(logger, req);
    user.user_list2().then(function (result) {
        if (!util.checkNull(result)) {
            const data = {resultList: result, length: result.length, title: "제목"};
            res.renderVue("admin/user_list.vue", data);
        }
        else util.return(res, "F", "일치하는 데이터가 없습니다.");
    })
});

renderVue를 사용하여 return하고자 하는 vue 페이지와 데이터를 넣어준다.

node서버에 vue 파일이 존재하면 서버를 시작할때마다 vue파일을 미리 읽어오는 작업을 한다.

Preached -> vue 파일이름

이 메시지를 통해서 본인의 vue파일이 올라갔는지 확인 할 수 있다.

express-vue를 사용하면서

여기서 두 가지 에러가 났었다.

1. vue 파일 컴파일?오류

Error: render function or template not defined in component: anonymous

원래 vue를 사용하려면 Vue 객체를 생성한 뒤 사용해야 하지만

이 express-vue는 anonymous 컴포넌트를 사용하여 vue를 사용하는 것 같다.

(나도 anonymous 컴포넌트가 뭔지 잘 모른다.)

어떻게 고칠지 찾아보다가 express-vue에서 제공하는 starter 샘플을 봐서 고쳤다.

vue 소스에서 반드시 선언해야하는 부분이 선언되지 않아서 그런것같다.

template과 module.exports 부분이 없어서 그렇다.

정상적으로 작동하는 vue 소스를 올리도록 하겠다.

<template>
    <div>
        <h1>{{title}}</h1>
        <p><a href="/post">Click here for an example of a Post</a></p>
        <p><a href="/todo">TodoMVC</a></p>
        <button v-on:click="test">버튼</button>
        <table class="table">
            <thead class="thead-dark">
            <tr>
                <th scope="col">Index</th>
                <th scope="col">이름</th>
                <th scope="col">이메일</th>
                <th scope="col">가입여부</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="result in resultList ">
                <th scope="row">{{result.id}}</th>
                <td>{{result.name}}</td>
                <td>{{result.email}}</td>
                <td>{{result.use_at}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                title: ''
            }
        },
        methods: {
            test: function () {
                console.log('hi');
            }
        }
    }
</script>

data부분은 넣어주는 값이 없지만 단순히 data부분을 선언해주는 것 만으로도 express에서 넣어주었던 데이터를 받아오는 효과가 있는듯하다.

또한 methods는 여러분들이 생각하는 vue의 methods가 맞다 위의 버튼을 누르면 콘솔에 hi가 찍힌다.

2. vue 파일 경로 불일치

{"errno":-4058,"code":"ENOENT","syscall":"stat","path":"C:\\Users\\안지환\\Desktop\\WebstormProjects\\server_renewal\\views\\user_list.vue"}

위의 메시지는 renderVue를 하였으나 vue 파일을 찾지 못해서 발생하는 문제다.

상대경로를 적당히 조절해서 경로를 맞춰주도록 하자.

그밖에도 에러가 난다면 express-vue 샘플앱을 참고하면 좋을 것 같다.

참고로 사용하는 view는 ejs 방식입니다.

우리가 원하는 최종 결과무울~

스마트 에디터는 html과 php에 적합한 에디터인것같군요 어쩌면 node js를 위한 에디터가 따로 있을거라는 생각도 갑자기 듭니다만 일단 한번 해보겠습니다.

https://github.com/naver/smarteditor2

에서 네이버 스마트 에디터를 다운로드합니다.

스마트 에디터 프로젝트를 까보면 위와 같습니다.

workspace는 뭔지 모르겠군요 저는 빨리하고 잘꺼니까 그냥 용량이 큰 dist로 합니다.

dist는 제느낌상 distibution인것같군요.

그러면 설명서에 저 파일에 모든것이 담겨있다고 나와있는데 저 파일을 한번 크롬에다가 드래그해서 열어봅니다.

당연히 한번에 안되죠 쉬운게 세상에 어딨습니까

크롬 개발자도구에서 콘솔을 열어보니 저도모르겠습니다 알고싶지도않고

accessing a cross-origin frame. 문제인데 이건 크롬에서 보안상의 문제로 자주 겪어보았습니다.

IE에다가 드래그해서 html파일 열어보니 에디터가 잘만 생성되는군요.

저거는 서버에다가 적용시켜주면 없어지는 오류니까 쌩까고 지나가도록 하겠습니다.

아까 그 대빵 html파일을 까서 소스를 복사합니다.

node서버에 새로운 라우터를 팝니다.

그리고 ejs파일도 새로 만들어줘서 그곳에 html소스를 넣습니다.

그 모습은 다음과 같죠.

그리고 아까 만든 라우터로 이동하면~

당연히 안됩니다.

왜냐면 js파일과 각종 css파일들도 같이 불러와야하기 때문이죠.

콘솔을 한번 까봅니다.

어휴 점점 글쓰기가 싫어집니다.

저기서 가장 큰 문제는 js 파일들을 불러와야하는 것 이겠죠?

콘솔의 가장 위에서도 보면 huskyEZ크레이터 뭐시기 js파일이 없다는 문제가 뿜 뜨는군요.

일단 js파일들을 연결시켜줘봅시다.

dist폴더를 editor라는 폴더로 이름을 바꾸고 복사해서  node프로젝트의 public 폴더에 넣도록하겠습니다.

public 폴더에다가 넣어야지 마음껏 접근이 가능하니까요.

그리고 가장먼저 HuskyEZCreator.js 파일을 ejs내에서 public과 연결해줍니다. 

제 경로는 다음과 같았습니다. ../js/service/HuskyEZCreator.js

그러면 새로운 에러가 발생합니다.

SmartEditor2Skin.html을 불러올 수 없다는 것인데...

SmartEditor2Skin는 기본 경로가 위와 같은데 에러메시지 잘 참고해서 맞춰주도록 합시다.

저는 위처럼 했습니다.

고럼 에디터가 뿅 나타나는군요.

문제는 저 에디터에는 이미지를 업로드하는 기능이 없다.

흠... 이미지가 있는 에디터를 다시 찾아서 돌아오도록 하겠다.

module.exports.version_list = function () {
    return new Promise(function (resolve, reject) {
        var sql = "SELECT * FROM STATUS_VERSION";
        db.connectDatabase().query(sql, function (err, result) {
            if (err) console.log(err);
            resolve(result);
        });
    });
}

이런식으로 프로미스를 이용한 쿼리 실행을 정의하였고

version.version_list.then(function (version_doc) {
    res.end(JSON.stringify(version_doc[0]));
})

이렇게 실행을 하였으나 업데이트 쿼리나  실행해도 쿼리값이 제대로 반영이 안되는 문제가 있었다.

함수를 호출할때 ()를 안붙여서 그런것이었는데

아무래도 함수에 대한 결과값이 정해져서 그런것같다.

version.version_list().then(function (result) {
    console.log(result);
    res.render('admin/version_control', {result: result[0]})
})

이렇게 바꾸니까 잘된다.

간단한 문제였지만 쿼리 실행자체는 문제가 없어서 눈치채기가 힘들었다.

https://support.cloud.engineyard.com/hc/en-us/articles/205408088-Access-Your-Database-Remotely-Through-an-SSH-Tunnel

tunnel ssh경우 쿼리를 모듈화해서 짜기가 곤란해서 난항을 겪고있었는데 매우 꿀팁이다.

cmd에서 ssh가 작동한다는 가정하에 진행한다.

ssh tunnel은 아래와 같이 ec2와 rds 2개의 서버가 있다고 쳤을때 rds는 외부에서 접근이 안되지만 ec2내부에서는 rds로 접근이 가능하다고 쳤을때 내 pc에서 ssh를 우회하여 rds로 접근하는 것이라고 생각하면 된다. (찾아보지는 않았음 뇌피셜임 ㅈㅅ)

ssh -L 3307:rds주소:3306 아이디@ec2주소

상단의 사이트에 가보면 이처럼 명령어를 로컬 cmd(윈도우 기준)에다가 쳐야한다.

3307은 3306은 뭐 겹친다는데 그냥 따라했다.

ec2주소는 aws ec2로 접속하는 주소를 적는다.

아이디는 rds로 접속하는 계정명을 적는다.(흠 근데 rds와 ec2 접속 계정명이 같아서 rds 계정 아이디를 적는 것인지 확실치 않다. 설명에는 rds 계정명을 적으라고 나와있다.)

rds 주소는 aws에서 생성한 rds 주소를 적는다.

이렇게 적어서 실행을 해보면 잘된다. 안되면 설정상에 문제가 있는 것이다.

로컬 cmd에서 위 명령어를 실행했을때 모습 -> 일반적인 ssh 접속과 똑같은 결과

이후 로컬 node 앱에서의 db 주소를 127.0.0.1 이라고 놓고 작업을 하면 잘 작동한다.

var mysql      = require('mysql');
var connection = mysql.createConnection({
    host     : '127.0.0.1',
    user     : '아이디',
    password : '비밀번호',
    database: 'db명',
    port: 3307
});

connection.connect(function(err) {
    if (err) {
        console.error('error connecting: ' + err.stack);
        return;
    }

    console.log('connected as id ' + connection.threadId);
});

로컬 node 앱에서 mysql로 접속하는 코드는 위와 같다. 위의 코드를 실행해보면

잘 접속한다.

이제 mongodb를 mysql로 교체작업하러간다 에효...

ㅡㅡ Cloud 9 환경 ㅡㅡ

I also encountered such a problem， I am a such solutions：
first: 
update npm ：$ npm update -g npm

second:
Clean Cache: $ npm cache clean

laster:
$ npm install meanio --save

laster 실행후 조금 기다린뒤