개발/Front End

개발/Front End

React Hook 내용 정리

React? f(data) = View React Element : type과 props를 가지는 객체 react element는 단일 태그로 감싸져있어야 함 로 감싸는 방식을 많이 사용한다 를 사용해도 됨 React Element는 immutable 하다 ReactDOM.render( reactElement, containerDOM, [callback] ) ReactDOM.hydrate( reactElement, containerDOM, [callback] ) hydrate는 render()와 동일하지만 SSR일 때 사용함 React Component의 이해 재사용성을 높여주고 기능별 단위를 만들 수 있게 해준다 f(props) => reactElement Component 구현 2가지 방법 Funct..

개발/Front End

[JavaScript] 이미지 사이즈 구하기

이미지의 사이즈를 구해서 사이즈로 뭔가 작업을 해줘야할 필요성이 있을 때가 있다. Image 객체에 이미지 로딩하고 로딩 완료 시점에 사이즈를 구한다.

개발/Front End

ECMAScript6 길들이기 - 6 프록시

프록시는 객체에 임의의 동작을 넣기 위해 사용한다.자바스크립트에는 ES6부터 처음 도입되었다. 프록시란?프로퍼티 탐색, 할당, 생성자 호출 등 객체 기본 동작에 임의의 로직을 넣기 위해 사용하는 감싸미 용어 정리 - 타깃 : 프록시로 감쌀 객체- 트랩 : 동작을 가로채는 함수- 처리기 : 트랩이 있는 객체(처리기가 트랩을 가진다) 프록시 APIProxy 생성자로 생성하며 다음과 같이 생성함 var proxy = new Proxy(target, handler); - target : 프록시로 감쌀 객체- handler : 트랩이 있는 객체 트랩함수 동작을 가로채는 함수, 반환값을 가로채고 필터링해서 규칙에 부합하지 않으면 TypeError 예외를 발생시킴트랩 내부에서 this는 항상 처리기를 가리킴 get(..

개발/Front End

ECMAScript6 길들이기 - 5 리플렉트 API 구현

자바스크립트에도 자바처럼 리플렉션 기능이 있는데 ES6는 객체 리플렉션 가능한 새 리플렉션 API를 도입했음.ES5 시절에도 있었지만 체계가 없었고 실패하면 예외가 발생했다. ES6 리플렉션에서는 성공 여부로 true/false를 반환한다. Reflect 객체ES6 전역 Reflect 객체에 객체 리플렉션에 대한 모든 메소드가 있다.함수 객체가 아니므로 호출할 수 없고 new 연산자를 붙여 사용할 수도 없다. Reflect 객체의 메소드에 대해 하나씩 살펴본다. Reflect.apply(function, this, args)- function : 타깃 함수- this : 타깃 함수 내부의 this값- args : 타깃 함수의 인자를 지정한 배열 객체 주어진 this 값으로 타깃 함수 function을 a..

bebeside77
'개발/Front End' 카테고리의 글 목록