Width를 100%로 했는데 왜 자꾸 100%가 넘어가지? margin적용이 왜 안되는 거야... CSS 기본 박스 모델 입문 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 developer.mozilla.org css로 html 요소들을 배치할 때, 가끔 원하는 대로 height/width나 padding, margin 등이 설정되지 않는 경우가 있습니다. 이는 대부분 box model 개념 때문인 경우가 많습니다. 브라우저에서 각 태그들을 렌더링하고 배치할 때, CSS Box Model을 기준으로 레이아웃을 계산합니다. 이 Box Model은 co..

CommonJS & AMD(Asynchronous Module Definition) 옛날 html에서 주로 보조적인 용도로 많이 사용했었던 javascript는 module에 대한 개념이 크게 활성화되지 않았었습니다. html에서 다른 사람이 작성하거나 분리되어 작성된 모듈을 사용하려면, script상단에서 사용할 모듈을 불러오고 window 프로퍼티로 저장된 모듈을 내 스크립트에서 사용해야 했습니다. 하지만 문제는 모든 모듈이 window 객체에 전역으로 등록되다 보니 변수명이 같으면 충돌이 일어나서 일일이 다 체크해야 했습니다. 그래서 이러한 문제들을 해결하기 위해서 다양한 모듈 라이브러리들이 만들어졌고 대표적으로 CommonJS와 AMD가 있습니다. 현재 Node에서는 CommonJS와 ES6 mo..

Iterator pattern은 배열과 같은 순차적인 데이터를 순회하기 위한 방법으로, javascript ES6(ECMA2015) 버전부터 Symbol과 함께 추가된 개념입니다. ES6전에는 여러 가지 컬렉션 관련 라이브러리들이 각자의 방법으로 순회 방법들을 제공했었지만, ES6에서는 공식적으로 Iterator/Iterable Protocol을 적용하여 순차적인 데이터의 순회 방식을 통일시켰습니다. Iterator pattern을 이용함으로써 기본적으로 순차적인 데이터 처리에서부터 지연 평가나 ES6에서 제공하는 for...of나 spread 및 rest 기능들을 사용할 수 있습니다. # Iterator&Iterable Protocol Iterator&Iterable Protocol은 아래와 같이 몇가..