정말 궁금한게,

연봉 10억대 받는 Oracle 개발자가 만든 Oracle DB를 사용 하지 않고,
연봉 1억대 받을까 말까 하는 T MAX 개발자가 만든 Tibero를 쓰는 이유는 대체 뭘까.

Async / Await

async와 await

01.js

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function progress() {
  console.log("HI HI");
  await delay(1000);
  console.log("BYE");
}

progress();

동기 작업이 필요 할 때 함수의 선언 앞부분에 async 키워드를 붙임.
그리고 Promise를 리턴 받는 곳에 await 키워드를 넣어주면 해당 Promise가 끝날 때까지 기다렸다 다음 작업을 수행 할 수 있음.

then

위 코드에서는 delay이라는 함수를 만들어서 파라미터로 넣어준 시간 만큼 기다리는 Promise를 만들고, 이를 progress 함수에서 사용함.
함수에서 async를 사용하면, 해당 함수는 결과 값으로 Promise를 반환하게 됨.
따라서 await을 기다린 후 작업할 것이 있다면, 다음과 같이 then을 써서 코드를 작성할 수 있음.

02.js

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function progress() {
  console.log("HI HI");
  await delay(1000);
  console.log("BYE");
}

progress().then(() => {
  console.log("progress end");
});

async await의 catch

async 함수에서 에러를 발생 시킬 때는 throw를 사용하고,
에러처리는 try / catch 문을 이용하면 됨.
03.js

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function troubleMaker() {
  await delay(1000);
  throw new Error("await make error");
}

async function progress() {
  try {
    await troubleMaker();
  } catch (err) {
    console.error(err.message);
  }
}

progress();

async await의 return

동기 후 결과를 처리해야 한다면 then으로 결과를 받아서 처리할 수 있음.
04.js

const arr = ["a", "b", "c", "d", "e"];

const delay = (idx) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve(arr[idx]);
    }, 500)
  );
};

const basic = async () => {
  const item = await delay(2);
  console.log("await end");
  return item;
};

basic().then((result) => console.log(result));

async await 의 반복문.

반복문에서 await를 사용해야 하는 경우 forEach문은 사용할 수 없음.
일반적인 for문이나, for in, for of문을 사용해야 함.

05.js

const delay = (item) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 500)
  );
};

const arr = [0, 1, 2, 3, 4];

const loop = async (array) => {
  array.forEach(async (item) => await delay(item));

  console.log("DONE!");
};

loop(arr);

06.js

const delay = (item) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 500)
  );
};

const arr = [0, 1, 2, 3, 4];

const loop = async (array) => {
  //array.forEach(async item => await delay(item));
  for (let i = 0; i < array.length; i++) {
    await delay(arr[i]);
  }
  for (const item of array) {
    await delay(item);
  }
  for (const item in array) {
    await delay(item);
  }

  console.log("DONE!");
};

loop(arr);

await의 병렬 처리

동기적이면서 병렬 처리를 하는 방법도 있음.
07.js

const delay = (item) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 500)
  );
};

const arr = [0, 1, 2, 3, 4];

const parallel = async (array) => {
  const promises = array.map((item) => delay(item));
  await Promise.all(promises);

  console.log("DONE!");
};

parallel(arr);

Promise

참고 : MDN Promise
참고 : 감성프로그래밍

비동기 처리를 위해서 JS 에서는 주로 콜백을 많이 사용함.
콜백은 비동기 처리를 할 수 있지만, 비동기 작업을 순차적으로 처리해야할 경우 중첩시켜 표현하므로 예외처리가 어렵고, 중첩으로 인한 복잡도가 높음.
이를 위해 Promise 라이브러리가 생겼고 ES6에서 언어적 차원에서 지원하게 됨.
IE에서는 지원 되지 않지만 bluebirdjs 라이브러리를 추가 해준다면 지원 가능함.
Promise의 핵심은 목적만 머리에 넣고, 직접 적용해 보는것임.

Promise는 pending(수행중), fulfilled(완료), rejectd(실패), settled(종료)의 단계를 가지고 있고,
단어 의미 그대로 "약속"임. '지금은 없는데, 이상없으면 이따 주고 없으면 알려줄게~' 의 약속임.

Promise의 선언

//  Promise의 선언부
let myPromise = function (param) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (param) {
        resolve("SUCESS!!");
      } else {
        reject(Error("FAIL!!"));
      }
    }, 1000);
  });
};

