비동기 submit 을 진행시에 form 값을 확인해보고 json object 로 받아 한 번에 request 를 날리고 싶을 때 유용하다.

소스​

/*
@author https://github.com/macek/jquery-serialize-object
*/
$.fn.serializeObject = function () {
  "use strict";
  const result = {};
  const extend = function (i, element) {
    const node = result[element.name];
    if ("undefined" !== typeof node && node !== null) {
      if ($.isArray(node)) {
        node.push(element.value);
      } else {
        result[element.name] = [node, element.value];
      }
    } else {
      result[element.name] = element.value;
    }
  };

  $.each(this.serializeArray(), extend);
  return result;
};

예제​

const formData = $("#form").serializeObject();

여담​

checkbox 같은 경우 여러 개 선택시 하나의 key 에 배열로 반환된다.

<form>
  <input type="checkbox" name="arr" value="1" checked />
  <input type="checkbox" name="arr" value="2" checked />
</form>

<script>
  var formData = $("form").serializeObject();
  // => formData = { arr : [1,2] };
</script>

사실 이 기능이 제일 매력적이다.

현재 serializeObject library는 더 높은 버전이 있다. 최신 버전에선 form 의 name 속성에 object 를 직접 관리할 수 있다. 최신 버전을 써도 괜찮고, 가볍게 추가해서 쓰고 싶으면 위 버전을 이용하자.

로그인 폼을 만들 때 tab 과 enter 를 이용해 로그인 할 수 있게 해줘야한다.

소스​

$("#id").keypress(function (e) {
  if (e.which === 13) {
    // do something
  }
});

여담​

로그인 폼을 매번 만들지 않기 때문에, e.which 는 매번 헷갈린다..

git add . 명령어 실행 후에 commit -m 명령어 실행 시, 또는 git commit -am 명령어로 바로 커밋시 add 가 되지 않은 것처럼 빨간 파일이 보일 경우

add 확인​

git add .
git add path_to_submodule

두 명령어를 다시 실행해본다.

diff 확인​

그래도 add 가 안 되는 경우 diff 를 먼저 실행해본다.

git diff
git diff path_to_submodule

dirty diff 가 있을 경우​

submodule 종속 제거​

내 프로젝트 안에 git clone 으로 가져온 library 가 있는지 확인해보자.

git submodule foreach --recursive git checkout .

모듈이 없다는 결과가 나올 경우

• git 에서 가져온 library 를 모두 확인하고
• .git 폴더가 생성되어있으면 삭제

모듈 결과가 있는 경우

• .gitmodule 파일의 해당 모듈 부분 삭제
• git add .gitmodules
• .git/config 파일의 해당 모듈 부분 삭제
• git rm --cached path_to_submodule 캐시 삭제
• rm -rf .git/modules/path_to_submodule 모듈 폴더 삭제
• git commit -m "Removed submodule {name}" 모듈 종속 삭제를 커밋하고
• rm -rf path_to_submodule 모듈 파일 모두 삭제

없는 경우​

cached 파일 제거​

git rm -r --cached .
git rm -r --cached path_to_submodule

untracked 파일 제거​

git clean -d -x -f

-d 는 디렉토리 포함, -x 는 ignored 파일 포함, -f === force

commit 으로 초기화​

git reset --hard

이 명령어는 마지막 방법이 되어야한다. 작업량을 다 날릴 수 있다.

여담​

git 버전이 높아지면서 프로젝트 내에 git 에 종속적인 모듈이 있으면 add 자체가 안 된다. path_to_submodule 은 submodule 의 상대경로, 즉 add 가 안 되는 파일의 경로를 적으면 된다.

pure javascript​

부모창을 제어하는 구문은 아래처럼 사용한다.

document.parent.getElementById("id");
window.opener.document.getElementById("id");

jQuery​

jQuery를 사용하고 있다면 생각보다 쉽게 요소 선택을 할 수 있다.

const $id = $("#id", opener.document); // parent.document도 가능
$id.val("value");

2열처럼 바로 값 변경도 가능하다.

