쓸데없는 코딩하기

paste 이벤트를 이용한 타 사이트의 컨텐츠를 입력하기

이의있소 — Wed, 1 Apr 2020 14:06:45 +0900

관련지식
javascript, jquery, DataTransfer, onpaste

드문 경우지만 타사이트에 있는 항목을 복사해오는 기능이 필요할 수 있습니다. 타사이트의 화면 영역을 선택해서 특정 영역에 붙여넣기를 하면 복사했던 내용을 분석해서 필요한 값만 추출하는 것이죠. 어려우신가요?
혹시 배송대행 서비스를 하는 이하넥스를 이용해본적이 있다면 이해하기 쉬울것입니다. 아마존이나 이베이에서 주문한 내역을 이하넥스에 동일하게 입력해야 하는데 상품명/가격/수량 등등을 수동으로 입력하기엔 불편하죠. 그래서 해당 쇼핑몰의 주문내역 영역 전체를 복사/붙여넣기하면 각 항목이 자동으로 입력되도록 구현되어 있습니다. 그래서 붙여넣기 할 영역이 아래처럼 큼지막하게 만들어놨네요.

또는 구글의 스프레드에서도 비슷한 기능을 볼수 있습니다. 웹사이트의 특정 영역을 복사/붙여넣기 하면 한개의 셀에 복사되지 않고 어떤 규칙에 의해 여러 셀에 복사되죠. 이것도 비슷한 형태의 코딩을 한것입니다.

그래서 쿠팡의 주문내역 화면에서 상품명, 금액, 수량을 복사하는 기능을 만들어보겠습니다. 파싱한 데이터를 단순히 console.log로 출력할 것이지만 활용 방법은 충분히 상상이 되실것 같습니다. 사용할 HTML은 아래와 같고 최종 소스는 맨 아래에 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
div { width: 700px; height:200px; border:1px solid black; overflow: hidden; }
</style>
</head>
<body>
  <div id="div1">텍스트 분석 방식</div>
  <div id="div2" contenteditable="true">HTML 분석 방식</div>
<script>
</script>
</body>
</html>

쿠팡 주문내역에선 아래와 같이 선택해서 복사하면 됩니다. 가정주부 같아서 부끄럽네요

방법

가장 핵심은 타사이트에서 복사한 내용을 어떻게 가져오느냐 하는것입니다. 어차피 자동으로 붙여넣기는 할수 없기 때문에 특정 영역에 사용자가 직접 붙여넣기를 해줘야 합니다. 하지만 그때 두가지 방법이 발생합니다.

완전히 붙여넣어진 값을 읽어서 분석한다.
클립보드로부터 값을 읽어들인다.

브라우저 호환성에선 1번 방법이 가장 좋겠지만 원본 데이터에 가장 근접한것은 2번입니다. 따라서 가급적 2번을 통해서 데이터를 가져오고 그것이 여의치 않으면 1번을 통해서 가져오는 것이 좋을 것입니다.

텍스트 파싱

먼저 텍스트를 분석하여 값을 추출하는 방법을 알려드리겠습니다. 먼저 paste 이벤트가 발생할수 있는 영역을 만들어야 합니다. 위 샘플에선 div 영역을 만들었지만 하위브라우저에서는 입력 가능한 영역이 아니면 paste 이벤트가 발생하지 않습니다. 일단 크롬에선 문제가 없는 샘플입니다.

아래와 같이 div1에 paste 이벤트를 등록하겠습니다.

$('#div1').on('paste', function() {
});

Ctrl+v 등으로 붙여넣기 이벤트가 발생하면 이벤트를 통해 클립보드 데이터를 불러올수 있습니다.

var pasteObj = (event.clipboardData || window.clipboardData);
var texts = pasteObj.getData('text').split('\n');

pasteObj 는 DataTransfer 객체입니다. getData('text')를 하게 되면 클립보드에 저장된 내용중 텍스트 부분만 가져올수 있습니다. 어떤 웹화면의 일부를 복사하면 HTML의 DOM정보도 같이 복사되지만 getData('text') 는 DOM정보를 제외한 textContent에 해당하는 부분만 반환하게 되죠.

참고 : https://developer.mozilla.org/ko/docs/Web/API/DataTransfer

getData('text')를 통해 가져온 데이터는 아래와 같습니다.

주문내역에 있던 텍스트 부분이 보이실겁니다. 저 텍스트의 규칙을 분석하여 상품명, 금액, 수량을 분석하면 됩니다. 간단하죠?

for(var i = 0; i < texts.length; i++) {
  var text = texts[i];
  if(!text.match(/^[0-9,]+원/g)) {
    continue;
  }
  var goods = texts[i - 1];
  goods = goods.substring(0, goods.length / 2);
  var vals = text.split('/');
  console.log(vals[0], vals[1], goods);
}

이 방법은 매우 간편하지만 매우 취약합니다. 화면 컨텐츠에서 텍스트가 추가/삭제되거나 위치가 바뀌는것은 매우 흔한 일 이니까요. 이것보다는 HTML DOM을 파싱하는 것이 좋을것 입니다.

HTML 파싱

HTML파싱을 위한 div는 contenteditable="true" 속성을 주었습니다. div는 원래 편집가능한 요소가 아니지만 저 속성으로 인해 편집이 가능한 속성이 됩니다. 붙여넣기 이벤트가 발생하는것으로 끝나지 않고 실제로 HTML요소에 붙여넣기가 되죠.

텍스트 파싱할때와 마찬가지로 paste 이벤트를 등록합니다.

$('#div2').on('paste', function() {
  var $this = $(this);
  $this.text('');
  var pasteObj = (event.clipboardData || window.clipboardData);
  try {
    parse(pasteObj.getData('text/html'));
  }
  catch(e) {
    setTimeout(function() {
      parse($this.html());
    }, 100);
  }
});