//  Promise의 실행부
myPromise(false)
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

//  아래처럼 실행할 수도 있음.
myPromise(false).then(
  (result) => console.log(result),
  (err) => console.log(err)
);

Promise의 심화는 생략 하도록 하겠음.

Spread And Rest

Spread

spread라는 단어는 펼치다 퍼뜨리다 라는 의미를 가지고 있는데,
이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있음.
예를 들어 다음과 같은 객체들이 있다고 가정하면,
01.js

const o = {
  name: "object",
};

const ob = {
  name: "object",
  attribute: "hard",
};

const obj = {
  name: "object",
  attribute: "hard",
  color: "grey",
};

console.log(o);
console.log(ob);
console.log(obj);

객체 o를 선언하고, 기존에 선언한 o를 건드리지 않고 o의 속성을 이용해서 ob를 만들고, ob의 속성을 이용해서 obj를 만들었는데,
기존의 객체를 건드리지 않고 새로운 객체를 만들 때 spread를 사용하면 다음과 같이 작성할 수 있음.

02.js

const o = {
  name: "object",
};

const ob = {
  ...o,
  attribute: "hard",
};

const obj = {
  ...ob,
  color: "grey",
};

console.log(o);
console.log(ob);
console.log(obj);

배열에서 Spread

const pet = ["개", "고양이", "토끼"];
const animals = [...pet, "코요테", "코끼리"];

console.log(pet);
console.log(animals);

Rest

Rest는 가변 인자를 받아 배열로 만들어 선언하는것

04.js

const obj = {
  name: "object",
  attribute: "hard",
  color: "grey",
};

const { attribute, ...rest } = obj;

console.log(attribute);
console.log(rest);

배열에서의 rest

05.js

const numbers = [0, 1, 2, 3, 4, 5, 6];
const [first, ...others] = numbers;

console.log(first);
console.log(others);

// const [...othrs, last] = numbers;

함수 파라미터와 인자로서의 rest와 spread

const sum = function (...nums) {
  return nums.reduce((acc, curr) => acc + curr, 0);
};

const numbers = [1, 2, 3, 4, 5];
const result = sum(...numbers);

console.log(result);

Destructuring Assignment

구조 분해 할당, 또는 비구조화 할당.
배열이나 객체의 속성을 해체하여 그 값을 개별 변수로 담을수 있게 하는 표현식.

객체 비구조화 할당

01.js

  const batMan = {
    name: '브루스 웨인',
    actor: '크리스챤 베일',
    alias: '배트맨'
  };

  const catWoman = {
    name: '셀리나 카일',
    actor: '앤 헤서웨이',
    alias: '켓 우먼'
  };

  function print(hero) {
    const { alias, name, actor } = hero;
    const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
  }

  print(batMan);
  print(catWoman);

  const { alias, name, actor } = hero;

이 코드가 객체에서 값들을 추출해서 새로운 변수로 선언해 주는 것.
여기서 파라미터 단에서 객체 비구조화 할당을 하면 더 심플한 코드를 작성할 수 있음.
02.js

  const batMan = {
    name: '브루스 웨인',
    actor: '크리스챤 베일',
    alias: '배트맨'
  };

  const catWoman = {
    name: '셀리나 카일',
    actor: '앤 헤서웨이',
    alias: '켓 우먼'
  };

  function print({ alias, name, actor }) {
    const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
  }

  print(batMan);
  print(catWoman);

배열 비구조화 할당.

03.js

  const arr = [1, 2];
  const [one, two, three = 3] = arr;

  console.log( one );
  console.log( two );
  console.log( three );

깊은 비구조화 할당.

  const deepObject = {
    state: {
      information: {
        name: 'jeaha',
        languages: ['javascript', 'java', 'sql']
      }
    },
    value: 5
  };

  const { name, languages } = deepObject.state.information;
  const { value } = deepObject;

  const extracted = {
    name,
    languages,
    value
  };

  console.log(extracted);

Arrow Function

화살표 함수는 function 키워드 대신 => 를 사용하여 보다 간락한 방법으로 함수를 선언할 수 있다.