Javascript 의 form 의 reset() 메소드는 hidden field 와 check, radio button 에 대해 초기화를 시켜주지 않는다.

따라서 form 의 모든 field 를 초기화 시키려면 아래의 메소드가 필요하다.

소스​

$.fn.clearForm = function () {
  return this.each(function () {
    const type = this.type,
      tag = this.tagName.toLowerCase();
    if (tag === "form") {
      return $(":input", this).clearForm();
    }
    if (
      type === "text" ||
      type === "password" ||
      type === "hidden" ||
      tag === "textarea"
    ) {
      this.value = "";
    } else if (type === "checkbox" || type === "radio") {
      this.checked = false;
    } else if (tag === "select") {
      this.selectedIndex = -1;
    }
  });
};

예제​

$("#form").clearForm();

설명​

여기의 clearForm 메소드를 hidden 도 초기화할 수 있게 커스터마이징 했다.

jQuery3이 기존 버전에서 어떻게 달라졌는지 알아보자.

load(), unload(), error() 삭제​

이 함수들은 이제 ajax 기능으로만 사용할 수 있다. 다음처럼 url 을 로드하는 데에만 사용할 수 있다.

// 사용 가능
$(div).load(url);

기존에 사용하던 엘레먼트 로드 시 callback 함수를 받는 구문은 더이상 사용할 수 없지만 on('load') 로 충돌을 피할 수 있다.

// 사용 불가능
$(img).load(function () {
  console.log("이미지 로드 완료");
});

// 사용 가능
$(img).on("load", function () {
  console.log("이미지 로드 완료");
});

document on Ready 삭제​

document 로드시에 호출되는 함수들을 정의하기 위한 위의 형태는 더 이상 사용할 수 없다. $(document).ready(function(){ }); 으로 변경해도 되나

=> $(function(){ }); 로 사용하자, 권장하는 방법이다.

deferred의 Promise 스펙​

Promise/A+ 스펙을 지키지 않은 2버전까지는 오류가 있었다고 하는데, then, when 등의 메소드를 사용 중엔 별다른 문제가 없어서 체감상 크게 느껴지지 않았다.

=> then().then().then().then().catch() 와 같은 구문이 가능하다.

bind(), unbind(), delegate() undelegate() 삭제​

위 구문 사용시 console.warning이 떴기에 바꿔왔더라면 큰 문제는 없다.

=> on(), off() 로 대체하면 된다.

andSelf() 삭제​

이 메소드가 삭제되어 sementic UI 사용시 오류가 발생한다.

=> addBack() 으로 대체하면 된다.

param() 이 %20 을 + 기호로 바꾸지 않음​

$.ajax로 return 받을 때 가끔씩 빈칸이 더하기로 반환되는 문제가 드디어 해결되었다.

event.props, event.fixHooks 삭제​

jquery.onoff 라이브러리 사용시 오류가 난다.

=> fixHooks는 fix로 대체 가능하고, props는 빈 배열로 초기화시키면 된다.

data attribute 정의시 kebab-case를 사용가능​

이 부분은 jQuery 문서의 예제를 참조했다.

const $div = $("<div />");
$div.data("clickCount", 2);
$div.data("clickCount"); // 2
$div.data("click-count", 3);
$div.data("clickCount"); // 3
$div.data("click-count"); // 3

const allData = $div.data();
allData.clickCount; // 3
allData["click-count"]; // undefined
allData["click-count"] = 14;
$div.data("click-count"); // 3, NOT 14 as it would be in jQuery 2.x
allData.clickCount; // 3
allData["click-count"]; // 14

하지만 헷갈리니 camelCase 로.

기타 변경점은 링크 참조

크롬 설치​

Chrome을 설치한다.

웹스토어 이동​

Chrome 브라우저를 켜서 웹스토어로 접속한다.

Browsec 설치​

검색 후 설치하기 버튼을 클릭한다.

Browsec 활성화​

주소표시줄 우측의 방패모양 아이콘을 클릭해 기능을 켠다.

감상​

새로고침(F5 키)을 한 후 감상한다.

여담​