클립보드로 부터 데이터를 가져오는 부분은 동일하지만 파라미터 값으로 'text/html'을 주었습니다. 그래야만 HTML 데이터를 가져올수 있습니다. 하지만 익스플로러11 같은 낮은 버전의 브라우저에서는 pasteObj.getData('text/html') 을 사용할수 없습니다. 에러가 발생하죠. 그 경우엔 DOM에서 가져오도록 예외처리 했습니다. paste 이벤트가 발생한 시점에 div 요소에 복사가 됐음을 보장 못하므로 약간의 유예 시간이 필요합니다. 그것을 위한 100밀리초 지만 환경에 따라 시간을 조정해야 할수도 있습니다.

어쨌든 HTML을 가져오게 되면 그 다음부턴 간단합니다. 태그, 클래스 등으로 구조적으로 필요한 데이터를 가져올수 있습니다. 문자열을 파싱하는것보다 복잡해 보이지만 유지보수 측면에선 이편이 훨씬 낫습니다.

function parse(html) {
  var items = $(html).find('.my-order-unit__item-info');
  items.each(function() {
    var $this = $(this);
    var goods = $this.find('strong:not(.my-color--refurbished)').text();
    var vals = $this.find('.my-order-unit__info-ea ').text().split('/');
    console.log(vals[0], vals[1], goods);
  });
}

정리

이 방법은 일반적으로 사용되진 않겠지만 어떤 특수한 경우엔 매우 유용할수 있습니다. paste 이벤트, DataTransfer 두 가지만 알고있으면 필요할때 이용할수 있겠네요.

1번 방식은 편집 불가능한 div에 paste 이벤트를 등록했는데, 이것은 익스플로러에선 이벤트가 발생하지 않을수 있습니다. 그경우 편집 가능하도록 속성을 추가하거나 input, textarea 등의 요소를 이용하면 됩니다.

최종 샘플

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
div { width: 700px; height:200px; border:1px solid black; overflow: hidden; }
</style>
</head>
<body>
  <div id="div1">텍스트 분석 방식</div>
  <div id="div2" contenteditable="true">HTML 분석 방식</div>
<script>
$('#div1').on('paste', function() {
  var pasteObj = (event.clipboardData || window.clipboardData);
  var texts = pasteObj.getData('text').split('\n');
  console.log(pasteObj.getData('text'));
  for(var i = 0; i < texts.length; i++) {
    var text = texts[i];
    if(!text.match(/^[0-9,]+원/g)) {
      continue;
    }
    var goods = texts[i - 1];
    goods = goods.substring(0, goods.length / 2);
    var vals = text.split('/');
    console.log(vals[0], vals[1], goods);
  }
});
$('#div2').on('paste', function() {
  var $this = $(this);
  $this.text('');
  var pasteObj = (event.clipboardData || window.clipboardData);
  try {
    parse(pasteObj.getData('text/html'));
  }
  catch(e) {
    setTimeout(function() {
      parse($this.html());
    }, 100);
  }
});
function parse(html) {
  var items = $(html).find('.my-order-unit__item-info');
  items.each(function() {
    var $this = $(this);
    var goods = $this.find('strong:not(.my-color--refurbished)').text();
    var vals = $this.find('.my-order-unit__info-ea ').text().split('/');
    console.log(vals[0], vals[1], goods);
  });
}
</script>
</body>
</html>

티스토리 스킨별 다이나믹 배너 적용 위치

이의있소 — Fri, 27 Mar 2020 10:26:48 +0900

관련지식
javascript, coupang partners

앞서 ‘티스토리 스킨에 쿠팡 파트너스 광고(다이나믹 배너) 적용하기‘ 글에서 쿠팡 파트너스의 다이나믹 배너를 적용하는 방법을 소개드렸었는데, 스킨별로 위치나 적용 방법 차이가 많이 차이나는것 같습니다.

확인이 필요한 스킨을 댓글달아주시면 확인 후 추가하도록 하겠습니다.

whatever 스킨

whatever 스킨의 경우 특이하게도 적용하고 실제 블로그로 봐야지만 변경된것을 확인할수 있네요. ‘스킨편집’ 화면의 좌측에 보이는 내용에선 수정된것이 반영 안됩니다. 아래 HTML 부분을 찾아서 타이틀 윗부분, 타이틀 아래부분, 본문 아래부분 이라고 적은 위치에 소스를 추가하고 적용하시면 됩니다. whatever 스킨의 230번째줄 정도에 있는 항목이 게시글의 본문 부분입니다.

  </div>
</s_index_article_rep>
<s_permalink_article_rep>
<!-- 타이틀 윗부분 -->
  <div class="hgroup">
    <div class="category"></div>
    <h1> </h1>
    <div class="post-meta">
      <span class="author"></span>
      <span class="date"></span>
      <s_ad_div>
        <span><a href="">수정</a></span>
        <span><a href="#" onclick="[##_s_ad_d_onclick_##]">삭제</a></span>
      </s_ad_div>
    </div>
  </div>
<!-- 타이틀 아래부분 -->
  <div class="entry-content">
    
  </div>
<!-- 본문 아래부분 -->
  <s_tag_label>
    <div class="tags">

예를들어 이렇게 수정하면 되겠죠?

  </div>
</s_index_article_rep>
<s_permalink_article_rep>
<!-- 타이틀 윗부분 -->
  <div class="hgroup">
    <div class="category"></div>
    <h1> </h1>
    <div class="post-meta">
      <span class="author"></span>
      <span class="date"></span>
      <s_ad_div>
        <span><a href="">수정</a></span>
        <span><a href="#" onclick="[##_s_ad_d_onclick_##]">삭제</a></span>
      </s_ad_div>
    </div>
  </div>
<script src="https://ads-partners.coupang.com/g.js"></script>
<script>
  new PartnersCoupang.G({ id:아이디 });
</script>
  <div class="entry-content">
    
  </div>
<!-- 본문 아래부분 -->
  <s_tag_label>
    <div class="tags">

숫자 입력을 위한 핀패드(PIN Pad)를 만들어봤습니다.

이의있소 — Wed, 25 Mar 2020 13:28:01 +0900