Arrow Function의 선언

  // 매개변수 지정 방법
  // 매개변수가 없을 경우
      () => { ... }
  // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
      x => { ... }
  // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
  (x, y) => { ... }

  // 함수 몸체 지정 방법
  // single line block
  // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다.
  x => { return x * x }
  x => x * x

  //  객체를 반환하는 경우. 소괄호를 사용한다.
  () => { return { a: 1 }; }
  () => ({ a: 1 })

  // multi line block.
  () => {
    const x = 10;
    return x * x;
  };

Arrow Function과 callback

화살표 함수가 기존의 function키워드를 완전히 대신할 수는 없지만, callback 함수에서 사용하면 간결하게 사용 가능하다.

02.js

  const nums = [1, 2, 3, 4, 5,];

  const oddNums = nums.filter(n => n % 2);

  console.log(oddNums);

Arrow Function과 this

Arrow Function은 자신을 포함하는 외부 scope에서 this를 계승 받는다.

  function That() {
    this.name = 'ASDF';

    setTimeout(function () {
      console.log(this.name);
    }, 1000);

    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }

  That();

Template Literal

Template Literal, Template String이라고 불림.
백틱 `을 사용하고 내장된 표현식 ${} 을 허용하는 문자열임.
여러 줄로 이루어진 문자열과 보간기능을 사용할 수 있음.
01.js

  const t = function (str) {
    // `을 사용해야 함.
    return `Hi ${str}!,
  Welcome to test world.
  Let's do the HellJS
  `;
  }

  const result = t('ASDF');
  console.log(result);

var의 문제점.

헷갈리는 함수 레벨 스코프.

if 문 안에서 선언 했지만 if 문 밖에서 사용 가능.
var는 코드 블럭을 무시하기 때문에 전역 변수가 됨.
01.js

  (function() {
    if( true ) {
      var variable = 'function scope';
    }
    console.log( variable );
  })();

중복 선언이 가능.

전역 변수가 된 var가 중복 선언 까지 됨.
02.js

  (function() {
    var variable = 'function scope';
    var variable = 'duplicated';
    console.log( variable );
  })();

var keyword 생략 가능

var keyword 를 생략해도 변수가 선언됨.
03.js

  (function () {
    variable = 'no keyword';
    console.log(variable);
  })();

Hoisting 문제

Hoisting?
선언은 코드 처음에 실행되지만, 변수에 값을 할당한 곳에서 값이 할당하는 문제.
04.js

  (function() {
    console.log( variable );
    var variable = 'hoisted';
  })();

  //  -> 위 코드는 호이스팅에 의해 아래와 같다.

  (function() {
    var variable;
    console.log( variable );
    variable = 'hoisted';
  })();

let keyword

let keyword를 사용하면, 문제가 해결됨.
05.js

//  1. 블록 레벨 스코프
{
  let variable = 'block scope';
  console.log( variable );
}

//  2. 중복 선언 => syntax error
{
  let variable = 'block scope';
  let variable = 'duplicated';
  console.log( variable );
}

//  3. 호이스팅   => syntax error
{
  console.log( variable );
  let variable = 'hoisted';
}

const keyword

상수 선언 키워드로 재 할당이 불가능하고, 선언과 동시에 할당이 이루어 져야 한다.
06.js

  //  Privitive
  let a = 'a';
  a = 'b';
  console.log( a );

  const c = 'c';
  c = 'd'; // ->  TypeError

const 는 call by value로 주로 Object나 Array를 선언하는데 사용되며,
내부의 요소는 재할당 가능하다.
07.js

  //  Reference
  let e = {
    foo : 'foo',
  };
  e = {
    bar : 'bar'
  };

  console.log( e );

  const f = {
    foo : 'foo',
  };
  /*
  f = {
    foo : 'bar'
  };  //  -> TypeError
  */
  f.foo = 'bar'

  console.log( f );
  /**
  * const c = { c : 'c' };
  * c    -> call by ref
  * c.c  -> call by value
  */

회사에서 ES5 이상의 문법을 팀 내부 교육을 진행하게 됐음.
부담스럽긴 하지만 하라고 하면 해야 하니, 내용을 정리했고.
정리하다 블로그에 올리면 좋을 거 같아서 포스팅하기로 함.

모오오던 JS

일반적으로 사용하는 JS 문법은 ES5 문법으로 2009년 12월에 출판되었음.
2015년 ES6가 출판되었고, ES6 이후의 문법을 Modern JavaScript라고 부르는 추세임.
(과연 언제까지 이 문법이 모던하다고 할진 모르겠지만)
그 후로 매년 새로운 업데이트가 있었고.
IE 같은 구형 브라우져는 최신 문법을 지원하지 않지만, babel과 같은 도구를 이용하면 구형 브라우져에서도 작동하게 변환할 수 있음.