페이지 로딩시에만 국가 체크가 들어가므로 재생을 한 후 속도가 느리다면, Browsec을 꺼주면 된다.

Lodash는 underscore에서 성능을 개선한 라이브러리며 IE의 하위 브라우저에서 es5, es6의 메소드를 사용할 수 있게 해줄 뿐만 아니라 통계 사용시에는 필수로 사용할 수 밖에 없다. 공식 문서를 봐도 되지만 구체적인 예시가 있어야 이해하기가 편하다 시작해보자.

Collection​

배열과 객체 모두 사용가능한 메소드

filter​

_.filter( 콜렉션, 검색할 데이터 또는 콜백함수 ) 콜렉션에서 해당 데이터 또는 콜백 조건에 맞는 데이터를 포함한 콜렉션을 반환한다. 리스트 검색 조건에 유용하다.

const users = [
  { user: "barney", age: 36, active: true },
  { user: "fred", age: 40, active: false },
];

_.filter(users, (o) => !o.active);
// => [ { 'user': 'fred',   'age': 40, 'active': false } ]

// _.matches 메소드가 생략된 형태
_.filter(users, { age: 36, active: true });
// === _.filter(users, _.matches({ 'age': 36, 'active': true }))
// => [ { 'user': 'barney', 'age': 36, 'active': true } ]

// _.matchesProperty 메소드가 생략된 형태
_.filter(users, ["active", false]);
// => [ { 'user': 'fred',   'age': 40, 'active': false } ]

// _.property 메소드가 생략된 형태
_.filter(users, "active");
// => [ { 'user': 'barney', 'age': 36, 'active': true } ]

reject​

_.reject( 콜렉션, 제외시킬 데이터 또는 콜백함수 ) 콜렉션에서 해당 데이터 또는 콜백 조건에 맞는 데이터를 제외한 콜렉션을 반환한다. Delete API를 호출 한 뒤 삭제된 결과값을 제외해서 리스트를 갱신하고 싶을 때 유용하다.

AngularJS와의 예시를 보자

$scope.remove = function (data) {
  ApiService.delete(
    {
      id: data.id,
    },
    function (data) {
      // 삭제 성공시 해당 데이터를 제외한 리스트로 변경
      $scope.list = _.reject($scope.list, data);
    },
  );
};

size​

_.size( 콜렉션 ) 콜렉션의 사이즈를 반환한다. length와 같다고 생각하면 된다.

_.size([1, 2, 3]);
// => 3

_.size({ a: 1, b: 2 });
// => 2

_.size("apple");
// => 5

sampleSize​

_.sampleSize( 콜렉션, [추출 갯수=1]) 콜렉션에서 추출 갯수만큼 랜덤 값을 배열로 반환한다.

_.sampleSize(_.range(1, 45), 7);
// => 로또 번호 추출

Array​

배열에 사용 가능한 메소드

compact​

_.compact( 배열 ) 배열에서 false, null, 0, ""(빈값), undefined, NaN의 값을 제외시킨 배열을 반환한다.

_.compact([0, 1, false, 2, "", 3]);
// => [1, 2, 3]

take​

_.take( 배열, [가져올 요소 수=1]) 배열에서 앞에서부터 n개의 요소를 반환한다.

_.take([3, 5, 4, 7, 9], 3);
// => [3, 5, 4]

uniq​

_.uniq( 배열 ) 배열의 중복 값을 제거한다.

_.uniq([1, 1, 3]);
// => [1, 3]

zip​

_.zip( 배열, 배열... ) 배열의 인덱스에 따라 배열을 다시 만든다. 예제를 보는게 이해가 빠르다.

_.zip(["a", "b"], [1, 2], [true, false]);
// => [['a', 1, true], ['b', 2, false]]

Object​

객체에 사용 가능한 메소드

get​

_.get( 객체, 가져올 키, 기본값 ) 객체에서 해당 키 값만을 가져온다.

const object = { a: 1, b: 2, c: 3, e: { f: 5 } };

_.get(object, "a");
// => 1

_.get(object, "d");
// undefined

_.get(object, "d", 4);
// 4