관련지식
javascript, jquery, pinpad, keypad

요즘 스마트폰에서 금융권앱/쇼핑몰앱 등을 이용하다보면 영문이나 숫자를 입력하는 가상 키패드를 쉽게 볼수 있습니다. 그러한 가상키패드는 주로 보안을 목적으로 사용되지만, 숫자만 입력하거나 고정된 형태의 입력값을 받을때도 제법 유용합니다.
예를들어 은행 창구에서 직원이 계좌비밀번호를 입력하라고 할때 사용하는 기기를 핀패드라고 합니다. 만약 핀패드가 아니라 키보드를 주면서 입력하라고 하면 무엇을 눌러야 할지 곤란할수도 있을것 같네요.

최근 웹화면에서 숫자만 입력하는 필드가 필요했는데 금액이 아니어서 <input type="number"> 태그만으로는 처리가 좀 애매했습니다. 그래서 가상키패드를 좀 찾아봤는데 스마트폰에서 사용하기엔 디자인이 만족스럽지 않았습니다.(손으로 터치 해야 하는데 키패드 사이즈가 너무 작은…) Framework7에서 제공하는 키패드는 상당히 만족스러웠습니다. 데스크탑용으로도 쓸수 있고 스마트폰 용에도 적합한 인라인 숫자패드도 있었으니까요. 데모
하지만 Framework7에 종속적이고 공통 CSS가 개발중인 웹페이지의 CSS에 충돌되는 부분이 너무 많아서 쓸수가 없겠더군요. 그래서 그냥 만들었습니다.

다운로드 : https://github.com/sub0709/pinpad
참고 : 현재 JQuery 종속성있음

기본 기능

사용법은 간단합니다. 적용하고 싶은 인풋 필드가 있다면 해당 태그의 셀렉터만 적어주면 됩니다.

<input type="text" id="pin1" />
<script>
new pinpad({
  ref : {
    el : '#pin1'
  }
});
</script>

PC처럼 큰 화면에선 아래와 같이 보일것입니다.

버튼 수정

삭제/입력완료 버튼이 영어로 보여서는 모양새가 영 보기 안좋죠. letterReplace를 이용하여 다른 모양으로 대체할수 이습니다. keypads로 버튼의 순서도 재정의 가능하고 버튼의 높이height도 수정할수 있습니다.

new pinpad({
  ref : {
    el : '#pin2'
  },
  height : 45,
  keypads : [ 4, 3, 6, 0, 8, 9, 'done', '.', 'del'],
  letterReplace : {
    'del' : '<i class="fa fa-long-arrow-left" data-toggle="tooltip" title="fa fa-long-arrow-left"></i>',
    'done' : '<i class="fa fa-check" data-toggle="tooltip" title="fa fa-check"></i>',
    4 : '<i class="fa fa-foursquare" data-toggle="tooltip" title="" data-original-title="fa fa-foursquare"></i>'
  },
});

포맷팅

format 을 정의하여 입력값을 포맷팅해서 보여줄수 있습니다. 입력중인 사용자에게 참고용으로 매우 좋죠. useFormat 속성을 지정하면 화면에 보이는 값 그대로 입력필드에 전달해줍니다.

new pinpad({
  ref : {
    el : '#pin3',
    useFormat : true
  },
  format : '**/**'
});

만약 핸드폰번호를 입력한다면 format값에 ‘***-****-****‘ 을 적어주면 됩니다.

스킨 변경

핀패드는 기본 스킨외에 gray, blue 스킨이 있습니다. 디자인을 모르는 제가 마음대로 만들어서 예쁘진 않지만 그나마 덜 못난거를 고르시면 됩니다. skin 값에 원하는 스킨을 적으시면 됩니다. 그리고 계좌번호 같이 고정된 길이의 비밀번호는 입력완료 버튼을 사용할 필요없이 숫자 네자리를 입력받자마자 자동으로 적용되길 원할수 있습니다. passcode를 설정하면 화면에서 숫자가 보이지 않습니다. maxLength로 입력값 길이를 제한하고, immediate를 true로 하면 됩니다.

new pinpad({
  ref : {
    el : '#pin4'
  },
  skin : 'gray',
  passcode : true,
  immediate : true,
  maxLength : 4,
  desc : '숫자4자리를 입력하세요',
  letterReplace : {
    'del' : '<',
    'done' : 'V'
  }
});

독립 실행

입력필드 요소에 연결하지 않고 수동으로 처리할수도 있습니다. 버튼을 클릭했을때 실행하거나, 화면에 입력폼은 없고 로직에 의해서만 핀패드를 실행하는 경우죠.
핀패드를 생성하고 show() 함수를 호출하면 됩니다. 입력된 값은 oncomplete 함수를 정의하면 받을수 있습니다.

var pin5 = new pinpad({
  oncomplete : function(value) {
    alert(value);
  },
  passcode : true
});
pin5.show();

배열변경

기본적으로는 3열 핀패드를 제공하지만 4열, 5열 핀패드까지 동작합니다. mode값을 x4 또는 x5로 지정하면 됩니다.

new pinpad({
  ref : {
    el : '#pin6'
  },
  skin : 'blue',
  mode : 'x4'
});

만약 보안키패드처럼 랜덤한 공간에 공백 버튼을 두고 싶다면 setRandomSpaceCount 속성으로 필요한 공백버튼의 개수를 지정하면 됩니다. 공백버튼의 개수에 따라 키패도 높이가 더 높아지겠죠. 앞에 소개한 height 속성으로 버튼 높이를 적절히 줄이면 좋습니다.

new pinpad({
  ref : {
    el : '#pin7'
  },
  skin : 'gray',
  mode : 'x5',
  setRandomSpaceCount : 8
});

개선과제

지금 당장 중요한 부분이 아니라서 그냥 넘겼지만 개선해야 할 부분들이 좀 있습니다. 일단 사용하면서 조금씩 보완해야 할것 같습니다. (누가 대신 해주시면 좋겠네요 ㅎㅎ)

