디자인&인터렉션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는 글로벌