Posts in "frontend"

• RxJS로 캐러셀(Carousel) UI 만들기

  

  vincent

  2017-10-08

  UI를 결정짓는 데이터 즉, 상태(State)를 어디에 보관하고 어떻게 필요로 하는 곳으로 전파할 것인가, UI 개발에 있어 상태는 언제나 큰 문제 중 하나입니다. 우리는 상태를 단순히 변수에 보관하거나 비슷한 성질을 가진 데이터를 모아서 객체로 분리하기도 합니다. 변수 변수는 언제든지 다른 곳에서도 쉽게 접근하고 변경할 수 있는 위험성을 가지고 있습니다. 변경된 값이 예측 가능할 수 있지만 그렇지 않을 수도 있습니다. const totalPageNum = 100; let currPageNum = 1; nextButton.addEventListener('click', () => { currPageNum = currPageNum + 1;...
  web frontend rxjs

• SVG를 이용해 간단한 웹 게임 만들어보기

  

  vincent

  2017-07-26

  근래 소규모로 게임 프로그래밍 스터디를 시작했습니다. 서비스 UI를 개발하는 프론트엔드개발자에게 있어 게임 프로그래밍은 언제나 커튼 뒤에 비친 풍경처럼 흐릿하고 형체를 쉽게 알 수 없는 신비한 존재입니다. 이번에 미약하게나마 커튼을 걷어 창문 너머 펼쳐진 풍경을 감상해 보자는 게 이번 스터디의 개인적인 목표입니다. 왜 SVG를 선택했나 게임을 만드는 데 어떤 기술을 사용할지 고민했습니다. 일반적인 DOM은 쉽게 객체를 조작할 수 있지만, 문서의 엘리먼트를 추상화한 것에 불과하므로 다양한 도형을 만들거나 좌표계에 사상(寫像, Mapping)1하기 쉽지 않습니다. 캔버스는 그래픽 처리에 환상적인...
  web frontend

• IntersectionObserver를 이용한 이미지 동적 로딩 기능 개선

  

  fallroot

  2017-07-13

  구글 크롬 51 버전부터 DOM 엘리먼트의 노출 여부를 비동기로 처리하는 IntersectionObserver API를 사용할 수 있게 되었습니다. 이 기능을 이용하면 이미지의 동적 로딩이나 광고 배너의 노출 측정 등을 효율적으로 사용할 수 있다고 구글 개발자 블로그에서 소개하고 있습니다. 이 글에서는 기존의 이미지 동적 로딩에 대한 문제점을 짚어보고 여러 예제를 통해 IntersectionObserver의 사용 방법을 익혀 기존 기능을 개선할 수 있도록 합니다. 사용한 예제들은 브라우저의 호환성을 고려하지 않고 구글 크롬을 기준으로 작성하였습니다. 기존의 이미지 동적 로딩 구현 이미지의 개수가...
  web frontend

• Tabnabbing 피싱 공격의 동작 원리와 대응책

  

  vincent

  2017-06-12

  브라우저에서 사용자의 개인 정보를 가로채는 여러가지 피싱 공격 기법이 있습니다. 이 글에서는 그 중에서도 상대적으로 단순해서 과소평가된 Tabnabbing 공격의 동작 원리와 대응책을 함께 알아보겠습니다.
  web frontend phishing