SmileCat.

2017 Archive

[JS] offsetHeight 와 clientHeight 비교

offsetHeight와 clientHeight의 차이점을 찾아보다 MSDN에서 관련된 이미지들을 보았다. offsetHeight와 clientHeight 뿐만 아니라 엘리먼트에 대한 치수와 위치에 대해 확인할 수 있다. 추가적으로 offsetHeight와 clientHeight 같이 엘리먼트의 위치를 가져와서 계산해야하는 경우에는 Reflow를 피하기 위해 캐시를 사용해야 한다. P.S. <iframe width="100%" height="300" src="//jsfiddle.net/y8Y32/25/embedded/" allow

#javascript

Parcel 리서치

들어가며 Parcel star history 최근 프론트엔드를 개발하면서 코드와 의존성을 하나로 묶어주는 반들러(Bundler)는 떼어놓고 생각할 수 없을 정도로 기본적인 도구이다. 오래전부터 사용되어온 Browserify나 Bundler의 대명사 같은 Webpack뿐 아니라 Rollup을 본지도 얼마 되지 않은 것 같은데, 또다시 주목받는 Bundler가 나타났다. 상단의 이미지와 같이 2주 정도 만에 Github에서 Star의 개수가 만 개가량 증가한 것을 보면 Parcel[파설, /parsəl/]에 대한 사람들의 관심이 어느

#parcel#bundler

[JS] Image lazy load

들어가며 많은 이미지가 있고 페이지에 보이지도 않는 이미지를 미리 받아둘 필요가 없는 경우가 생겼다. 이를 위해 이미지를 나중에 로드하는 방법을 찾아보았고 그 방법을 기록하고자 한다. Vanilla 예제 Vanilla라고 이름을 붙이긴 했지만 이 글에서 이야기하고자 하는 방법들 모두 Vanilla를 쓰기 때문에, 다음에 이야기할 방법과 달리 새로운 API를 사용하지 않고 작성하였기에 Vanilla를 붙였음을 먼저 언급한다. 이 방법에서는 scroll을 추적하여 lazy load할 이미지들 중 보이는 이미지들의 src에 주소를 할

#javascript

[JS] Image preload

들어가며 슬라이드와 같은 방식으로 다음 이미지를 순차적으로 불러와 보여줄 때, 미리 이미지를 불러와 이미지 전환간에 깜박임없이 부드럽게 이미지를 전환하고자 하였다. 이를 위해 이미지를 미리 로드하는 두가지 방법을 기록하고자 한다. JavsScript 예제 이미지들을 순환하며 임시 이미지 앨리먼트에 넣어 미리 로드한 후에 해당 엘리먼트를 제거하는 방식으로 구현한다. JavsScript로 이미지들을 동적으로 미리 로드하고자 한다면 좋은 선택인 것 같다. CSS 예제 CSS에 미리 로드할 이미지들을 등록해서 로드한다. 미리 로드해

#javascript#css

[JS] 배열 초기화 방법들

들어가며 배열을 단순하게 상단과 같이 초기화하곤 했었는데 아래와 같은 코드 리뷰를 받았다. 리뷰를 받고 대충 "A에 대한 모든 값을 날려주니 깔끔하게 지워지겠네."라고 생각이 들었지만, 문든 배열의 초기화에 대해 제대로 찾아본 적은 없어 검색을 해보았다. 검색을 해보니 Stack Overflow에 Philippe Leybaert가 How do I empty an array in JavaScript?라는 질문에 좋은 답변을 한 것이 있어 정리해본다. 이 글에서는 배열에 대한 4가지의 초기화 방법에 대해 제시하고 비교한다. 방법 1

#javascript

[CSS] BEM(Block Element Modifier)

BEM Get BEM에서 BEM에 대해 아래와 같이 정의했다. BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in frontend development BEM은 재사용 가능한 컴포넌트와 코드 공유를 가능하게 하고자하는 CSS 방법론이다. 작명규칙 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 명확하게 만든다. 소문자, 숫자만을 이용해서 작명한다. 여러단어의 조합

#css#bem

DEV FEST 2017 Seoul

DEV FEST 2017 Seoul Why Typescript with Clean Architecture(정유진) TypeScript(실수를 최소화) Clean Architecture 빠른 개발 퍼포먼스 = 서비스의 변화에 따른 코드 변화가 최소한 인 것 Domain(Fact, 100명이 짜도 같다) != UI(Theory, 100명이 짜면 다를 수 있다.) = UI를 보고 Domain을 추측하지 말아라. 사실과 해석을 구분하라. 프론트엔드 모던 프레임워크 낱낱히 파헤치기(한성민) slide 2017 프론트 진형 중

#review#gdg

클로저와 함수

TL;DR 클로저(Closuer)는 객체를 통해서 접근하는 것이 아니라, 함수(Function)를 통해서 접근한다. 들어가기 앞서 틈틈히 읽고 있는 Secrets of the JavaScript Ninja, Second Edition에서 클로저와 스코프에 대한 챕터에서 재미있는 내용을 보아서 이 글을 작성한다. 이 글에서는 클로저에 대한 설명은 하지 않을 것이다. 클로저를 가진 객체 위와 같이 클로저를 가진 객체가 있다. counter 인스턴스의 스코프에 대해 보면 위와 같다. Counter 생성자를 실행하면 새로운 렉시컬 환

#javascript

Critical Rendering Path 최적화 도전기

최근 브라우저가 어떻게 작동하는지 궁금하던 차에 회사 직원분의 공유를 통해 브라우저는 웹페이지를 어떻게 그리나요? Critical Rendering Path라는 글을 접하게 되었다. 해당 글에서 흥미로운 주제인 주요 렌더링 경로(Critical Rendering Path, 이하 CRP) 에 대해서 알게 되어 이와 관련된 Udacity 강좌와 여러 글들에 대해 찾아보게 되었고, 이를 바탕으로 현재 재직하고 있는 회사의 웹페이지에 해당 개념을 적용해보는 도전기를 공유하기 위해 이 글을 작성하고자 한다. 본 글에서는 CRP에 대해 상세

#crp#optimization

PROGRESSIVE WEB APP ROADSHOW 2017 KOREA

지난 23일 PROGRESSIVE WEB APP ROADSHOW 2017 KOREA 가 진행되었고 이에 참석하여 들은 강연들에 대한 리뷰이다. PROGRESSIVE WEB APP ROADSHOW 2017 KOREA Keynote: Progressive Web Apps: What, Why and How 이 키노트에서는 도창욱님께서 Progressive Web Apps이 무엇인지, 왜 필요한지, 어떻게 시작해야하는 지에 대해서 이런저런 사례를 통해서 이야기하였다. Slide 여러분의 첫 Progressive Web App Go

#review