VS Code에 console.log shortcut 추가하기

Background

처음에는 emmet 방식처럼 간략한 텍스트를 입력하고 tab을 누르면 자동완성 되는 방향으로 했는데 반응이 너무 느려서 그냥 명령어 + 탭으로 보이는 경우가 왕왕 있었다. 그래서 스니펫 말고 키보드 쇼트컷 방식을 찾아봤다.

How to

  1. Code > Preferences > Keyboard Shortcuts를 들어간다

2. 상단의 ‘keybindings.json’ 클릭

3. 오른쪽의 Custom 영역에 원하는 키로 덮어쓴다. 나는 console.log("변수이름", 변수")` 식으로 자주 사용해서 snippet에 그렇게 입력해주고 ctrl+shift+l로 단축키를 엮어줬다.

// Place your key bindings in this file to overwrite the defaults
[
    {
        "key": "ctrl+shift+l",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "console.log('$1', $2);$0"
        }
    }
]

4. 에디터에서 단축키를 눌러보면 잘 작동하는걸 볼 수 있다. 위에서 $1, $2로 원하는 위치에 숫자를 적어주면 그 곳으로 자동으로 포커스가 이동한다. $1에 원하는 텍스트를 입력하고 tab을 치면 $2로 넘어간다. 끝나면 $0으로 간다.

5. 즐코딩!

+ 단축키 없이 snippet 만들기

Preferences > User Snippets > javascript.json에 아래와 같은 코드를 넣는다

"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}

lodash fp로 함수형 프로그래밍 하기

왜 함수형으로 코드를 쓰는가

  • Explicit한 코드를 Implicit(암묵적)하게 바꾼다는 이점
  • Explicit하게 짠 제곱함수
function squareAll(numbers) {
    var squared = [];
    for (var i=0; i < numbers.length; i++) {
        squared.push(numbers[i] * numbers[i]);
    }
    return squared;
}

squareAll([1, 2, 3, 4]); // [1, 4, 9, 16]
  • Implicit하게 짠 제곱함수.
function squareAll(numbers) {
    return numbers.map(num => num * num);
}
squareAll([1, 2, 3, 4]);
- 루프를 도는것과 새로운 배열을 만드는걸 `map`메서드에 위임시켰다.
- 읽기 쉬워지고 에러를 낼 가능성이 적어짐.
- 하지만 numbers배열에서 이를 불러내야 함.

– lodash fp로 조금 더 Implicit하게 짠 제곱함수

const map = require('lodash/fp/map');

const squareAll = map(num => num * num); // array.map으로 접근하지 않고 바로 map을 부름. 그리고 함수에 arguments도 없음(커리되어서)

squareAll([1, 2, 3, 4]);
  • lodash/fp의 함수들은 기본적으로 커리되어있다.
  • 그래서 기존에 익숙했던 map(array, function)이 아닌 map(function, array) 순이라고 생각하면 된다.
  • 더이상 numbers argument를 받지 않아도 되며, 이는 point-free프로그래밍의 컨셉이다.
  • 또다른 이점들은 적은 라인의 코드로 읽기도 좋으며, 테스트랑 유지보수 하기도 좋다는 것이다.

커링(Currying)

  • 어떤 함수가 특정한 개수의 인자를 기대하는데, 이보다 적게 인자를 넣었을 때 남은 인자들을 새로운 함수로 받을 수 있는것을 커링(Currying)이라 한다.
  • 모든 인자들이 전달되었을 때 원하는 결과가 반환된다.
const curry = require("lodash/fp/curry");

const sayMessageTo = curry((msg, name) => `${message}, ${name}!`);

sayMessageTo("Hello", "Yurim"); // 원하는 결과 바로 반환. "Hello, Yurim!"
const sayBye = sayMessageTo("Bye"); // message를 받았으니, name을 받을 수 있는 새로운 함수 반환
sayBye("Josh"); // 모든 인자 받았다. "Bye, Josh!"
  • 아까 했던 map도 map(num =&gt; num * num, [1,2,3,4])처럼 한번에 호출할 수 있음

함수 조립하기 (Compose functions)

  • 함수를 조립한다는 컨셉은 작은 함수들로 큰 함수를 만든다는 것이다. 각 함수는 리턴된 값을 다음 함수에 넘긴다.
const flow = require('lodash/fp/flow');
const escape = require('lodash/fp/escape');
const trim = require('lodash/fp/trim');

const sanitise = flow(escape, trim);

sanitise('    <html>    '); // <html>
  • 암묵적이고 선언적으로 함수 짜기. 어떻게 되어야하는지 코드를 짜는게 아니고 어떤 일이 일어나야하는지 선언하기.
  • lodash/fp의 함수들은 기본적으로 커리가 되어있어서 더 적은 인자를 넘기면 함수를 돌려준다.
  • composition이 가능한 함수들은 하나의 argument를 넘기고 하나의 value를 다음 함수로 넘기는 형태여야 한다. 맨 처음 함수는 하나 이상의 argument를 넘길 수 있지만 single value를 리턴해야 하는건 동일하다.

