평소 clipping과 masking 속성의 차이점을 알고 계시나요? CSS 속성을 다시 공부할 때마다, “아, 이런게 있었구나!”할 정도로, 매번 업무에 적용하기에는 특별한 속성인 것 같습니다. 우선, 결론적으로, 두 속성의 차이점은 clipping은 벡터 패스이고, masking은 래스터 이미지입니다. 벡터(Vector)는 점과 점 사이의 곡선으로
현재, 네이버 예약은 앉은 자리에서 주문과 결제를 한 번에 진행할 수 있는 로컬페이 CBT를 진행중에 있습니다(보시면 많이 이용해주세요^^). 이번 로컬페이 UI개발을 진행하면서 개인적으로 가장 중점을 둔 부분이 애니메이션 입니다. 애니메이션 효과는 사용자로 하여금 인터렉션에 대한 피드백은 물론 소소한 재미를 선사해 줍니다. 아래는 이번 로컬페이에 적용한
PhamtomJS는 헤드리스 브라우저(사용자 인터페이스 미제공)이며 웹페이지 자동화에 사용됩니다. 브라우저(IE, Chrome, Safari, etc.) 화면없이 자바스크립트 API를 통해 웹을 컨트롤 할 수 있는 강력한 도구입니다. 오늘은, 팬텀JS의 다양한 기능 중 스크린 캡쳐에 대해 알아 보도록 하겠습니다. 서비스 개발 시 스크린 캡쳐는 왜 필요한가
디자인&인터렉션UI개발을 하시면서 많이 접하시는 디자인이며 간단한 인터렉션과 노출조건이 들어가 있습니다. 하나는 상품을 확인할 수 있는 캐로셀 UI 컴포넌트이며, 다른 하나는 각 이미지에 설명이 들어가 있는 리스트 구조의 UI입니다. 초록색 박스로 그러져있는 설명 부분은 일정 높이에서 펼치기 버튼이 노출됩니다. 우선, 매우 간단한 구조이며, 기존
12let v1 = 123;v1 = 'abc'; 타입스크립트에서 위와같이 선언시 두 번째 v1은 타입 에러가 발생합니다. 이는 첫 번째 할당 시 문자열이 아닌 숫자가 변수에 담겨서 입니다. 이것을 타입추론(type inference)이라고 합니다. 두 가지 모두 변수에 담기 위해서는 두 가지 타입을 명시해줘야 합니다. 12let v1: number | s
자바스크립트에는 클래스라는 개념대신 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 언어입니다. 프로토타입은 크게 두 가지로 나뉘어 집니다. 프로토타입 객체를 참조하는 prototype 속성(Prototype Object) 과 객체 멤버인 proto 속성이 참조하는 숨은 링크(Prototype Link) 입니다. 다시말해, proto (숨은링크)
Higher-Order Components HOC는 컴포넌트 로직을 재사용하기 위한 리액트의 고급기술입니다. 함수로서 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴합니다. 1const EnhancedComponent = higherOrderComponent(WrappedComponent); 기존 컴포넌트가 props를 받아 UI를 만들었다면, HOC는 컴
리액트 라이프 사이클리액트버전 16.3에서 새로운 라이프 사이클 2개가 소개되었습니다. getDerivedStateFromProps, getSnapshotBeforeUpdate 이며 기존에 사용하던componentWillMount, componentWillUpdate, componentWillReceiveProps 는 점차 지원이 중단되어 버전 17에서는
자바스크립트에서 this 키워드는 좀 특별합니다. ES5에서는 bind 메소드를 사용해서 this 키워드를 설정 할 수 있으며, ES2015에서는 arrow functions 을 사용해서 고유의 this 키워드를바인딩 할 수 있습니다. (렉시컬 컨텍스트 안에 this를 유지) Global context함수 밖, 글로벌 실행 컨텍스트에서 this는 글로벌