JQuery 의존성 제거
Cancel 버튼 추가
보안 기능 강화
포맷팅 기능 강화
퍼블리싱 개선

무료 Datatables Editor 소개

이의있소 — Fri, 20 Mar 2020 13:53:26 +0900

관련지식
javascript, jquery, Datatables, editor

Datatables를 사용하면서 수정 기능이 필요하게 되었습니다. 역시 가장 좋은 기능은 https://editor.datatables.net/ 이것으로 생각되지만 유료 라이센스라는게 문제네요. 어차피 많은 기능이 필요하지 않으므로 사용하기 간단하게 만들어보았습니다. 아래와 같은 인라인 에디터 입니다.

기존 로직을 영향없이 사용할수 있다는게 가장 큰 장점인것 같고 아직 기능이 많지 않다는것이 단점이겠네요. 간단하게 쓰실분만 추천합니다. JQuery와 Datatables에 의존성있습니다.

다운로드
https://github.com/sub0709/datatable-editor

기본 사용방법

생성 옵션은 다르겠지만 보통 아래와 같은 형태로 데이터테이블을 생성하실 것입니다.

var table1 = $('#userTable').DataTable({
  dom : 'Bfrtip',
  data : [{"aaa":"아이유","bbb":"분홍신","ccc":1584341626075,"ddd":10},{"aaa":"반하나","bbb":"우리","ccc":1584341616075,"ddd":10},{"aaa":"이예준","bbb":"미친소리","ccc":1584341626375,"ddd":10},{"aaa":"박혜원","bbb":"봄의발라드","ccc":1584341526075,"ddd":10}],
  columns : [
    {data : 'aaa'},
    {data : 'bbb'},
    {data : 'ccc'},
    {data : 'ddd'}
  ]
});

만약 0번째 컬럼을 수정 가능하도록 하고 싶다면 단지 아래처럼 추가로 코딩을 하면 됩니다.

var table1 = $('#userTable').DataTable({
  dom : 'Bfrtip',
  data : [{"aaa":"아이유","bbb":"분홍신","ccc":1584341626075,"ddd":10},{"aaa":"반하나","bbb":"우리","ccc":1584341616075,"ddd":10},{"aaa":"이예준","bbb":"미친소리","ccc":1584341626375,"ddd":10},{"aaa":"박혜원","bbb":"봄의발라드","ccc":1584341526075,"ddd":10}],
  columns : [
    {data : 'aaa'},
    {data : 'bbb'},
    {data : 'ccc'},
    {data : 'ddd'}
  ]
});
datatableEdit({
  dataTable : table1,
  columnDefs : [
    {
      targets : 0
    }
  ]
});

이제 0번째 컬럼에 있는 셀을 클릭하면 텍스트필드로 바뀔것이고 Enter키를 입력하면 수정됩니다. ESC키를 입력하거나 다른 영역을 클릭하면 수정된 내용은 취소 됩니다.

다중 테이블 적용

아래처럼 클래스를 이용하여 여러개의 테이블을 생성했을수도 있습니다.

var tables = $('.table').DataTable();

상관없습니다. 사용법은 동일합니다. 아래처럼 호출하면 여러 테이블의 0번째 컬럼이 수정가능하도록 변경됩니다.

datatableEdit({
  dataTable : tables,
  columnDefs : [
    {
      targets : 0
    }
  ]
});

수정 이벤트

값이 수정되었을때 URL을 호출해서 DB를 업데이트 하던가 또는 다른 기능을 하고 싶을수 있습니다.

onEdited 함수를 정의하면 해당 셀의 변경 전/후의 값, 위치, DataTable의 Cell정보를 콜백받을수 있습니다. Cell정보를 통하여 Row 데이터등에 접근할수도 있습니다.

datatableEdit({
  dataTable : table1,
  columnDefs : [
    {
      targets : 0
    },
    {
      targets : 2
    },
    {
      onEdited : function(prev, changed, index, cell) {
        console.log('4444444444');
        console.log(prev, changed, index, cell);
      },
      targets : 3
    },
  ]
});

만약 모든 셀의 에디팅 후 기능이 동일하다면 onEdited 함수를 하나만 정의하면 됩니다.

datatableEdit({
  dataTable : table1,
  columnDefs : [
    {
      targets : 0
    },
    {
      targets : 2
    },
    {
      targets : 3
    }
  ],
  onEdited : function(prev, changed, index, cell) {
    console.log(prev, changed, index, cell);
  }
});

NoSQL 에서 중복되지 않는 조회수와 좋아요 만들기

이의있소 — Tue, 17 Mar 2020 16:07:56 +0900

관련지식
nosql, scheme, nedb, mongodb

요즘 계속 만들고 있는게 있어서 블로그에 신경을 못쓰고 있었네요. 요즘 NeDB를 매우 많이 쓰고 있어서 RDB와는 다른 NoSQL의 설계 특징을 이야기해보려고 합니다.

웹페이지를 만들면 게시판이 빠지지 않고, 게시판에는 대부분 조회수와 좋아요 기능이 있을것 입니다. ‘조회수’와 ‘좋아요’ 기능이 모든 게시판마다 동일한 기능을 가질 필요는 없겠지만 ‘좋아요’ 는 일반적으로 동일게시물에 대해 한 사용자가 한번만 할수있도록 만들것입니다. ‘조회수’도 한번만 카운트 되도록 만들거나 또는 중복조회 상관없이 계속 카운트를 할것입니다.
오라클과 같은 RDB였다면 별도의 테이블에 게시물ID, 사용자ID를 추가하여 JOIN 함으로써 조회/좋아요의 유무를 판단하겠지만 NoSQL에서는 어떻게 할까요? MongoDB의 경우는 JOIN이 가능하긴 하지만 절대 정답이 아닙니다. 아래 예제에선 NeDB를 기준으로 하지만 워낙 직관적인 소스라 MongoDB를 사용하는 분도 보는데 문제 없으실겁니다.

