Skip to content

Latest commit

 

History

History
109 lines (95 loc) · 8.08 KB

20210322.md

File metadata and controls

109 lines (95 loc) · 8.08 KB

JavaScript

인상 깊은 조언

  • 알고리즘은 예컨대 배열 속의 숫자를 오름차순으로 정렬할 때 우리가 생각해서 실행하는 바를 그대로 분해해서 구현하는 것이다. 하지만 이렇게 접근하려면 수학과부터 다시 가야 한다. 그냥 암기과목이라고 생각하고 달달 외워라.
  • 인터넷에 돌아다니는 자료는 그 결과에 책임을 지지 않는다. 업무상 사용할 때 문제가 생겨도 인터넷에서 그렇게 말했다고 핑계댈 수 없다. 책에서 정보를 얻고, 어쩔 수 없이 인터넷에서 나온 자료를 활용하더라도 충분히 테스트한 후에 사용할 것.
  • 책은 내용에 책임을 질뿐더러 1쇄 이후 계속 수정보완이 이루어지는 좋은 자료이다.

Number

Safe Integer

  • 8Byte로 표시할 수 있는 숫자에 한계가 있기 때문에 정해둔 상한선/하한선이다.

Epsilon

  • 10진수를 2진수로 변환하는 과정에서 정수일 때는 문제가 없지만 소수일 경우에는 무한소수로 되는 경우가 생기기 때문에 어느 선에서 끊는다.
  • 그래서 소수의 연산은 오차가 날 수밖에 없다. (0.1 + 0.2 === 0.3은 false)
  • 이를 해결하기 위해 Number.EPSILON이 등장
  • JS에서 특정 수와 그 수 다음으로 크다고 여겨지는 수의 차이가 바로 Epsilon.
  • 두 값이 무의미한 수인 Epsilon보다도 작은 오차를 가지고 있다면 같은 수로 간주한다.

정규표현식 (RegExp)

  • JS에서 차용해서 쓰는 별도의 '언어'이다.
  • 서버로 ID나 비밀번호를 보내기 전에 Validation check를 먼저 해주어야 한다.
    • 서버는 비싸다. 회사의 직접적인 경비를 발생시키므로 쓸데없는 요청은 최소화해야한다.
  • 정규표현식은 리터럴, 객체로 평가된다.
  • 많은 언어들에 영향을 주고 있으니 언젠가는 공부해야 할 것이지만 지금은 not yet.
  • 필요할 때마다 그때그때 검색해서 써도 지금으로선 충분하지만, test를 거친 후에 사용하라.

스프레드 문법 (Spread Syntax)

스프레드 문법의 정의

  • 값이 아니라 값의 목록이 나오므로 연산자나 표현식이라고 할 수 없다. 그냥 문법이라고 부르는 수밖에.(ES 초반에 실수로 Spread Operator라는 표현을 쓴 탓에 연산자라고 정의하는 자료들이 있지만 연산자라면 값으로 평가되어야 하므로 엄밀히 따지면 연산자가 아니다)
  • 현재까지는 iterable만을 대상으로 사용할 수 있는 것이 표준
    • iterable : array, string, map, set, arguments, DOM객체 등
    • 표준사양은 iterable만을 대상으로 하지만, ES 제정 위원회인 TC39가 공개하는 사양 후보에 spread syntax를 일반 객체에도 사용할 수 있게끔 하는 사양이 stage 3까지 올라와 있다. (Stage4가 확정된 사양의 공표단계이므로 근시일 내에 표준이 될 것.)
    • 크롬이나 사파리 등 브라우저에서는 이미 spread syntax를 객체 내부에서 사용할 수 있도록 구현되어있어 현업에서는 사용 중.

스프레드 문법의 활용

Math.max

  • Math.max(1, 2, 3)은 1, 2, 3 중 가장 큰 값을 반환해주는 메서드인데, 숫자가 담긴 배열을 인수로 주면 배열 자체를 평가하기 때문에 NaN을 반환한다.
  • 숫자가 담긴 배열 여러 개를 인수로 주더라도 배열의 대소를 가릴 수 없다고 판단하여 NaN을 리턴한다.
  • 이 상황에서 배열을 풀어서 삽입해주는 스프레드 문법으로 Math.max( ... [1, 2, 3])을 사용하면 원하는 결과를 얻을 수 있다.