_.get(object, "e.f");
// 5

omit​

_.omit( 객체, 제외할 키 배열 ) 객체에서 해당 키를 제외한 객체를 반환한다.

const object = { a: 1, b: "2", c: 3 };

_.omit(object, ["a", "c"]);
// => { 'b': '2' }

_.omit(object, "a");
// => { 'b': '2', 'c': 3 }

values​

_.values( 객체 ) 객체에서 값만을 추출한 배열을 반환한다.

_.values({ a: 1, b: 2, c: [3, 4] });
// => [ 1, 2, [3, 4] ]

_.values("hi");
// => ['h', 'i']

Util​

유틸성이 있는 메소드

constant​

_.constant( 반환 값 ) 반환 값을 반환해주는 함수이다. 단독으로는 거의 사용하지 않고, 다른 Lodash 함수들과 같이 사용한다.

_.constant(0);
// => 0

_.constant({ a: 1 });
// => { a: 1 }

times​

_.times( 반복횟수, 콜백함수 ) 콜백함수 조건에 맞게 반복횟수만큼의 데이터를 배열로 반환한다. 초기화를 시킬 때 유용하다.

_.times(3, _.constant(0));
// => [0, 0, 0]

range​

_.range( [시작인덱스], 종료인덱스, [증가 폭=1]) 배열을 초기화 시킬 때 유용하다. 단지 배열을 숫자로 초기화해야된다면 .range가 속도면에서.times(n, constant)보다 월등히 빠르다.

_.range(0, 6, 0);
// => [0, 0, 0, 0, 0, 0]

_.range(4);
// => [0, 1, 2, 3]

Why​

이런 편리함이 있는데도 왜 안 쓰는지 모르겠지만, 몇 가지 이유가 더 있다

Lazy Evaluation​

링크를 참조하자

코드로 요약하자면

// 이런 구문을
let result = [],
  temp1 = [],
  temp2 = [],
  temp3 = [];

for (let i = 0; i < source.length; i++) {
  temp1[i] = func1(source[i]);
}

for (let i = 0; i < source.length; i++) {
  temp2[i] = func2(temp1[i]);
}

for (let i = 0; i < source.length; i++) {
  temp3[i] = func3(temp2[i]);
}

result = temp3;

// 아래처럼 바꿔 엄청난 속도 향상을 가져올 수 있다
let result2 = [];
for (let i = 0; i < source.length; i++) {
  result2[i] = func3(func2(func1(source[i])));
}

chaining​

또 다른 큰 이유는 chain을 활용해 functional programming이 가능하단 것이다. 예를 들어 다음과 같은 데이터가 있다고 보자

[
  {
    tag: {
      name: "tag1",
      media: {
        nodes: [
          {
            id: "uid1",
            user: "gracefullight",
            caption: "caption1",
            likes: 10,
          },
          {
            id: "uid2",
            user: "gracefullight",
            caption: "caption2",
            likes: 20,
          },
        ],
      },
    },
  },
  {
    tag: {
      name: "tag2",
      media: {
        nodes: [
          {
            id: "uid3",
            user: "gracefullight",
            caption: "caption3",
            likes: 30,
          },
          {
            id: "uid4",
            user: "gracefullight",
            caption: "caption4",
            likes: 40,
          },
        ],
      },
    },
  },
];

js​

이 데이터의 nodes 데이터만 가져와서 새로운 data 배열을 만들고 싶다면 어떻게 할까? lodash를 모르는 상태라면 대충 이런식의 로직이 나온다.

// for문 애호가
const data = ["위에 데이터 배열"];

let result = [];
for (let i = 0, len = data.length; i < len; i++) {
  const nodes = data[i].tag.media.nodes;

  for (let j = 0, len2 = nodes.length; j < len2; j++) {
    // 머리가 슬슬 아파진다.
  }
}

// 더 나은 방법
result = data
  .map((item) => {
    // 여기까지의 결과는 [[{}, {}], [{}, {}]] 모양이 될 것이다
    return item.tag.media.nodes;
  })
  .reduce((prev, item) => {
    // 아 여기서 난관이다. 배열을 벗기면서 내부의 오브젝트만 prev array에 push 또는 concat해줘야한다.
    return prev;
  }, []);