좋아요 스키마 설계

좋아요가 있는 게시물이 아래와 같은 스키마를 가진다고 가정합니다.

{
  _id : '029a83bae8re9',
  title : '제목입니다.',
  body : '본문입니다.',
  likeCount : 3
}

위 스키마를 본다면 현재 몇명이 좋아요 했는지는 알수 있습니다. 하지만 누가 좋아요를 했는지는 알수 없기 때문에 좋아요 했던 사람이 더더 좋아요를 할수 있겠죠? 따라서 스키마에는 좋아요를 한 사용자를 포함해야 합니다. 아래 스키마는 ‘좋아요’를 한 사용자가 user1, user2, user4 이라는것을 나타냅니다.

{
  _id : '029a83bae8re9',
  title : '제목입니다.',
  body : '본문입니다.',
  likeCount : 3,
  like_users : {
    user1 : true,
    user2 : true,
    user3 : false,
    user4 : true
  }
}

주의해야 할것은 like_users가 배열이 아니라는 것입니다. like_users를 배열로 구성할 경우 본인의 아이디가 있는지 loop를 돌면서 체크해야 하기 때문에 속도가 느려집니다. true 대신 좋아요를 했던 시간을 저장할수도 있지만 크게 중요하진 않습니다.

이제 게시물을 조회할때 like_users에 본인 아이디로 true값이 있으면 ‘좋아요’를 한 상태인것을 표시할수 있습니다.

자, 이제부터 시작입니다. 그럼 만약 user5가 좋아요를 누른다면 likeCount의 값을 4로 바꾸고 like_users에 값이 추가되어야 합니다. RDB에 익숙한 분은 먼저 SELECT를 한번 해서 값을 가져오고 +1된 값과 user5로 UPDATE 하는것으로 생각하실수 있습니다. 하지만 NoSQL에선 그냥 UPDATE 하면 됩니다.

let tmp = `like_users.${user}`;
let obj1 = {
  _id : doc._id  //게시물 아이디
};
let obj2 = {};
obj1[tmp] = {$ne : true};  //like_users.user5 가 true가 아닐 경우
obj2[tmp] = true;
db.update(obj1, { 
  $inc: { likeCount: 1} ,
  $set: obj2 
}, {}, function (err, numReplaced) {   // Callback is optional
  console.log(err, numReplaced);
});

실제로 검색 조건이 되는 객체는 아래와 같은 값이 될것입니다.

{
  _id : '029a83bae8re9',
  like_users : {
    user5 : { $ne : true }  //좋아요를 한 상태가 아닐경우
  }
}

이미 좋아요가 된 상태라면 검색조건에서 매칭이 안되기 때문에 업데이트를 하지 않습니다. 업데이트를 해야할 경우엔 likeCount 기존값이 무엇이든 상관없이 1 증가하면서 { user5 : true } 를 세팅하게 됩니다. SELECT-UPDATE의 과정없이 단 한번의 실행으로 모두 처리할수가 있습니다. MongoDB도 $inc, $set과 같은 기능을 제공하므로 동일한 구현이 가능합니다.

방문자 카운트 설계

처음엔 조회수를 언급했지만 좋아요와 거의 동일한 구조이므로, 조금 다른 방문자 카운트를 설계해보겠습니다. 물론 중복 카운트는 허용하지 않죠. 매일 매일의 방문자 카운트를 위한 스키마는 아래와 같습니다.

{
  _id:"rm2ODlGRBNOSqnWu",
  date:"20200317",
  count:2,
  view_user:{
    user1:true,
    user2:true
  }
}

새로운 사용자가 방문했을때 count 값을 증가시키고 view_user 에 추가하는 것은 좋아요와 동일합니다. 그런데 날짜가 바뀌고 처음 방문자가 생길때 해당 날짜로 된 데이터가 있을까요?
좋아요는 게시물 데이터가 존재하는 상태에서 발생하지만, 방문자수는 그렇지 않습니다. 첫방문시엔 해당날짜로 만들어진 데이터가 없죠. 따라서 날짜가 바뀌면 자동으로 기본데이터를 insert를 하는 스케쥴러를 만들거나, 방문자수를 증가시키기 전에 무조건 insert를 하는 로직을 생각할수도 있습니다. date를 인덱스키로 지정하고 중복 insert할때 발생하는 오류는 무시하면 되니까요. 하지만 그럴 필요는 없습니다.

let tmp = `view_user.${user}`;
let obj1 = {
  date : '20200317',
};
obj1[tmp] = {$ne : true};
let obj2 = {};
obj2[tmp] = true;
db.update(obj1, {
  $inc : { count : 1 },
  $set : obj2
}, {
  upsert: true
}, function(err, replaced) {
  console.log(err, replaced);
});

설명이 필요없을 정도로 거의 모든 로직이 좋아요와 동일하죠. 딱 한가지 다른점은 upsert 입니다. RDB에선 SELECT 후 기존 데이터가 없으면 INSERT, 있으면 UPDATE를 하는 형태로 만들어야 하지만 NoSQL에선 upsert 하나로 해결할수 있습니다. 첫 방문자의 경우 INSERT가 되고 그 다음 방문자부터는 UPDATE를 하게 됩니다. upsert 기능은 보통 별도 함수나 옵션으로 제공되므로 사용하시는 NoSQL의 문서를 찾아보시면 되겠습니다.

함수 실행 조건 판단의 역전

이의있소 — Thu, 5 Mar 2020 10:40:31 +0900

관련지식
node.js, javascript, promise, async

오늘 쓸 내용에 대한 별도의 정의가 있는지 몰라서 제 마음대로 이름을 붙이다보니 뭔가 거창한 이름이 되었네요. 오늘은 오랜만에 코딩 스타일에 대해 적어봅니다.

문제

얼마전 친한 동생으로부터 node.js 개발에 대한 질문이 하나 있었습니다. 상황은 아래와 같았습니다.

