N-Log

[CSS] 박스 비율을 유지하며 여러 비율의 이미지 담기

꿈꾸는 제노 — Mon, 3 Jun 2019 15:01:04 +0900

가로와 세로의 비율이 고정돼있는 박스에 이미지를 넣어야 할 경우, 이미지의 크기가 해당 비율로 고정돼있으면 문제가 없겠지만, 어떤 비율의 이미지가 들어올지 모를 경우에는 이미지가 튀어나오는 문제가 발생한다. 이를 해결하기 위한 가장 단순한 방법은 박스에 overflow: hidden 속성을 주는 것이다. 그럼 당연히 튀어나온 만큼의 이미지는 보이지 않게 된다. 하지만 이 방법은 여러 문제가 있다.

1. 튀어나온 부분을 숨기는 것이기 때문에 이미지가 잘릴 수밖에 없다. 심지어 잘린 뒤 보이는 부분은 중앙 부분이 아닌, 좌측 상단 부분이다.

2. 반응형을 고려하기 위해 width를 퍼센트로 둘 경우, width는 브라우저의 크기가 줄어들면 같이 줄어들지만, height는 그대로다. 즉, 박스의 가로 세로 비율을 유지하지 못한다.

See the Pen oRmWaP by WOOJE (@wjnoh) on CodePen.

이런 상황인 것이다. 하지만 우리가 원하는 건 다음과 같다.

1. 박스 내에 빈 공간이 생기더라도 이미지의 비율은 유지되거나, 잘리더라도 좌측 상단이 아닌 중앙 부분이 보여야 한다.

2. 브라우저의 크기가 줄어들더라도 박스의 비율은 그대로 유지돼야 한다.

마치 인스타그램 마이페이지에 있는 썸네일처럼 말이다.

박스의 크기가 정방형으로 고정돼있다. 브라우저를 줄여도 정방형은 유지된다.

실제 이미지는 어떤 비율의 이미지가 들어올지 모른다. 위 경우 가로가 긴 이미지지만 썸네일에서는 중앙 부분만 보여준다.

해결법은 다음과 같다.

See the Pen QRYdrq by WOOJE (@wjnoh) on CodePen.

1. thumbnail-wrapper는 width를 조절할 수 있는 박스다. 반응형으로 구성한다면 해당 값은 %가 될 것이다.

2. thumbnail은 padding-top을 가지는데, padding은 %로 값을 줄 경우, width의 크기에 비례하는 특성이 있다. 즉 padding-top이 100%면 width의 100%만큼 padding-top이 높아지는 것이다. thumbnail-wrapper에 따로 height를 주지 않았기 때문에, 전체 박스의 크기는 정방형이 된다. 만약 70%로 두면 4:3 비율이 될 것이다.

3. thunbnail-centered는 정방형이 된 박스에 이미지를 위치시키는 역할을 한다. position: absolute 속성과 translate 속성으로 위치를 잡아준다.

4. thunbnail-img는 마찬가지로 translate로 위치를 잡아준다. 여기서 만약 max-width의 값을 100%로 두면 박스 내에 빈 공간이 남더라도 이미지의 비율은 그대로 유지된다. 해당 값이 없을 경우, 이미지는 중앙만을 보여준다. 이때 height 속성이 중요하다. height 속성은 최상위 박스(thunbnail-wrapper)의 높이가 돼야 한다. 이는 자바스크립트를 사용해 wrapper의 높이를 받아온 뒤 넣어주면 된다.

자바스크립트에서의 모나드

꿈꾸는 제노 — Sat, 18 May 2019 15:02:25 +0900

함수 합성 시, 함수에 어떤 값이 들어올지 모르는 상황에서의 함수 합성을 어떻게 하면 안전하게 할 수 있을까?

const g = a => a + 1;
const f = a => a * a;

console.log(f(g(1)));	// 4
console.log(f(g()));	// NaN

위와 같은 경우가 문제가 된다. 숫자가 들어갈 경우에는 제대로 함수 합성이 되겠지만, 값이 들어가지 않을 경우에는 NaN이 반환된다. 이를 해결하기 위한 모나드는 예컨대 아래와 같다.

[1].map(g).map(f).forEach(r => console.log(r));		// 4
[].map(g).map(f).forEach(r => console.log(r));		//

