꿀팁 저장소

몽고 빽업에 대해 알아보려고 한다.

가장 확실한 방법은 docs를 확인하는 것이다.

https://docs.mongodb.com/manual/reference/program/mongorestore/

다만, 우리가 왜 블로그를 찾아보겠는가.

내게 맞는게 어떤것인지 쉽게 알아보기 위함이 아닌가

알아보니 mongo의 백업에는 5가지 정도의 백업/복원 방법이 존재한다.

그 중에서 서비스 운영중에도 사용할수 있는 2가지의 방법을 소개하고자한다.

1. mongodump / mongorestore

> 해당 방법으로 컬렉션, DB, 전체 등 옵션을 통해 원하는 파트를 백업 가능하다.

> 백업의 데이터 형태는 BSON이다. 빠른 백업과 복구가 가능하다.

> 백업 - mongodump / 복원 - mongorestore

> 사용이 매우 간편하다.

dump_ ex) mongodump --host 127.0.0.1 --out /data/db/backup

restore_ ex) mongorestore --host 127.0.0.1 --port 27017 --db dbname backup_db_path

2. mongoexport / mongoimport

> 위의 방법과의 차이점은 추출된 자료의 형태가 csv, json등 친숙한 자료형이다.

> BSON보다 속도는 느리며, 텍스트 형태로 저장이 된다.

> 데이터를 복원할때 외부의 툴을 이용할수도 있다고한다.

> 백업 - mongoexport / 복원 - mongoimport

mongo가 위치하는 서버 외에 다른서버에 백업할 필요가 있는데,

단순히 IP만 지정하면 되는지, 접근성과 관련하여 보안적인 조치가 필요한지 등에 대해 더 알아볼 예정이다.

검색해보면 mac에 mongo를 설치하는 방법은 정말 많이나온다.

(근데 공식 가이드라인이 제일 잘나왔다. 흠 잡을데없이)

그런데 의외로 mongo를 실행, 중지, 재실행하는 방법에 관해서는 알맞는 자료가 별로없다.

homebrew를 통해 설치한 경우에 대해서 알아본다.

[ 실행중인 mongo 확인 ]

$brew services list

위 명령어로 몽고가 어떤 이름으로 실행중인지 체크한다. (나의 경우엔 mongodb-community)

[ 중지 ]

$brew services stop mongodb-community

[  재실행 ]

$brew servcies restart mongodb-community

에러상황 혹은 db위치 변경, 로그 위치 변경 등의 목적으로 인해 중지 및 재실행하는 경우가 제법 많다.

꼭, 알아두고 대비하자

find명령어를 통해 쉽게, 파일을 찾을 수 있다.

find [기준경로] -name [파일명]

예를들어,

find / -name log.txt

현 직장은 비디오를 기반으로하는 플랫폼을 운영중이다.

따라서, 비디오 관련기술을 차례로 접해보는중인데

플레이어와 관련하여서는 youtube, wistia, vimeo등을 써봤고 (wistia를 선택)

촬영관련해서는 RecordRTC를 적용중이다.

국내에는 자료가 거의 0에 가까운 RecordRTC에 대해서 간단히 소개해본다.

RecordRTC는 웹에서 카메라/비디오를 운용하기 위한 라이브러리다.

즉, 웹캠을 지원하는 라이브러리이다.

왜 이것이 필요할까?

html5에서 input태그를 잘 활용하면 카메라에 접근이 가능하다.

다만, 그 범위가 플랫폼에 따라 제한된다.

예를들어,

<input id='camera-yap' type='file' accept='video/mp4' capture='camera' />

이, 간단한 한줄로도 기본적으로 카메라에 접근할 수 있다. (클릭하여 카메라를 구동시킬 수 있음)

운영체제에 따라 먹통이 되고는 한다.

서비스를 그런식으로 만들수는 없다. 모두에게 평등한 서비스를 제공하는것을 원칙으로해야한다.

그래서 알아보다보니 RecordRTC라는 라이브러리가 있었다.

어렵지는않지만, 예제가 없어 초보자에게는 간단하지 않다.

몇일내로, 예제소스를 '이곳'에 업데이트 하도록 하겠다.

===== 업데이트(20. 04. 22) =====

1. RecordRTC를 사용하기위해 설치를 하도록하자

https://www.npmjs.com/package/recordrtc

2. 예제를 참고해 구현해보자.

import React from 'react';
import RecordRTC from 'recordrtc';

class RecordRTCTest extends React.Component {
  state={
    recorder: null,
    video: null,
  }
  
  onRecord = () => {
    navigator
      .mediaDevices
      .getUserMedia({ audio: true, video: true })
      .then(function(camera) {
        this.readyCamera(camera);
      })
      .catch(function(error) {
        console.error(error);
      });
  }
  