Point-free

  • 포인트 프리 스타일(Tacit이라고도 부름) 프로그래밍은 함수가 그들이 수행해야 하는 arguments를 명시하지 않는 패러다임이다.
// Before
function isSuccess(response) {
  if (response.status === 200) {return true;}
}
isSuccess(response);

// After
const isSuccess = flow(get('status'), isEqual(200));
isSuccess(response);

순수 함수(Pure functions)

  • 외부 스코프에 의존이 없는 함수. 넘긴 인자에만 영향받고 이를 변형하면 안되며 새로운 객체를 넘겨야 한다.

Refer

https://simonsmith.io/dipping-a-toe-into-functional-js-with-lodash-fp/

[Git] Pull Request를 보내기 전에, Rebase를 해야 할까요 혹은 merge commit을 만들어야 할까요?

Rebase vs Merge commit

목적: PR을 보내기 전에 내가 보낼 브랜치가 master와 fast-forward(컨플릭트 없이 바로 머지될 수 있는 상태)상태가 되도록 만든다.

그런데 매번 이렇게 할 필요는 없고,
1. PR을 보낼 브랜치가 master보다 너무 옛날 상태일때나
2. GitHub에서 PR을 보냈더니 ‘merge conflict warning’이 페이지에서 보일 때 (같은 코드가 고쳐졌을때 자동으로 보임)
만 하면 된다.

방법 1. (내 브랜치에 먼저 머지 후 풀리퀘)

  • master의 최신 상태를 내 브랜치에 merge시킨다.
  • master와 내가 똑같은 파일을 고쳤다면 conflict가 날 것이다. 그럼 해결한다.
  • 해결해서 만들어진 merge commit을 push한다 (merge commit이 새로 하나 생김)
  • 장점: 한 번의 ‘merge’만으로 쉽게 해결할 수 있다.
  • 단점: merge commit이 생겨서 깔끔하지 않다. 코드 수정한 의미있는 커밋만 보고싶을텐데 말이다.

방법 2. (리베이스 후 풀리퀘)

  • master의 최신 상태를 base로 해서 내 브랜치를 rebase한다.
  • rebase의 원리는, 내가 원하는 커밋을 base로 해서 내 브랜치가 마치 그 커밋에서 딴 것처럼 기록을 조작하는 것이다.
  • 내부에서 돌아가는 방식은, 내가 원래 딴 커밋에서부터 내가 목표하는 base커밋까지 하나씩 옮겨가면서 새로 커밋을 하는것이다.
(원래상태)

[3시커밋 --- 4시커밋 --- 5시커밋] 
  ㄴ--- 내브랜치커밋

(5시커밋을 베이스로 리베이스를 실행한다)
[3시커밋 --- 4시커밋 --- 5시커밋] 
              ㄴ--- 내브랜치커밋 // 한 커밋씩 옮겨가며 commit한다. 컨플릭이 나면 고쳐준다.

(Continue rebase를 누른다)
[3시커밋 --- 4시커밋 --- 5시커밋] 
                        ㄴ--- 내브랜치커밋 // 목표하는 5시커밋까지 왔다. 컨플릭이 나면 고쳐준다

  • 모두 완료되었으니 push를 해야하는데, 히스토리를 조작하는 위험한 작업이므로 force옵션을 넣어 push해야한다.
  • 결과: 내브랜치커밋이 master의 최신 상태인 5시커밋에서 딴 것처럼 히스토리가 조작된다. 그래서 내 브랜치에서 master로 Pull Request를 보냈을 때 fast-forward(컨플릭트 없이 바로 머지할 수 있는) 상태가 된다.
  • 장점: merge commit없이 깔끔한 커밋 히스토리를 만들 수 있다.
  • 단점: 만약 중간에 코드 컨플릭트가 나면 그 사이에 있는 커밋들 모두에서 컨플릭트를 수정해줘야 할 수 있다. 귀찮다.

언제 무엇을 써야하나?

  • Type 0. master에서 딴지 그리 오래 되지 않은 브랜치: 그냥 PR을 보내본다. conflict warning이 보이면 그 때 2번이나 3번 방법을 쓴다
  • Type 1. 내 브랜치에 커밋이 엄청 많다. 그리고 master랑 비슷한 코드를 만져서 컨플릭트가 날 가능성이 높다: 방법 1(내 브랜치에 먼저 머지 후 풀리퀘)을 사용한다.
  • Type 2. 내 브랜치에 커밋이 그리 많진 않다. 깔끔한 커밋 히스토리를 남기고 싶다(오픈소스 등): 방법 2(rebase)를 사용한다.

ZEPL(Apache Zeppelin) 노트북 Ultimate Chart Parameter별 안내

Screen Shot 2018-10-07 at 8.10.16 PM

 