배열이라는 박스를 만들어 map 함수를 통해 배열 내부의 요소에 g 함수와 f 함수를 적용한다. 그리고 forEach 함수로 배열 내부의 요소를 순환하며 반환하는 것이다. 이 경우 Array에 요소가 없다면 forEach에서 내보낼 요소도 없어지므로 아무것도 반환하지 않게 된다. 이러한 모나드 관점에서 Promise를 바라보면 어떨까?

Promise.resolve(1).then(g).then(f).then(r => console.log(r));	// 4
Promise.resolve().then(g).then(f).then(r => console.log(r));	// NaN

Promise의 then으로 함수 합성을 시도하면 값이 없을 경우 NaN을 반환한다. 모나드가 아니네? 라고 생각할 수도 있겠지만, Promise는 조금 다른 관점에서의 모나드라 할 수도 있다. Promise는 값이 들어있고 들어있지 않고에서의 안전성을 보장하는 것이 아닌, 비동기 상황에서, 즉 딜레이가 발생할 수 있는 값이 들어왔을 때 함수 합성의 안전을 보장해주기 때문이다. 즉 이러한 관점에서 Promise는 비동기시 함수 합성을 보장해주는 모나드라 할 수 있다.

함수형 프로그래밍과 ES6+ / 유인동님

HTTP 1.0과 1.1 그리고 2.0

꿈꾸는 제노 — Fri, 10 May 2019 00:47:17 +0900

HTTP는 HyperText Transfer Protocol의 약자로, WWW상에서 정보를 주고받는 데 사용되는 프로토콜이다.

문서화된 최초의 HTTP는 1991년에 만들어졌다. 이름에 HyperText라고 명시가 돼있는 만큼 초기 버전에는 HTML 파일만 주고받을 수 있고 메서드도 GET 밖에 없는 굉장히 단순한 형태였다. 이때에는 따로 버전 번호가 없었기 때문에 이후의 HTTP와 구분하기 위해 HTTP 0.9라 불린다.

이후 HTTP 1.0이 등장했는데, 이 때부터 전송의 성공과 실패 여부를 알 수 있는 상태 코드가 생겨났고, 헤더 개념이 요청과 응답 모두에 도입됐으며, 이 헤더(Content-Type)의 도움으로 HTML 뿐만아니라 다른 문서들도 전송 가능하게 되었다.

그리고 1997년 초, 드디어 현재까지도 가장 많이 쓰이는 HTTP의 첫 표준인 HTTP 1.1이 등장했다.

그리고 2015년, HTTP 2.0이 발표되었다.

1.0에서 1.1까지 1년이라는 시간이 걸렸던 반면, 1.1에서 2.0까지는 16년이라는 시간이 흘렀다. 16년이라는 세월 동안 웹은 빠르게 발전했고, 무엇보다도 개별 사이트가 필요로 하는 리소스의 양이 엄청나게 커졌다. 1.1에서 2.0으로의 발전 또한 이러한 변화에 맞춰졌다.

HTTP의 진화 - MDN

HTTP 2의 탄생 배경과 특징

HTTP 1.1 vs HTTP 2.0 차이점 간단히 살펴보기

[JS] forEach, for in, for of의 차이

꿈꾸는 제노 — Sun, 5 May 2019 00:25:58 +0900

forEach는 Array의 prototype을 상속받은 객체가 사용할 수 있는 함수이다. 반복문이 아니라 '함수'이다. 인자로 함수를 받아 각 배열의 요소에 해당 함수를 적용한다.

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

arr.forEach(item => {
  console.log(item);
});

// 1 2 3 4 5

for in은 Object에 있는 key에 차례로 접근하는 데 사용되는 반복문이다. Array에도 사용할 수도 있지만 일반적으로 Object를 제외한 객체에는 사용하지 않는 것이 좋다. 왜냐하면 for in으로 순회를 하게 되면 해당 요소뿐 아니라 prototype chain을 따라 확장 속성들도 함께 순회하기 때문이다. 아래 예시를 보자.

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

Object.prototype.foo = function() {
  return 0;
};

for (const key in object) {
  console.log(key, object[key]);
}

// a 1 b 2 c 3 foo function()...

object의 요소뿐 아니라 Object의 prototype으로 만들어 둔 foo 함수까지 함께 순회하는 모습을 볼 수 있다. 이러한 이유 때문에 for in은 Object의 key를 순회하기 위해 불가피하게 사용하는 것이 아니라면 사용하지 않는 것이 좋다. Object를 for in이 아닌 다른 방법으로 순회하고 싶다면, Object의 내장 메소드인 keys()를 사용하면 된다.