  readyCamera = (camera) => {
    const video = document.getElementById('test-video');
    video.muted = false;
    video.volume = 0;
    video.srcObject = camera;
    
    const recorder = new RecordRTC(camera, {
      type: 'video',
    });
    
    recorder.startRecoding();
    recorder.camera = camera;
    
    this.setState({ recorder });
  }

  onStop = () => {
    const { recorder } = this.state;
    const video = document.getElementById('test-video');
    
    video.src = video.srcObject = null;
    video.muted = false;
    video.volume = 1;
    video.src = URL.createObjectUrl(recorder.getBlob);
    
    // 카메라 정지
    recorder.camera.stop();
    
    // 서버 저장 등을 위해 영상object 데이터 저장
    this.keepVideo(recorder);
    
    this.setState({ recorder: null });
  }
  
  keepVideo = (data) => {
    this.setState({
      video: data.blob,
      src: URL.createObjecetUrl(data.getBlob()),
    });
  }

  render() {
    return (
      <div className='video-test-container'>
        {
          recorder ?
          <p>녹화중이에요~~</p>
        }
        <video
          id='test-video'
          autoPlay
          playsInline
          controls
        />
        <button onClick={this.onRecord}>촬영하기<button/>
        <button onClick={this.onStop}>중지하기<button/>
      </div>
    )
  }
}

기본적인 예제소스입니다.

테스트는 해보지는 않았으며, 실제 구현된 코드기반으로 기본 틀만 잡아둔 소스입니다.

mongo에서 join을 위해 aggregate하는 경우

원하는 값만 얻기위해 $project를 쓰고는 한다.

한걸음 나아가 $project를 응용하여 사용하는법을 알아보고자 한다.

이번에 다소 특수한 경우를 처리해야하는 상황이 발생했다.

예를들어, aggregate한 데이터들 중

...
$project: {
  "오늘의 요리사": {
    "반찬 담당자": [...], // 10명
    "찌개 담당자": [...], // 10명
    "밥 담당자": [...], // 3명
    ...
  }
}
...

위와 같은 상황이다. (이는 단지 예시이다)

나의 경우에는 각 데이터들의 개수가 1:1:1로 유지되어야하는데 밥 담당자의 크기가 다른 데이터들과 달라 null값에 대한 처리를 해줘야하는 경우였다.

검색을 해본 결과, 무려 $map이라는 기능이 있음을 발견했다. 친숙한 키워드가 나타나자 너무 행복했다.

...
$project: {
  "오늘의 요리사": {
    "반찬 담당자": "오늘의 요리사.반찬 담당자",
    "찌개 담당자": "오늘의 요리사.찌개 담당자,
    "밥 담당자": {
      $map: {
        $input: "오늘의 요리사",
        as: "e",
        in: {
          $cond: {
            if: { $eq: [ "$$e.밥 담당자", null ] },
            then: { "밥 담당자": "-" },
            else: { "밥 담당자": "$$e.밥 담당자" }
          }
        }
      }
    },
    ...
  }
}
...

위와 같이 조건식을 적용하여 해결할 수 있었다.

예시가 다소 이상하여 언제쓰는건지 헷갈릴수 있으나,

이런식의 array타입에 대한 조건식은 분명히 많이쓰일것으로 생각되어 정리해본다.

React 개발을 하다보면 전역적으로 상태관리를 해야할 때가 온다.

작은 시스템일수록 그럴일은 없지만,

시스템이 커질수록 쓸일이 생기기 마련이다.

그렇다고 프로젝트 초기부터, 이게 커질지 아닐지도 모르는데 Redux와 같은 상태관리 시스템을 도입하자니,

코드가 길어지고 상대적으로 개발시간이 다소 길어지는 것을 감수할 필요는 없다는 생각이 든다..

이 때, 딱 적당한것이 Context API인것같다.

처음부터 세팅해두고 시작할필요없이 (프로젝트 구조와 거의 무관하게) 쉽게 적용하여 쓸 수 있다.

이미 짜둔 코드에 몇줄 얹으면 끝이다.

시작에 앞서, context가 무엇인지 설명하자면 Consumer와 Provider를 통해 글로벌하게 state를 관리하는 도구이다.

이게 무슨말이냐면, 아주 유용한 연필을 하나 만들어두고 누구든 원하면 쓸수있게 Provider를 통해 연필을 전체적으로 공급한다.

그리고, 누구든 연필이 필요한 녀석(component)은 Consumer를 통해 그 연필을 가져다 쓸수있다는 말이다.

코드의 중복이나 상속의 상속의 상속...같은 낭비를 하지않을수 있으니 매우 유용하다고 볼수있다.

그러면 가장 기본적인 사용법을 알아본다.

import React, { creatContext } from 'react';

