node와 npm 버전을 최신으로 전부 올렸다가 기존 프로젝트가 실행되지 않아 노드 버전을 다시 내려야 하는 상황이 왔습니다. 1시간 삽질 덕에 아래와 같이 정리합니다.

Node 버전 확인

$ node -v

Cache 삭제

$ sudo npm cache clean --force

n 플러그인 설치

n은 node의 버전을 관리해주는 플러그인입니다. 해당 플러그인이 있으면 노드 버전을 변경할 때, 해당 노드 삭제가 아닌 사용할 버전선택이라는 간편함이 있으니 설치해줍니다.

$ sudo npm install -g n

최신 버전 설치

$ n latest

stable 버전 설치

$ n stable

LTS 버전 설치

$ n lts

특정 버전 설치

n 다음 특정 버전을 입력하여 설치하여 줍니다.

$ n 5.6.0
$ n 8.11.1
$ n 11.4.0

node 버전 변경하기

node의 버전이 여러개일 경우, 간단하게 n 을 입력하고 사용할 버전을 선택한 후, 엔터를 입력하면 됩니다.

$ n
  o node/5.6.0
    node/8.11.1
    node/11.4.0

버전 특정 버전 삭제 / 현재 버전 외 전체 버전 삭제

아래 명령어를 통해 특정 버전 또는 현재 선택된 버전 외 모든 버전을 삭제할 수 있습니다.

-- 특정 버전 삭제
$ n rm 0.9.4 v0.10.0
$ n - 0.9.4
-- 현재 선택된 버전 외 전체 버전 삭제
$ n prone


  1. 2019.05.29 10:56

    비밀댓글입니다

두 줄 이상의 말줄임이 필요한 경우 CSS만으로는 처리가 불가능합니다. 따라서 자바스크립트에서 처리를 해줘야 합니다.

HTML

<div class="box box--fixed one-line">
  1. Forcing one line regardless
</div>
<div class="box box--fixed two-lines">
  2. Forcing two lines of text regardless of overflow
</div>
<div class="box box--fixed overflow">
  3. Trying to ellipsis any overflowed content. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.
</div>
<div class="box box--fixed overflow">
4. 이건 테스트다. 글씨가 어떻게 나올지는 나도 모르겠다. 더이상 쓸 말이 없다. 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기
</div>
<div class="box box--responsive">
5. This is a responsive box that will update it's ellipsis when the screen resizes. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. This is a responsive box that will update it's ellipsis when the screen resizes.
  The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. This is a responsive box that will update it's ellipsis when the screen resizes. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped
  over the lazy dogs. This is a responsive box that will update it's ellipsis when the screen resizes. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.
</div>

CSS

  body {
   padding: 1%;
 }
 
 .box {
   height: 4.5em;
   background: #eee;
   border: 1px solid #ccc;
   padding: 0.5em 1em;
   margin-right: 30px;
   margin-bottom: 30px;
   overflow: hidden;
   float: left;
 }
 
 .box--fixed {
   width: 140px;
 }
 
 .box--responsive {
   width: 30%;
 }
 /* necessary plugin styles */
 
 .ellip {
   display: block;
   height: 100%;
 }
 
 .ellip-line {
   display: inline-block;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: normal;
 }
 
 .ellip,
 .ellip-line {
   position: relative;
   overflow: hidden;
   max-width: 100%;
 }
 @media screen and (max-width: 400px) {
   .box--responsive {
     height: 50px;
   }
 }
 
 @media screen and (min-width: 401px) and (max-width: 500px) {
   .box--responsive {
     height: 100px;
   }
 }
 
 @media screen and (min-width: 801px) {
   .box--responsive {
     height: 140px;
   }
 }
 

JS

/*!
   * text-overflow: ellipsis;
 */