어떤 비동기함수 A를 호출해서 응답받은 결과값에 따라 동기함수 B와 비동기함수 C와 D가 하나만 실행되거나 같이 실행됨. 그리고 모든 실행이 끝나면 E 함수를 호출해야함. 그런데 결과값에 따른 함수 B/C/D 호출을 열거하기가 싫음. B/C/D 함수간에 상관관계는 없으므로 실행 우선순위는 없음

일단 비동기, 동기 함수 여부를 떠나서 수도코드로 정리하면 대충 아래와 같은 상황이겠죠.

ret = A()
if(ret == 1)
  B()
else if(ret == 2)
  B()
  C()
else if(ret == 3)
  C()
  D()
else if(ret == 4)
  C()
else
  ...
E()

함수 호출에 대한 모든 케이스를 열거해야 하지만 케이스별로 실행할 로직이 명확하게 구분되기 때문에 나쁜 방법은 아닙니다. 그런데 C와 D함수는 비동기함수라는 것이 걸리네요. 노드에서 비동기함수를 실행할때 주로 사용하는것은 콜백함수, Promise, async/await 가 있는데 여기선 어떤 방법이 좋을까요? 아마 동생은 이런 구조가 떠올라서 질문한것 같습니다.

ret = A()
if(ret == 1)
  B()
  E()
else if(ret == 2)
  B()
  C(function() {
    E()
  })
else if(ret == 3)
  C(function() {
    D(function() {
      E()
    })
  })
...

await 를 썼다면 좀 나았겠네요.

ret = A()
if(ret == 1)
  B()
else if(ret == 2)
  B()
  await C()
else if(ret == 3)
  await C()
  await D()
...
E()

문제파악

위 상황에서 중요한 포인트를 뽑아볼까요?

A함수의 결과값에 따라 B/C/D 가 실행되어야 하고 마지막에 E가 실행되야함
B/C/D 함수끼리 실행 순서 상관없음

C와 D함수가 비동기함수라는 것은 사실 별로 중요하지 않습니다. 가장 중요한것은 위의 두가지 조건이죠.

A함수의 결과값에 따라 호출해야 할 함수가 정해지죠. 결과값에 따른 호출 케이스가 굉장히 단순하거나 간단하면 if…else 나 switch…case 같은 조건식 없이 만들수도 있지만 조건이 다양하다면 조건식은 반드시 필요하게 됩니다. 그리고 조건식은 하드코딩을 요구하죠. 물론 조건식 이용해서 아래처럼 코딩해도 됩니다.

ret = A()
if(ret == 1)
  enableB = true;
else if(ret == 2)
  enableB = true;
  enableC = true;
else if(ret == 3)
  enableC = true;
  enableD = true;
...
if(enableB)
  B()
if(enableC)
  await C()
if(enableD)
  await D()
E()

함수 호출부는 한곳에 몰려 있으므로 이전 코딩보다는 조금 발전한것 같지만, 비동기함수의 장점을 살리지 못했고 전체 소스는 길어졌습니다. 가독성이 떨어지죠. 따라서 다른 방법으로 해결해야 하는데, 먼저 1번 포인트를 좀 바꿔보겠습니다. A함수의 결과값에 따라 B/C/D 함수를 호출하는것이 아니라 무조건 함수를 호출하면 어떨까요? 함수는 호출하지만 함수 안에서 실제적인 로직 실행을 하지 않는것입니다.

A함수의 실행후 B/C/D 함수 호출. 파라미터로 전달된 결과값에 따라 각 함수내 로직이 실행/미실행됨. 마지막에 E함수 호출

처음에 만들려고 했던 소스는 결과값을 기준으로 어떤 함수를 호출할지 결정하는것이지만, 지금 제시하는것은 일단 함수를 호출하고 호출된 함수에서 실제 로직을 수행할지 판단하는 것입니다. 비유하자면 결혼식때 회사 직원을 부를까 말까 고민하는 것이 아니라, 일단 청첩장을 주면 받은 사람이 갈까 말까 고민하는것이죠ㅎㅎ 그럼 호출하는쪽의 수도코드는 아래와 같은 형태가 될것입니다.

ret = A()
B(ret)
C(ret)
D(ret)
E()

그리고 2번 항목에서 실행 순서는 상관이 없다고 되어있습니다. 게다가 C와 D는 비동기함수다. 즉 두 함수를 한번에 실행해도 상관없다. 뭐 떠오르는거 없으신가요? Promise.all() 은 모든 Promise를 같이 실행하고, 모든 Promise가 끝나면 이벤트가 발생하죠. 이번 상황에서 매우 적절한 기능입니다.

소스구현

먼저 비동기함수로 동작하는 C함수를 구현해보겠습니다. Promise.all() 을 사용할 것이기 때문에 당연히 Promise 객체로 만들것입니다.

function C(a_ret) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve();
    }, 200);
  });
}

그런데 이렇게 만들면 C함수를 호출하는 족족 실행이 되겠죠? 파라미터에 따라 로직이 수행되지 않도록 수정해야 합니다. 2와 3일때만 실행하고 그외엔 실행하지 않게 만들어보겠습니다.

function C(a_ret) {
  return new Promise(function(resolve, reject) {
    if(a_ret != 2 && a_ret != 3) {  //2와 3이 아닐땐 로직을 수행하지 않는다. reject 아님
      resolve();
      return;
    }
    setTimeout(function() {
      resolve();
    }, 200);
  });
}

별로 어려운건 없습니다. 단지 if 구문을 하나 추가하면 되죠. 결국 조건값에 따라 로직을 수행하고 resolve 할것이냐, 수행하지 않고 resolve 할것이냐의 차이만 있을뿐입니다. D함수도 마찬가지겠죠?

B함수의 로직은 동기 로직이라고 했지만 상관없습니다. Promise에 동기 로직을 못쓸 이유는 없으니까요.

function B(a_ret) {
  return new Promise(function(resolve, reject) {
    if(a_ret != 1 && a_ret != 2) {  //1과 2가 아닐땐 로직을 수행하지 않는다. 
      resolve();
      return;
    }
    console.log('call B function');
    resolve();
  });
}