마지막으로 for of이다. for of는 이터러블한 객체의 순회를 도와주는 반복문이다. 때문에 Array만 반복할 수 있는 forEach와 다르게, 내부에 [Symbol.iterator]를 가진 객체라면 어떤 객체든 순회할 수 있다. 하지만 iterable하지 않은 일반 Object에는 사용할 수 없다.

const gen = function*() {
  yield 1;
  yield 2;
  yield 3;
};

for (const value of gen()) {
  console.log(value);
}

// 1 2 3

* 요약

1. forEach는 Array를 순회하는 데 사용되는 Array의 메소드.

2. for in은 Object의 key를 순회하기 위해 사용되는 반복문. 단, 확장 속성까지 함께 순회한다는 점 고려.

3. for of는 이터러블한 객체를 모두 순회할 수 있는 강력한 반복문!

더 자세한 내용은 링크도 참고.

함수형 프로그래밍과 ES6+ / 유인동님

[JS] 코드를 값으로 다루는 go, pipe, curry 함수 만들기

꿈꾸는 제노 — Fri, 3 May 2019 23:19:34 +0900

코드를 값으로 다룬다면 전체적인 코드의 표현력을 높일 수 있다. 이를 위해 주로 사용하는 함수들인 go, pipe curry 함수를 한 번 구현해 보자. 우선 go 함수이다. go 함수는 인자로 함수들을 받아 차례로 실행시켜 결과에 해당하는 값을 리턴하는 함수이다.

const go = (...args) => reduce((a, f) => f(a), args);

go(
  0, 
  a => a + 1, 
  a => a + 10, 
  a => a + 100, 
  console.log	// 111
);

예시를 먼저 보면, 처음에 0을 받아 다음 인자로 넘기고, 그다음에는 인자로 받은 값을 +1, 그다음은 +10, 그다음은 +100 해준다. 그리고 마지막에는 인자를 console.log에 넣어준다. 이러한 go 함수는 reduce로 쉽게 구현이 가능하다. 인자들을 스프레드 연산자를 사용해 이터러블 객체로 받아오고, reduce로 해당 요소들을 차례로 실행하는 것이다.

pipe 함수는 go와 비슷하지만 값을 리턴하는 것이 아닌, 함수를 리턴하는 함수이다. go는 인자로 받은 함수들을 모두 실행시켜 결과에 해당하는 값을 리턴하지만, pipe는 인자로 받은 함수들을 모두 합쳐 합성된 함수를 리턴한다.

const pipe = (f, ...fs) => (...as) => go(f(...as), ...fs);

const f = pipe(
  (a, b) => a + b,
  a => a + 10,
  a => a + 100
);

console.log(f(0, 1));	// 111

pipe 함수는 내부적으로 go 함수를 사용한다. 단, pipe 함수의 첫 번째 인자를 값이 아닌 함수로 받을 수 있도록 하기 위해, 첫 번째 함수인 f와 나머지 함수인 ...fs를 따로 받는다. 그렇게 리턴된 합성된 함수는 인자(...as)를 받게 되면 go 함수를 의 인자로 함수를 넣어 차례로 함수를 실행시킬 때, 첫 번째 받은 함수에 해당 인자(...as)를 넣어 먼저 실행하게 하고, 그다음에 나머지 함수들을 차례로 실행시키도록 한다.

curry 함수는 받아둔 함수를 원하는 시점에 평가하도록 하는 함수이다. 여러개의 인자가 필요한데 하나의 인자만 받았을 경우 다음 인자를 받을 수 있도록 기다리는 함수를 만드는 것이다. 개념에 대해서는 따로 정리해둔 글이 있다.

const curry = f => (a, ..._) => (_.length ? f(a, ..._) : (..._) => f(a, ..._));

const mult = curry((a, b) => a * b);
console.log(mult(3)(2));	// 6

const mult3 = mult(3);
console.log(mult3(3));	// 9
console.log(mult3(4));	// 12

curry 함수를 받아 함수를 리턴하는데, 리턴된 함수의 인자가 여러개일 경우(_의 length가 0 이상일 경우)에는 받아둔 함수를 즉시 실행하고, 인자가 여러 개가 아닐 경우에는 함수를 다시 리턴하는데, 리턴된 함수가 인자를 받았을 때 앞서 받아둔 인자와 이후에 받은 인자를 합쳐서 실행하게 된다.