concat 대체

  • ES5 이전, concat은 인수가 앞의 array instance에 삽입된 배열을 리턴하는데, 인수에 배열을 넣더라도 풀어서 삽입해준다. 이는 친절하긴 하지만 바람직하지 않다.
  • 함수는 같은 타입의 인수에 대해 일관된 결과값을 보장하는 작은 단위로 짜야 하는데, 인수로 숫자를 넣어도 배열을 넣어도 같은 값이 나온다는 것은 좋지 않은 것.
  • ES6 이후에서는 concat 대신 스프레드 문법을 사용하여 두 배열을 합칠 수 있다.
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arrConcat = arr1.concat(arr2);
const arrSpread = [ ... arr1, ... arr2 ];
  • arrConcatarrSpread은 같은 배열을 갖는다. 이 중 어느 것이 더 좋은 방법일까?
    • 두말할 것 없이 spread syntax 압승: 직관적으로 알 수 있는 표현식.
    • concat 메서드, 즉 함수를 사용하려면 인수를 무엇을 넣어야 하는지, 호출은 어디에서 어떻게 해야하는지 알아야 하며 concat이라는 함수 이름도 알아야만 한다. 즉 함수사용법을 모르면 사용할 수 없다.

slice 복사 대체

const arr = [1, 2, 3, 4];
const arrSlice = arr.slice();
const arrSpread = [ ... arr ];
  • 여기서도 spread syntax가 압승. 함수를 사용하지 않으므로 함수이름이나 인수, 마침표연산자 앞에 무엇을 넣을지(호출하는 주체가 누구인지) 알 필요 전혀 없이 복사가 가능하다.
  • slice와 동일하게 얕은 복사가 이루어진다.

splice 활용

const arr1 = [1, 4];
const arr2 = [2, 3];
// 식별자 없이는 const arr = [1,4].splice(1, 0, 2, 3); 로 끝날 문제지만...
const arrSplice = Array.prototype.splice.apply(arr1, [1,0].concat(arr2));
const arrSpread = arr1.splice(1, 0, ... arr2);
  • splice 안에 인수를 스프레드 문법 없이 넣어주기 위해서는 1, 0과 같은 depth에 concat을 통해 배열을 풀어서 넣어준 후 배열 자체를 인수로 전달하기 위해 apply라는 메서드를 따로 써야 했다.
  • splice의 인수에 바로 배열이 올 수 없기 때문에 배열을 인수로 받아주는 apply메서드를 넣어주면서 arr1을 this로 바인딩해주기 위해 첫 인수로 넣어야 한다.

this

  1. [1, 2, 3].forEach()에서의 this는 [1, 2, 3]
  2. Array.prototype.forEach()의 this는 Array.prototype이기 때문에 forEach의 작업대상이 될 배열을 넣어줄 곳이 없다.
  • forEach를 호출할 때 실제 데이터인 [1, 2, 3]는 Array.prototype에 존재하지 않으므로 따로 apply라는 메서드를 사용해야 한다.
  • apply메서드의 첫 인수는 this로 바꾸어주며 이후 오는 배열이 마침표 앞 메서드의 인수로 들어간다.

스프레드 문법의 객체 내 사용

  • comma(,)를 사용하는 경우는 많이 없다. 함수에서 여러 개의 매개변수와 인수를 넣을 때나 배열의 요소들, 그리고 객체의 프로퍼티들.
  • 그러므로 comma로 구분된 객체의 프로퍼티들 또한 spread 문법의 대상이 될 수 있어야한다는 게 spread syntax 표준화 진영의 합리적인 논거.
const obj = { x:1, y:1 };
const copy = { ... obj };
  • 위의 예시와 같이 빈 객체 리터럴 내부에서 스프레드 문법을 사용하면 obj의 중괄호가 풀리면서 객체의 내용물이 그대로 들어가 복사된다.
  • 객체 내의 프로퍼티 키가 중복될 경우 뒤에 오는 값에 덮어씌워지기 때문에 순서에 유의해야 한다.
const obj1 = { x:1, y:2 };
const obj2 = { y:20, z:3};
const copy1 = { ... obj1, ... obj2 };
const copy2 = { ... obj2, ... obj1 };

console.log(copy1); // { x:1, y:20, z:3 }
console.log(copy2); // { z:3, x:1, y:2 } 

Pair Programming

  • 공동작업할 원격 브랜치를 생성하여 fork 하고 pull.
  • 드라이버(실제 코딩치는 사람)는 push하고 네비게이터(말로 코딩해주는 사람)는 pull하면서 코딩을 한다.
  • 20분 정도 간격으로 역할교대한다.
  • 영민님과 같이 문제를 푼 페어 프로그래밍 레포

느낀 점

  • 스프레드 문법이 얼마나 혁신을 가져왔는지 알 수 있었다.
  • 컴퓨터가 아무리 똑똑해도 메모리의 한계와 2진수 변환에서의 오류가 있다는 걸 배우니 뭔가 완벽한 사람의 치부를 발견한 느낌이다.
  • 페어프로그래밍 하니까 재미있다.