이렇게 B, C, D 함수가 만들어지면 아래와 같이 실행할수가 있습니다.

Promise.all(B(ret), C(ret), D(ret)).then(function(rets) {
  E();
});

처음에 생각했던 수도코드와 비교해볼까요?

ret = A()
if(ret == 1)
  B()
  E()
else if(ret == 2)
  B()
  C(function() {
    E()
  })
else if(ret == 3)
  C(function() {
    D(function() {
      E()
    })
  })
...

훨씬 간단하게 구현되었죠. 이렇게 실행 조건의 판단을 호출하는 쪽에서 하지 않고 호출 당하는 함수에서 하게 되면 로직이 간단하게 정리될수 있습니다. 공통으로 사용하는 공통함수를 만들때는 이런 형태로 많이 만드는데, 막상 비즈니스 로직을 구현할땐 생각하지 못하는것 같네요.

최종샘플

A와 E 함수는 생략되어있는데 크게 중요한 부분은 아니므로 A함수대신 정수값을, E함수 호출부분 대신 console.log() 를 사용하셔도 됩니다.

function B(a_ret) {
  return new Promise(function(resolve, reject) {
    if(a_ret != 1 && a_ret != 2) {  //1과 2가 아닐땐 로직을 수행하지 않는다. 
      resolve();
      return;
    }
    console.log('call B function');
    resolve();
  });
}
function C(a_ret) {
  return new Promise(function(resolve, reject) {
    if(a_ret != 2 && a_ret != 3) {  //2와 3이 아닐땐 로직을 수행하지 않는다. reject 아님
      resolve();
      return;
    }
    setTimeout(function() {
      resolve();
    }, 200);
  });
}
function D(a_ret) {
  return new Promise(function(resolve, reject) {
    if(a_ret != 1 && a_ret != 3) {  //1과 3이 아닐땐 로직을 수행하지 않는다. reject 아님
      resolve();
      return;
    }
    setTimeout(function() {
      resolve();
    }, 100);
  });
}
(async () => {
  const ret = A();
  Promise.all(B(ret), C(ret), D(ret)).then(function(rets) {
    E();
  });
})

DownloadStation 으로 유튜브를 다운로드(youtube-dl 2020.03.01)

이의있소 — Tue, 3 Mar 2020 13:18:16 +0900

관련지식
synology, download station, youtube-dl

youtube-dl이 업데이트가 되었습니다. youtube-dl를 클릭하여 최신 파일을 다운로드하고 아래 두가지 방법중 한가지를 선택하여 적용하시면 됩니다. 적용 후

‘/usr/bin/python /volume1/@appstore/DownloadStation/plugins/youtube/phpsrc/../youtube-dl —version’ 명령어를 입력했을때 버전 날짜가 2020.03.01 이면 잘 적용된 것입니다.

$ /usr/bin/python /volume1/@appstore/DownloadStation/plugins/youtube/phpsrc/../youtube-dl --version
2020.03.01

파이썬2에서 리다이렉션 부분이 수정된것 같습니다. 크게 중요한 업데이트는 아닐것 같지만 어쨌든 유튜브와 관련된 부분이 바뀌었네요. xhamster는 얼마전에 대구 지역에 서비스를 무료로 하겠다고 말했던 외국의 그 업체가… 맞죠?;;