curry 함수는 앞서 구현했던 map, filter, reduce 함수와도 함께 사용할 수 있는데, 이렇게 만들어진 currying map, currying filter, currying reduce 함수는 go 함수와 함께 사용할 때, 리턴된 인자를 다음 함수의 두 번째 인자로 다시 넘겨줘야 하는 번거로움을 없애준다. 아래와 같이 말이다.

// Before
go(
  products,
  products => filter(p => p.price < 2500, products),
  products => map(p => p.price, products),
  prices => reduce(add, prices),
  console.log
);

// After
go(
  products,
  filter(p => p.price < 2500),
  map(p => p.price),
  reduce(add),
  console.log
);

함수형 프로그래밍과 ES6+ / 유인동님

[JS] 이터러블 프로토콜을 따르는 map, filter, reduce 함수 만들기

꿈꾸는 제노 — Mon, 29 Apr 2019 22:44:29 +0900

기본적으로 우리가 알고 있는 자바스크립트의 map 함수의 경우 Array를 상속받은 객체만 사용할 수 있는 함수이다. 즉 일반적으로 사용하는 Array의 경우에는 prototype으로 map 함수가 구현이 돼있어 map 함수를 사용할 수 있지만,

document.querySelectorAll("*");

위와 같은 경우에는 이터러블 객체임에도 불구하고 Array를 상속받은 객체는 아니므로 map 함수를 사용할 수가 없다. 그러니 이터러블 프로토콜을 만족하는 객체라면 어떤 객체든 사용할 수 있는 map 함수를 한 번 만들어 보자.

const arr = [1, 2, 3, 4, 5];
const nodes = document.querySelectorAll("*");

const map = (f, iter) => {
    let res = [];
    for(const a of iter) {
        res.push(f(a));
    }
    return res;
}

console.log(map(e => e * 3, arr));    // [3, 6, 9, 12, 15]
console.log(map(e => e.nodeName, nodes));    // ["HTML", "HEAD", "META", "META", "META", "TITLE", "BODY"]

이터러블 객체를 순회하는 for of 문을 이용해 이렇게 만들어주면, Generator 함수를 포함해 이터러블 프로토콜을 만족하는 모든 객체를 반복해 반환할 수 있다. filter 함수도 마찬가지다 filter 함수도 Array.prototype에 구현된 함수이므로, 모든 이터러블 객체가 사용할 수 있게 만들려면 아래와 같이 함수를 따로 만들어 주면 된다.

const arr = [1, 2, 3, 4, 5];
const nodes = document.querySelectorAll("*");

const filter = (f, iter) => {
    let res = [];
    for(const a of iter) {
        if(f(a)) {
            res.push(a);
        }
    }
    return res;
}

console.log(filter(e => e > 2, arr));    // [3, 4, 5]
console.log(filter(e => e.nodeName === "META", nodes));    // [meta, meta, meta]

reduce 함수도 똑같다. 다만 reduce 함수는 시작 value를 주지 않았을 경우도 감안해서 함수를 만들어야 한다. 때문에 조건문을 걸어 만약 시작 value인 acc가 없을 경우(세 번째 파라미터가 없을 경우)에는 이터러블 값의 첫 번째 값을 next()로 뽑아 acc로 해주었다.

const arr = [1, 2, 3, 4, 5];
const add = (a, b) => a + b;

const reduce = (f, acc, iter) => {
    if(!iter) {
        iter = acc[Symbol.iterator]();
        acc = iter.next().value;
    }
    for(const a of iter) {
        acc = f(acc, a);
    }
    return acc;
}

console.log(reduce(add, 0, arr));    // 15

함수형 프로그래밍과 ES6+ / 유인동님

VSCode Terminal, Git Bash로 변경하기

꿈꾸는 제노 — Tue, 9 Apr 2019 01:14:13 +0900

VSCode에 기본 터미널이 PowerShell일 경우 간혹 안먹히는 명령어가 있다.

기본 터미널을 Git의 Bash로 바꾸려면 설정에서,

1
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe"
cs

Bash가 있는 경로를 기본 터미널로 명시해주면 된다.

[JS] 콜스택과 이벤트루프

꿈꾸는 제노 — Fri, 22 Feb 2019 01:56:28 +0900

V8엔진은 크게 메모리 할당이 이루어지는 메모리힙과 콜스택으로 이루어져있다. 거기에 더해 브라우저에서의 웹API와 이벤트루프, 콜백큐가 존재한다.