목차

• var || ( let && const )
• Template Literal
• Arrow Function
• 비구조화 할당
• spread와 rest
• Promise
• async && await

아랫부분은 더 포스팅 하고 싶지만, 일하면서 여기까지 정리 할 수 있을지 모르겠으므로 보류.

• truthy and falsy
• 단축 평가 논리 연산
• 함수의 기본 파라미터
• 조건문 더 스마트하게 쓰기

그외 버전별 주요 문법

버전별로 발행된 문법이나 함수들은 많지만, 주로 알아야 하는 것들은 다음과 같음.
한번씩 찾아 보기를 권장함.

• ES6
  • let, const
  • module (import, export)
  • Promise
  • template literal
  • arrow function
  • class
  • generater
  • default parameters
  • for...of
  • map, set, weakMap, weakSet
• ES7
  • 구조 분해 할당. (비구조화 할당 ||Destructuring Assignment)
  • 비동기를 위한 await, async
  • 변수와 함수의 블록 스코프
• ES8
  • Generator와 Promise를 위한 await, async 구조체
• ES9
  • rest, spread 문법
  • 비동기 이터레이션
  • Promise.prototype.finally()
• ES10
  • Object와 Array

Java ArrayList Sort

개요

한동안 JS 만 만지다 Java ArrayList를 sort 해야 하는 일이 생김.
DB 에서 이미 ORDER BY 해서 꺼내온 두 개의 List를 merge 한 List 였는데,
요소들은 항적 데이터 { 선박 ID(ship_id), 위치정보(geom), 항적 시간(date(초)) } 로 이루어 져 있고, 시간으로 정렬 해야 했음.

  public class Record {
    String  tbship_id;
    String  geom;
    int     sec;
  }

하도 JS 만 만졌더니 간단한 로직인데 1시간 정도 삽질 했고 블로그에 남기기로 함.

방법 1

Record 객체를 Comparable 상속 받게 한 뒤, compareTo 메소드를 오버라이드, 필요한 곳에서 정렬 메소드를 호출.
compareTo 메소드는 int를 반환해야 하며 오름차순 정렬일 경우, 다음을 반환해야 함.

• 기준점이 비교대상보다 크다면 양수.
• 기준점이 비교대상과 같다면 0.
• 기준점이 비교대상보다 작다면 음수.

Record.java

  public class Record implements Comparable<Record> {
    String  tbship_id;
    String  geom;
    int     sec;

    /* ... */

    @Override
    public int compareTo(Record o) {
      if( this.cal < o.cal ) return -1;
      else if (this.cal == o.cal ) return 0;
      else return 1;
    }
  }

TrackDAOImpl.java

  /* ... */
  Collections.sort(mergedList);

방법 2

정렬이 필요한 곳에서 Comparator 객체를 생성한 뒤, compare 메소드를 오버라이드 후, 정렬 메소드를 호출.
compare 메소드는 int를 반환하며, 앞의 방법과 같이 기준점 대비 비교점으로 짜야함.

• 기준점이 비교대상보다 크다면 양수.
• 기준점이 비교대상과 같다면 0.
• 기준점이 비교대상보다 작다면 음수.

  Comparator<Record> compare = new Comparator<Record>() {

  @Override
  public int compare(Record prev, Record curr) {
    if( prev.getCal() < curr.getCal() ) return -1;
    else if (prev.getCal() == curr.getCal() ) return 0;
    else return 1;
    }
  };

  Collections.sort(mergedList, compare);

방법 3

Collection.sort() 메소드의 두번째 인자로 익명 객체를 넣어 줌..
방법 1, 2를 보면 쉽게 이해할 수 있음.

  Collections.sort(mergedList, (Comparator<Record>) (Record prv, Record cur) -> {
    if( prv.getCal() < cur.getCal() ) return -1;
    else if (prv.getCal() == cur.getCal() ) return 0;
    else return 1;
  });

그 외

개인적으로는 세번째 방법이 낫겠다 싶은데 이유는 객체의 compareTo 메소드에 다른 필드 값 대한 비교가 필요할 경우가 있기 때문.
메소드를 구현 할때, 다른 비교 구분이 필요할 경우가 있기 때문.