const { Provider, Consumer } = createContext();

class ItemProvider extends React.Component {
	state = {
    	item: null,
    }
    
    actions = {
    	onClear: () => {
        	this.setState({ item: null });
        },
        onGotTool: (tool) => {
        	this.setState({ item: tool })
        }
    }
    
	render() {
	    const { state, actions } = this;
        const value = { state, actions };
    	return(
        	<Provider value={ value }>
            	{ this.props.children }
            </Provider>
        )
    }
}

const ShowItem = () => (
	<Consumer>
    {
    	({ state, actions }) => (
        	<div>
            	<div>
                	<span>나의 도구: </span>
	                { state.item }
                </div>
				<div>
                	<p onClick={() => { actions.onGotItem('Hammer'); }}>도구 획득</p>
                </div>
            </div>
        )
    }
    </Consumer>
)

class App extends React.Component {
	render() {
    	return (
        	<ItemProvider>
            	<div><ShowItem /></div>
            </ItemProvider>
        )
    }
}

종종 쓰일것 같은 검색기능이 있어서 간략히 정리해본다.

mongo에는 엄청난 Text검색기능이 있다

mongoDB 메뉴얼의 예제를 체크해본다.

db.articles.insert(
   [
     { _id: 1, subject: "coffee", author: "xyz", views: 50 },
     { _id: 2, subject: "Coffee Shopping", author: "efg", views: 5 },
     { _id: 3, subject: "Baking a cake", author: "abc", views: 90  },
     { _id: 4, subject: "baking", author: "xyz", views: 100 },
     { _id: 5, subject: "Café Con Leche", author: "abc", views: 200 },
     { _id: 6, subject: "Сырники", author: "jkl", views: 80 },
     { _id: 7, subject: "coffee and cream", author: "efg", views: 10 },
     { _id: 8, subject: "Cafe con Leche", author: "xyz", views: 10 }
   ]
)

db.articles.find( { $text: { $search: "coffee" } } )

{ "_id" : 2, "subject" : "Coffee Shopping", "author" : "efg", "views" : 5 }
{ "_id" : 7, "subject" : "coffee and cream", "author" : "efg", "views" : 10 }
{ "_id" : 1, "subject" : "coffee", "author" : "xyz", "views" : 50 }

검색이 이렇게 편해도되는걸까?

const data = 'hello\nworld'
{
  data.split('\n').map(word => {
    return (<span>{ word }<br/></span>)
  })
}

암호화에는 대칭키와 비대칭키 방식이 있다.

대칭키 방식은 암호화와 복호화에 같은 키를 이용하는 방식이다.

주로 서버에서 암/복화하를 모두 하는 경우에 사용한다.

비대칭키 방식은 암호화 복호화에 각기 다른 키를 사용하는 방식이다.

먼저,  (복호화를 위한)개인키를 생성하고

개인키를 가지고  (복화화를 위한)공개키를  생성한다.

클라이언트와의 통신간에 암호화를 필요로 하는 경우 비대칭키를 사용하게되는데,

이는 대칭키 방식에 비해 속도가 다소 떨어진다고 한다.

나는 이번에 계좌번호, 카드번호 등의 데이터 교환을 위해 비대칭키 방식을 사용하게 되었다.

실제로, 어떻게 구현해 나가면 되는지 알아보자.

1. 개인키를 생성한다.

 - openssl genrsa -out private.key 2048 // 나는 이거로는 안심이 안된다. 4096을 사용

2. 개인키를 가지고 공개키를 생성한다.

 - openssl rsa -in private.key -out public.key -pubout (PKCS#8 표준)

3. PKCS#1 을 사용하고자 한다.

 - openssl rsa -pubin -in public.key -RSAPublicKey_out

4. 환경변수를 쉽게 사용하게 해주는 dotenv를 정의하는 .env파일에 다음과 같이 정의한다.

 - private키의 줄 끝마다 \n를 붙여 한줄로 합쳐준다.

// before
asdfasdf
asdfasdf
asdfasdf

// after
asdfasdf\nasdfasdf\nasdfasdf

5. 사용할 때는 다음과 같은 코드를 통해 사용할 수 있다

export const getPrivateKey = () => {
    return process.env.PRIVATE_KEY.replace(/\\n/g, '\n');
};

6. 이후의 암복화하는 일상 하던것과 다르지 않다...

Error during WebSocket handshake: Unexpected response code: 400

웹소켓 연동 중 이러한에러가 발생 + 서버가 느려지는 현상이 발생했다.

해결을 위해서는 nginx의 proxy파트에 추가적으로 다음과 같은 코드를 넣어줘야 한다.

proxy_http_version 1.1; 
proxy_set_header Upgrade $http_upgrade; 
proxy_set_header Connection "upgrade"; 
proxy_set_header Host $host;