(function(factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else {
    factory(jQuery);
  }
}(function($) {
  'use strict';
  var namespace = 'ellipsis',
    span = '<span style="white-space: nowrap;">',
    defaults = {
      lines: 'auto',
      ellipClass: 'ellip',
      responsive: false
    };
  /**
   * Ellipsis()
   * --------------------------------------------------------------------------
   * @param {Node} el
   * @param {Object} opts
   */
  function Ellipsis(el, opts) {
    var base = this,
      currLine = 0,
      lines = [],
      setStartEllipAt,
      startEllipAt,
      resizeTimer,
      currOffset,
      lineHeight,
      contHeight,
      words;
    base.$cont = $(el);
    base.opts = $.extend({}, defaults, opts);
    function create() {
      base.text = base.$cont.text();
      base.opts.ellipLineClass = base.opts.ellipClass + '-line';
      base.$el = $('<span class="' + base.opts.ellipClass + '" />');
      base.$el.text(base.text);
      base.$cont.empty().append(base.$el);
      init();
    }
    /**
     * init()
     */
    function init() {
      if (typeof base.opts.lines === 'number' && base.opts.lines < 2) {
        base.$el.addClass(base.opts.ellipLineClass);
        return;
      }
      contHeight = base.$cont.height();
      if (base.opts.lines === 'auto' && base.$el.prop('scrollHeight') <= contHeight) {
        return;
      }
      if (!setStartEllipAt) {
        return;
      }
      words = $.trim(base.text).split(/\s+/);
      base.$el.html(span + words.join('</span> ' + span) + '</span>');
      base.$el.find('span').each(setStartEllipAt);
      if (startEllipAt != null) {
        updateText(startEllipAt);
      }
    }
    function updateText(nth) {
      words[nth] = '<span class="' + base.opts.ellipLineClass + '">' + words[nth];
      words.push('</span>');
      base.$el.html(words.join(' '));
    }
    if (base.opts.lines === 'auto') {
      var setStartEllipByHeight = function(i, word) {
        var $word = $(word),
          top = $word.position().top;
        lineHeight = lineHeight || $word.height();
        if (top === currOffset) {
          lines[currLine].push($word);
        } else {
          currOffset = top;
          currLine += 1;
          lines[currLine] = [$word];
        }
        if (top + lineHeight > contHeight) {
          startEllipAt = i - lines[currLine - 1].length;
          return false;
        }
      };
      setStartEllipAt = setStartEllipByHeight;
    }
    if (typeof base.opts.lines === 'number' && base.opts.lines > 1) {
      var setStartEllipByLine = function(i, word) {
        var $word = $(word),
          top = $word.position().top;
        if (top !== currOffset) {
          currOffset = top;
          currLine += 1;
        }
        if (currLine === base.opts.lines) {
          startEllipAt = i;
          return false;
        }
      };
      setStartEllipAt = setStartEllipByLine;
    }
    if (base.opts.responsive) {
      var resize = function() {
        lines = [];
        currLine = 0;
        currOffset = null;
        startEllipAt = null;
        base.$el.html(base.text);
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(init, 100);
      }
      $(window).on('resize.' + namespace, resize);
    }
    create();
  }
  $.fn[namespace] = function(opts) {
    return this.each(function() {
      try {
        $(this).data(namespace, (new Ellipsis(this, opts)));
      } catch (err) {
        if (window.console) {
          console.error(namespace + ': ' + err);
        }
      }
    });
  };
}));
$('.overflow').ellipsis();
$('.one-line').ellipsis({
  lines: 1
});
$('.two-lines').ellipsis({
  lines: 2
});
$('.box--responsive').ellipsis({
  responsive: true
});

결과


See the Pen 정적, 반응형 말줄임 by jinhwan (@jinhwan) on CodePen.


시간을 구하는 Date 객체가 있지만 Date()를 사용하면 사용자의 컴퓨터 시간을 참조하여 보여줍니다. 만약 사용자가 시간을 하루 전으로 돌리면 현재시간이 아닌 하루 전의 시간이 보여지게 됩니다. 자바스크립트는 클라이언트 사이드 언어이기 때문에 자바스크립트 자체로만으로는 서버 시간을 표시 할 수가 없기 때문에 서버의 시간을 가져올 중간 매개체인 XMLHttpRequest를 사용합니다. XMLHttpRequest 개체는 클라이언트와 서버 중간에서 요청과 결과를 전달하는 역할을 합니다.

let xmlHttp;

if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest(); // IE 7.0 이상, 크롬, 파이어폭스 등
}
else if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
}
else {
    return ;
}

xmlHttp.open('HEAD', window.location.href.toString(), false);
xmlHttp.setRequestHeader("Content-Type", "text/html");
xmlHttp.send('');

//서버의 Date 값 response new Date()객체에 넣기 전엔 시간표준이 GMT로 표시
let serverDate = xmlHttp.getResponseHeader("Date");
let currentDateClass = new Date(serverDate);


str = '123456789';
str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); // 123,456,789



let temp = ['a','b','c','d','e']
let select = temp.splice(2,3) // 3번째 배열부터 3개의 값을 축출
 
console.log(temp, selete) // temp = ['a','b'] , select = ['c','d','e']


논리연산자가 가지고 있는 특성으로 아래와 같이 조건문을 실행할 수 있다.

||

true || alert('1234')
false || alert('1234') 

위와같이 논리합 연산자의 좌변이 true이면 우변은 실행되지 않음 (true가 나온시점에서 우변들이 뭐가 나오든 어차피 true이기 떄문)

이러한 특성을 아래와 같이 이용할 수 있음

(조건 표현식) || (좌변 조건이 false일때 실행할 문장)

&&

true && alert('1234')
false && alert('1234') 

논리곱 연산자는 좌변이 참이여야만 다음 우변이 실행됨 ( 좌변이 false면 우변들이 뭐가 나오든 어차피 false)

이러한 특성을 아래와 같이 이용할 수 있음

(조건 표현식) && (좌변 조건이 true일때 실행할 문장)


위와같은 특성으로 조건식을 걸때 조금이나마 조건문을 처리하는 시간을 줄일 수 있다.

+ Random Posts