Chart name Category Option
Ultimate line chart
Charts
line(shared)
dashed(shared)
step(shared)
no-group
Available Columns
xAxis
yAxis
Category
Parameters
bulletType
bulletSize
hideBulletsCount
yAxisValueFormat
yAxisValuePrecision
yAxisValueInside
showXAxisScroll
showYAxisScroll
chartMarginLeft
chartMarginRight
showLegend
legendValueText
legendPosition
xAxisPosition
yAxisPosition
rotateXAxisLabel
rotateYAxisLabel
balloonText
balloonType
yAxisGuides
trendLines
mainTitle
subTitle
xAxisName
yAxisName
xAxisUnit
yAxisUnit
logarithmicYAxis
inverted
graphType
dateFormat
dashLength

[CSS] 반응형으로 정사각형 만들기

결론: after요소에 padding-bottom을 100% 넣어주면 된다.
내부에 다양한 크기에 컨텐츠가 있다면, position: absolute인 width, height 100%인 div로 감싸준다.

<div class="note">
    <div class="inner">
        <div class="title">{noteData.title}</div>
    </div>
</div>
.note {
  border: 1px solid red;
  &amp;:after { /* after로 반응형 정사각형 만들기 */
    content: &quot;&quot;;
    display: block;
    padding-bottom: 100%;
  }
  .inner { /* 내부에 컨텐츠가 있을 때 추가 */
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

Refer

https://spin.atomicobject.com/2015/07/14/css-responsive-square/

광광 울며 정리하는 Javascript의 this

전역에서 함수를 할당하면 window로 들어가는구나. 그래서 그 속에서 this를 찍어보면 Window객체가 나온다. new Foo()로 초기화하면 예상했던 대로 Foo { }가 나오고. 면접에서 털리고 광광 울며 정리중

 
js에서 모든 함수는 실행시마다 함수 내부에 this가 추가. arguments라는 유사 배열 객체와 함께 암묵적으로 전달. 그렇기 때문에 함수가 호출된 상황에 따라 그 모습을 달리 함.

  • this: 함수의 현재 실행 문맥. js에선 4가지의 함수 실행 타입이 있기 때문
      1. 함수 실행: alert(‘hi’)
      1. 메소드 실행: console.log(‘hello’)
      1. 생성자 실행: new RegExp(”)
      1. 간접 실행: alert.call(undefined, ‘hello’)
    • 각각의 타입은 서로 다른 문맥을 가진다. 더욱이 strict mode또한 실행 문맥에 영향을 미친다.
  • 즉시실행함수 역시 함수 실행의 종류 중 하나
var greeting = (function(name) {
    return 'Hi' + name;
})('Jay');
console.log(greeting)
  • 함수 실행에서의 this는 전역 객체다. 전역 객체는 실행 환경에 따라 결정. 웹 브라우저에선 window가 전역 객체.
function sum(a, b) {
    console.log(this === window); //true
    this.myNum = 20; // this에 추가했고, 전역인 window에 추가됨
    return a + b;
}

function strictSum(a, b) {
    'use strict';
    console.log(this === undefined); //true
    return a + b;
}
sum(1, 2); // 3. 함수 호출 -> 여기서 this는 전역 객체
window.myNum; // 20. this에 추가했는데 윈도우에 추가됨
  • 엄격 모드에서의 함수 실행 this
    • 위의 예제에서 만약 위에 ‘use strict’;를 적어줬다면, this는 undefined가 된다.
    • 엄격 모드는 현재 스코프 뿐만 아니라 내부 스코프에도 적용됨
var numbers = {
   numberA: 5,
   numberB: 10,
   sum: function() {
     console.log(this === numbers); // => true
     function calculate() {
       // this는 window, 엄격 모드였으면 undefined
       console.log(this === numbers); // => false
       return this.numberA + this.numberB; // numbers에 접근 불가
     }
     return calculate();
   }
};
// 이는 객체 내에 있는 메소드를 실행하는 것. 이 실행시의 this는 window
numbers.sum(); // NaN, 엄격 모드였으면 TypeError

refer: http://webframeworks.kr/tutorials/translate/explanation-of-this-in-javascript-1/

[일일코딩 #32] Two Sum

[일일코딩 #32] Two Sum

Question

링크
Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example:
Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

My Answer

var twoSum = function(nums, target) {
  for (var i = 0; i &lt;nums.length; i++) {
    var lastIdx = nums.lastIndexOf(target - nums[i]);
    if(lastIdx &gt; 0) return new Array(i, lastIdx);
  }
};

lastIndexOf로 풀었다. 처음엔 Array 초기화 할 때 var answerArr = []로 해서 answerArr.push(a, b)로 넣었는데 코드 줄인다고 위처럼 바꿨더니 성능이 조금 더 줄었다. 변수 할당보다 new Array 로 하는게 더 오래걸리나보다.

Other’s answer

3가지 방법을 제시함.
1. 브루트 포스: 포문 2번 돌면서 뺀 값이 있나 찾기
2. Two pass hash table: 잘 이해 안감 왜 굳이?
3. One-pass hash table: 내가 푼 방법. 뺀 값이 map에 있나 확인