With lodash​

lodash를 사용하면 다음과 같이 직관적으로 구현이 가능하다.

result = _.chain(data).map("tag.media.nodes").flatten().values();

// 결과는 다음과 같다
[{ id: "uid1" }, { id: "uid2" }, { id: "uid3" }, { id: "uid4" }];

여담​

Lodash는 jQuery와 중복되는 이름을 가진 메소드가 몇 가지 있는데, 차이점은 콜백함수에서 value를 첫번째 인자로 받는다는 것이고 브라우저에서 native method를 사용할 수 있으면 그걸 사용한다는 것이다. (each를 예를들면 array.forEach)

// lodash
_.each(["a", "b", "c"], (value, index, list) => {});

// jQuery
$.each(["a", "b", "c"], (index, value) => {});

따라서 lodash를 사용하는 것을 권한다. (속도도 더 빠르다)

java에 joda-time이 있듯 javascript에는 moment가 있다. 기초적인 moment 사용법은 알고 있다고 가정한다.

calendar​

현재시각과 비교해 날짜를 어제 오후 12:31처럼 표시하고 싶은 경우 사용한다.

소스​

moment(date).calendar(today, { sameElse: "YYYY-MM-DD HH:mm:ss" });

date는 비교할 날짜, today는 현재시각 값이다. 일주일 이하일 경우 어제.. 그저께.. 등으로 반환되고, 이상일 경우 sameElse에 등록된 포맷으로 반환된다.

global locale 설정을 지정하지 않았을 경우 sameElse가 들어가는 option object 안에 locale을 커스터마이징 할 수 있다.

기타 옵션은 API 참조

diff​

A에서 B의 차이를 구할 때 쓰는 diff method를 쓰다가, 월 또는 년도의 차이를 계산하는 경우가 생긴다.

소스​

worst case​

moment("2016-06").diff("2015-01", "month");

이렇게 처리하면 되지 않을까? 동작은 하지만 오류가 날 수 있다고 console.warning 이 찍힌다.

good case​

moment([2016, 6]).diff([2015, 1], "month");

실행이 잘되지만, YYYY-MM을 split해서 넣어줘야하는 번거로움이 있다.

best case​

moment("2016-06", "YYYY-MM").diff("2015-01", "month");

moment 형식으로 변환시 두번째 파라미터에 포맷을 지정하면 console.warning도 없고 번거로움도 사라진다!

기본예제는 type="date" 로만 설정이 되있어서 type="text"에도 적용 가능하게 onSet callback 을 설정했고, 한글로 보이게 수정했다.

소스​

<input type="text" name="date" class="date" />

<script>
  $(function () {
    // pickadate 옵션 전역설정
    $.extend($.fn.pickadate.defaults, {
      monthsFull: [
        "1월",
        "2월",
        "3월",
        "4월",
        "5월",
        "6월",
        "7월",
        "8월",
        "9월",
        "10월",
        "11월",
        "12월",
      ],
      monthsShort: [
        "1월",
        "2월",
        "3월",
        "4월",
        "5월",
        "6월",
        "7월",
        "8월",
        "9월",
        "10월",
        "11월",
        "12월",
      ],
      weekdaysFull: ["일", "월", "화", "수", "목", "금", "토"],
      weekdaysShort: ["일", "월", "화", "수", "목", "금", "토"],
      selectMonths: true,
      selectYears: 140,
      showMonthsShort: false,
      showWeekdaysFull: false,
      close: "닫기",
      clear: false,
      today: "오늘",
      format: "yyyy-mm-dd",
      formatSubmit: "yyyy-mm-dd",
      max: true, // 이 옵션이 ture면 오늘까지밖에 날짜 선택을 못한다
      closeOnSelect: true,
      onSet: function (e) {
        if (e.select) {
          this.close();
        }
      },
    });

    // 활성화
    $(".date").pickadate();
  });
</script>

결과​