version 2020.03.01
Core
* [YoutubeDL] Force redirect URL to unicode on python 2
- [options] Remove duplicate short option -v for --version (#24162)
Extractors
* [xhamster] Fix extraction (#24205)
* [franceculture] Fix extraction (#24204)
+ [telecinco] Add support for article opening videos
* [telecinco] Fix extraction (#24195)
* [xtube] Fix metadata extraction (#21073, #22455)
* [youjizz] Fix extraction (#24181)
- Remove no longer needed compat_str around geturl
* [pornhd] Fix extraction (#24128)
+ [teachable] Add support for multiple videos per lecture (#24101)
+ [wistia] Add support for multiple generic embeds (#8347, 11385)
* [imdb] Fix extraction (#23443)
* [tv2dk:bornholm:play] Fix extraction (#24076)

적용방법

첨부한 파일을 다운로드하여 시놀로지 나스의 적당한 위치에 업로드 합니다. 그리고 shell로 접속하여 아래 둘중에 한가지 방법을 선택해서 진행하시면 됩니다. 파일을 /volume1/tmp 디렉토리에 업로드 했다고 가정하고 만들어진 명령어 입니다.

심볼릭링크 사용

#root로 사용자 변경
sudo -i
#원본파일 백업
mv /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl_bak
#실행권한 추가
chmod +x /volume1/tmp/youtube-dl
#심볼릭링크 생성
ln -s /volume1/tmp/youtube-dl /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl

작업후 ‘ls -al /volume1/@appstore/DownloadStation/plugins/youtube’ 했을때 아래와 같이 보이면 정상입니다.

파일복사

#root로 사용자 변경
sudo -i
#원본파일 백업
cp /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl_bak
#실행권한 추가
chmod +x /volume1/tmp/youtube-dl
#파일 복사
cp -f /volume1/tmp/youtube-dl /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl

작업후 ‘ls -al /volume1/@appstore/DownloadStation/plugins/youtube’ 했을때 아래와 같이 보이면 정상입니다.

이제 원래 버전에서 다운로드가 안되는 유튜브가 있었다면, 위 작업후 다시 진행해보시면 됩니다.

DownloadStation 으로 유튜브를 다운로드(youtube-dl 2020.02.16)

이의있소 — Mon, 17 Feb 2020 13:11:48 +0900

관련지식
synology, download station, youtube-dl

‘/usr/bin/python /volume1/@appstore/DownloadStation/plugins/youtube/phpsrc/../youtube-dl —version’ 명령어를 입력했을때 버전 날짜가 2020.02.16 이면 잘 적용된 것입니다.

$ /usr/bin/python /volume1/@appstore/DownloadStation/plugins/youtube/phpsrc/../youtube-dl --version
2020.02.16

이번에는 유튜브에서 플레이리스트 목록과 관련된 부분이 변경된것 같습니다. 그에 대한 수정 반영이 있으므로 원활한 다운로드를 위해서 이번 버전은 꼭 적용하는것이 좋을듯 합니다.

version 2020.02.16
Core
* [YoutubeDL] Fix playlist entry indexing with --playlist-items (#10591,
  #10622)
* [update] Fix updating via symlinks (#23991)
+ [compat] Introduce compat_realpath (#23991)
Extractors
+ [npr] Add support for streams (#24042)
+ [24video] Add support for porn.24video.net (#23779, #23784)
- [jpopsuki] Remove extractor (#23858)
* [nova] Improve extraction (#23690)
* [nova:embed] Improve (#23690)
* [nova:embed] Fix extraction (#23672)
+ [abc:iview] Add support for 720p (#22907, #22921)
* [nytimes] Improve format sorting (#24010)
+ [toggle] Add support for mewatch.sg (#23895, #23930)
* [thisoldhouse] Fix extraction (#23951)
+ [popcorntimes] Add support for popcorntimes.tv (#23949)
* [sportdeutschland] Update to new API
* [twitch:stream] Lowercase channel id for stream request (#23917)
* [tv5mondeplus] Fix extraction (#23907, #23911)
* [tva] Relax URL regular expression (#23903)
* [vimeo] Fix album extraction (#23864)
* [viewlift] Improve extraction
    * Fix extraction (#23851)
    + Add support for authentication
    + Add support for more domains
* [svt] Fix series extraction (#22297)
* [svt] Fix article extraction (#22897, #22919)
* [soundcloud] Imporve private playlist/set tracks extraction (#3707)

적용방법

심볼릭링크 사용

#root로 사용자 변경
sudo -i
#원본파일 백업
mv /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl_bak
#실행권한 추가
chmod +x /volume1/tmp/youtube-dl
#심볼릭링크 생성
ln -s /volume1/tmp/youtube-dl /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl

작업후 ‘ls -al /volume1/@appstore/DownloadStation/plugins/youtube’ 했을때 아래와 같이 보이면 정상입니다.

파일복사

#root로 사용자 변경
sudo -i
#원본파일 백업
cp /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl_bak
#실행권한 추가
chmod +x /volume1/tmp/youtube-dl
#파일 복사
cp -f /volume1/tmp/youtube-dl /volume1/@appstore/DownloadStation/plugins/youtube/youtube-dl

작업후 ‘ls -al /volume1/@appstore/DownloadStation/plugins/youtube’ 했을때 아래와 같이 보이면 정상입니다.

이제 원래 버전에서 다운로드가 안되는 유튜브가 있었다면, 위 작업후 다시 진행해보시면 됩니다.

[nginx] Upstream prematurely closed connection while reading upstream

이의있소 — Fri, 14 Feb 2020 13:34:09 +0900

관련지식
nginx

대용량 파일이 정상적으로 다운로드 안되는 증상이 있었습니다. 예를들어 5GB 용량의 파일을 받으려고 하는데 1GB쯤 다운로드 되었을때 커넥션이 끊겨 버리는거죠. 그때 nginx의 에러로그에 ‘Upstream prematurely closed connection while reading upstream’ 와 같은 메시지가 있었는데 buffering 설정을 해제하니까 해결되었습니다.

proxy_request_buffering off;
proxy_buffering off;

설명을 보면 버퍼를 비활성화하면 응답할 데이터를 클라이언트에 바로 전달한다는 뜻 같은데, 그럼 버퍼를 활성화 하면 임시 버퍼에 가지고 있다가 클라이언트로 전달할것 같네요… 동일 리소스를 재사용할때를 위한걸까요?

나스 앞에 Nginx를 두고 사용한다면 반드시 확인해야할 설정이네요.

크롬 85버전 UserAgent 지원 중단 이슈

이의있소 — Wed, 12 Feb 2020 13:24:29 +0900

관련지식
chrome, useragent, client hints

최근 크롬에서 SameSite 정책 변경에 이어 다음 차례로 UserAgent 지원을 중단할 예정입니다. 웹개발자라면 적어도 한번쯤은 접해봤을 UserAgent 데이터는 아래와 같습니다.

Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36

보다시피 운영체제의 버전이나 브라우저의 버전까지 알수 있는데 구글에선 정보가 너무 많고 복잡하다고 판단한것 같습니다. 따라서 단계적으로 값을 통합하는 작업을 하고 UserAgent 대신 Client Hints 로 대체한다고 하네요. 다른 브라우저의 구체적인 작업 계획은 모르겠지만 최신 브라우저는 아마도 이 정책을 따라가게 될것 같습니다. 당연히 인터넷 익스플로러는 변경되지 않을것이므로 이에 대한 처리 방법은 각자 판단하시면 딥니다.

기사 : https://www.zdnet.com/article/google-to-phase-out-user-agent-strings-in-chrome/

Client Hints : https://wicg.github.io/ua-client-hints/

UserAgent 지원 중단에 따라 점검해야 하는 항목은 대충 아래와 같습니다.

브라우저 체크 로직
운영체제 체크 로직
UserAgent를 이용한 통계 수집

1,2번은 웹개발자가 쉽게 떠올릴수 있는 범위지만 3번은 웹시스템과는 다른 별도의 어플리케이션으로 동작하는 경우가 많으므로 빠트리기 쉬운 부분입니다. 특히 UserAgent를 단순히 다른 방법으로 제공하는것 뿐 아니라 값의 유형도 단순화 될것으로 생각되므로, 업무 로직도 체크해 보셔야 할 것입니다. 예를들어 기존에 스마트폰의 모델정보도 취급하고 있었다면 이후에는 업무에서 모델에 관한 부분은 빼야할지도 모릅니다. 크롬 베타 81버전이 나오면 좀더 확실해지겠네요.