꿀팁 저장소

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; 

종종 쓰이지만, 쉽게 까먹는 git명령어에 대해 짚어본다.

협업을 하다보면 원격 브랜치에 푸시를 해야하는 경우가 있다.

(= 혹은, 로컬에 새로운 브랜치를 생성하고 해당브랜치를 원격 저장소에 푸시하는 경우가 있다.)

1. git checkout -b feature_branch_name

2. Edit, add and commit your files

ex)

  > git add -A

  > git commit -m 'something message'

3. git push -u origin feature_branch_name

sns관련 meta태그 설정이 존재한다.

자, 빠르게 필요한 부분만 정리해본다.

// 공통
<title>타이틀</title>
<meta name='descriptoin' content='소개글'/>
<meta name="Copyright" content="selfmade" />
<meta name="author" content="selfmade" />

// facebook, kakao
<meta property='og:url' content='https://stock.selfmade.cloud'/>
<meta property='og:type' content='website'/>
<meta property='og:title' content='타이틀'/>
<meta property='og:descriptoin' content='소개글'/>
<meta property='og:image' content=''/>

// twitter
<meta name="twitter:title" content="타이틀" />
<meta name="twitter:description" content="소개글" />
<meta name="twitter:image" content="" />
<meta name="twitter:card" content="photo" />

이것을 설정해야만 링크를 공유할 때, 이미지 소개글 등이 제대로 나타난다.

※ 단, 카카오 공유시 이미지가 변경되지 않을때, 캐시를 지우도록 하자.

https://developers.kakao.com/docs/cache

NoSQL을 다루다보면 제목과 같은 일이 제법 빈번히 발생한다.

const ProductSchmea = new mongoose.Schema({
  ...
  comments: [
  	{
      userId: ...,
      comment: ...,
      createdAt: ...,
      updatedAt: ...,
    }
  ]
});

위와 같은 설계를 하는일이 제법 많기때문이다.

상품에 대한 댓글을 위처럼 관리하면 매우 쉽기 때문이다.

그런데 comments를 수정하려면 어떻게 할까...? 가 문제다.

먼저, comments를 추가하는것은 제법 간단하다.

...
try {
  const commentInfo = {
    userId: ...,
    comment: ...,
  };
  
  await Prodcut.findOneAndUpdate({ _id: id }, { $push: { comments: commentInfo } }).exec();
} catch(error) {
  ...
}
...

이런식으로 push해서 넣으면 끝..!

대망의 수정이다.

알고나면, ? 쉽네 뭐야 어떻게 된거지? 라고 할만큼 쉽다.

하지만, 모르면 도저히 그 방법을 찾을수가없다.

...

try {
  await Product.findOneAndUpdate(
    { _id: id, 'comments._id': commentId }, 
    { $set: { 'comments.$.comment': '수정해버림' } 
  }).exec();
  
} catch(error) {
  ...
}

...

포인트는 두가지이다.

1. comment._id를 알아야한다는 것.

2. comments.$.comment

여기서 .$은 javascript의 [n]을 대신해준다.

위의 정보는 은근히 찾기 어려워 이렇게 간단히 주석을 남긴다.

create-react-app, 통칭 CRA는 2018년 부터 IE에 대응하지 않는다고 선언했다.

실제로 CRA로 만든 프로젝트를 IE에서 실행시키면 화면에 아무것도 노출되지 않는다.

대한민국에 사는 우리는 IE에서도 서비스를 해야만한다...

IE에 대응하는 방법은 의외로 간단하니 알아두자.

// 모듈 설치
npm install react-app-polyfill


// index.js - 1번째줄  (반드시 1번째 줄 부터 설정)
import 'react-app-polyfill/ie9'
import 'react-app-polyfill/ie11'
import 'react-app-polyfill/stable'
...


// package.json
{
  ...
  "browserslist": {
      "production": [
        ">0.2%",
        "not dead",
        "not op_mini all",
        "ie 9"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version",
        "ie 9"
      ]
   },
  ...
}