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

가로와 세로의 비율이 고정돼있는 박스에 이미지를 넣어야 할 경우, 이미지의 크기가 해당 비율로 고정돼있으면 문제가 없겠지만, 어떤 비율의 이미지가 들어올지 모를 경우에는 이미지가 튀어나오는 문제가 발생한다. 이를 해결하기 위한 가장 단순한 방법은 박스에 overflow: hidden 속성을 주는 것이다. 그럼 당연히 튀어나온 만큼의 이미지는 보이지 않게 된다. 하지만 이 방법은 여러 문제가 있다. 1. 튀어나온 부분을 숨기는 것이기 때문에 이미지가 잘릴 수밖에 없다. 심지어 잘린 뒤 보이는 부분은 중앙 부분이 아닌, 좌측 상단 부분이다. 2. 반응형을 고려하기 위해 width를 퍼센트로 둘 경우, width는 브라우저의 크기가 줄어들면 같이 줄어들지만, height는 그대로다. 즉, 박스의 가로 세로 비..
WEB/CSS 6년 전

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

함수 합성 시, 함수에 어떤 값이 들어올지 모르는 상황에서의 함수 합성을 어떻게 하면 안전하게 할 수 있을까? 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 함수를 통해 배열 내부의 요소에..
WEB/JS 6년 전

HTTP 1.0과 1.1 그리고 2.0

HTTP는 HyperText Transfer Protocol의 약자로, WWW상에서 정보를 주고받는 데 사용되는 프로토콜이다. 문서화된 최초의 HTTP는 1991년에 만들어졌다. 이름에 HyperText라고 명시가 돼있는 만큼 초기 버전에는 HTML 파일만 주고받을 수 있고 메서드도 GET 밖에 없는 굉장히 단순한 형태였다. 이때에는 따로 버전 번호가 없었기 때문에 이후의 HTTP와 구분하기 위해 HTTP 0.9라 불린다. 이후 HTTP 1.0이 등장했는데, 이 때부터 전송의 성공과 실패 여부를 알 수 있는 상태 코드가 생겨났고, 헤더 개념이 요청과 응답 모두에 도입됐으며, 이 헤더(Content-Type)의 도움으로 HTML 뿐만아니라 다른 문서들도 전송 가능하게 되었다. 그리고 1997년 초, 드디어..
WEB/ETC 6년 전

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

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 = { ..
WEB/JS 6년 전

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

코드를 값으로 다룬다면 전체적인 코드의 표현력을 높일 수 있다. 이를 위해 주로 사용하는 함수들인 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..
WEB/JS 6년 전

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

기본적으로 우리가 알고 있는 자바스크립트의 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) => ..
WEB/JS 6년 전

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

V8엔진은 크게 메모리 할당이 이루어지는 메모리힙과 콜스택으로 이루어져있다. 거기에 더해 브라우저에서의 웹API와 이벤트루프, 콜백큐가 존재한다. 자바스크립트는 싱글쓰레드 프로그래밍 언어이므로, 콜스택은 하나만 존재한다. 즉, 한번에 하나의 일만 할 수 있다. 함수가 실행되면 해당 함수는 콜스택 위에 차곡차곡 쌓이고, 실행이 끝나면 가장 윗부분의 것이 POP된다. 만약 함수가 함수를 계속 재귀로 불러와 스택이 넘칠 경우 스택이 오버플로우된다. 싱글쓰레드는 데드락과 같은 멀티쓰레드 기반 환경에서 대처해야하는 상황을 신경쓰지 않아도 되는 장점이 있지만, 동기적이기 때문에 앞선 함수가 실행되는 동안에는 뒤 함수가 처리되지 않는다는 단점이 있다. 뒷 작업이 블로킹 되는 것이다. 때문에 지금 당장 완료될 수 없는..
WEB/JS 6년 전