자바스크립트는 싱글쓰레드 프로그래밍 언어이므로, 콜스택은 하나만 존재한다. 즉, 한번에 하나의 일만 할 수 있다. 함수가 실행되면 해당 함수는 콜스택 위에 차곡차곡 쌓이고, 실행이 끝나면 가장 윗부분의 것이 POP된다. 만약 함수가 함수를 계속 재귀로 불러와 스택이 넘칠 경우 스택이 오버플로우된다.

싱글쓰레드는 데드락과 같은 멀티쓰레드 기반 환경에서 대처해야하는 상황을 신경쓰지 않아도 되는 장점이 있지만, 동기적이기 때문에 앞선 함수가 실행되는 동안에는 뒤 함수가 처리되지 않는다는 단점이 있다. 뒷 작업이 블로킹 되는 것이다.

때문에 지금 당장 완료될 수 없는 작업은 비동기 처리를 통해 논블로킹하게 처리한다. 이러한 비동기 처리에 사용되는 것이 콜스택, 프로미스 등이다.

여기에서 앞서 말한 이벤트루프와 콜백큐가 필요하다. setTimeout이나 AJAX 처리가 발생할 경우, 콜스택으로 들어간 해당 함수는 웹API로 들어가고, 콜스택에서 빠져나온다. 그리고 나머지 당장 완료될 수 있는 작업들이 차례로 콜스택으로 들어갔다 나오며 완료된 후, 웹API에서의 작업이 끝나면 해당 함수는 콜백큐로 이동한다. 그리고 이벤트루프는 콜백큐에 함수가 있을 경우 해당 함수를 받아 콜스택에 넣는다. 그리고 차례로 함수 내 작업이 실행되면서 콜스택에서 빠져나온다.

자바스크립트는 어떻게 작동하는가: 엔진, 런타임, 콜스택 개관

자바스크립트는 어떻게 작동하는가: 이벤트 루프와 비동기 프로그래밍의 부상

[JS] 커링(Currying)

꿈꾸는 제노 — Tue, 19 Feb 2019 19:19:41 +0900

커링은 여러 개의 인자를 가진 함수를 호출할 경우, 파라미터의 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받도록 하는 것이다. 즉 커링은 함수 하나가 n개의 인자를 받는 과정을 n개의 함수로 각각의 인자를 받도록 하는 것이다. 부분적으로 적용된 함수를 체인으로 계속 생성해 결과적으로 값을 처리하도록 하는 것이 그 본질이다.

말이 어렵다.

간단하게 말하면 함수를 부르는 함수를 만들어 인자를 각 함수가 각각 받는 것이다.

func(1, 2, 3)이 아닌, func(1)(2)(3) 이런 방식으로 말이다.

이러한 함수를 생성할 때는 당연히 함수를 반환하는 클로저 패턴이 사용되는데,

때문에 let func1 = func(1)과 같이 생성해두고 func1(3)(4), func(5)(6)과 같이 변형하면 첫 번째 인자는 고정된 상태에서 다른 인자를 받을 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
function func(a){
    return function(b){
        return function(c){
            console.log(a, b, c);
        }
    }
}
 
func(1)(2)(3); // 1 2 3
 
let func1 = func(1);
func1(3)(4); // 1 3 4
func1(5)(6); // 1 5 6
cs

그래서 커링 함수에서는 인자의 순서가 중요하다.

앞쪽 인자일수록 변동가능성이 적고, 뒤로갈수록 변동가능성이 높아지기 때문이다.

[번역] 초보자를 위한 Currying 가이드

HTTP와 HTTPS의 차이

꿈꾸는 제노 — Tue, 19 Feb 2019 16:12:54 +0900

HTTP는 Hyper Text Transfer Protocold의 약자로, 브라우저와 서버간의 자원을 주고받을 때 사용하는 통신 규약이다.

HTTPS는 그 뒤에 Secure Socket이 붙은 것으로, 보안성을 강화한 것이다.

HTTPS는 통신에서 일반 텍스트를 이용하는 것 대신에, SSL이나 TLS 프로토콜을 통해 데이터를 암호화한다.

패킷을 암호화하는 과정을 거치기 때문에 속도는 더 느리다. 다만 큰 차이가 있을 정도는 아니다. 포트는 443번을 쓴다.

HTTP - TCP

(HTTP는 바로 TCP와 통신한다.)

HTTPS - SSL - TCP

(HTTPS는 SSL을 거쳐 TCP와 통신한다.)

인증 방식에 관한 링크