개발여행의 블로그

Hooks의 등장 배경 리액트 hook의 역사는 recompose 라이브러리에서 시작되었다. recompose의 아이디어는 hook과 굉장히 흡사하다. 함수형 프로그래밍을 적용하여 개발되었으며, state를 주는 방식이다. 끝내 recompose 라이브러리는 리액트 팀에 의해 인수되었다. 2018년 10월 25일 recompose의 업데이트는 중단되었다. Andrew Clark은 facebook 팀에 합류해서 hook을 릴리즈했다. https://github.com/acdlite/recompose GitHub - acdlite/recompose: A React utility belt for function components and higher-order components. A React utility..

리액트란? 자바스크립트 라이브러리 중 하나로 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 그는 PHP용 HTML 컴포넌트 프레임워크인 XHP에 영향을 받았다. 2011년 페이스북의 뉴스피드에 처음 적용되었다가 2012년 인스타그램닷컴에 적용되었다. 2013년 5월 JSConf US에서 오픈 소스화되었다. (출처-위키피디아) 리액트는 어떻게 등장했는가? 리액트가 존재하기 전, 이미 많은 라이브러리와 프레임워크들이(Jquery, Backbone, AngularJS 등) 존재했다. 특히 jQuery가 등장했을 때 엄청난 센세이션이었던 것으로 들었다. 수많은 브라우저에 맞춰 ..

React에는 총 9개의 Life Cycle 메서드가 존재한다. 먼저 메서드의 접두사 별로 나눠서 그 차이를 알아보자! will : 작업을 작동하기 전에 실행되는 메서드 did : 어떤 작업을 작동한 후에 실행되는 메서드 라이프사이클은 mount, update, unmount 이렇게 세 가지의 카테고리로 나뉜다. 차례대로 하나씩 알아보자! mount DOM이 생성되고 웹 브라우저 상에 나타나는 것 mount 될 때 호출하는 메서드 ✅ constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 ✅ getDerivedStateFromProps : props에 존재하는 값을 state에 넣을 때 사용하는 메서드 ✅ render : UI를 렌더링하는 메서드 ✅ componentDidMo..

모던 자바스크립트 deep dive를 공부하면서 정리한 글입니다. Reference - 모던 자바스크립트 deep dive 인터넷 주소창에 URL을 입력했을 때 사용자가 web 페이지를 보기까지 어떤 과정을 거치는가? 먼저, 간단하게 렌더링 과정을 정리해보면 아래와 같다. 1. 브라우저가 HTML, JavaScript, CSS, image, font file 등의 리소스를 서버로 요청하고 응답받기 2. 브라우저의 렌더링을 담당하는 엔진은 응답 받은 HTML과 CSS를 parsing하여 DOM(document obeject model)과 CSSOM(css object model)을 생성 3. DOM와 CSSOM을 결합하여 Render Tree 생성 4. 브라우저의 자바스크립트 엔진은 응답 받은 JavaSc..

지난 포스팅에서 iterble과 the iterable protocol 그리고 iterator와 the iterator protocol에 대해 알아보았다. https://developerntraveler.tistory.com/135 [JavaScript] 왜 Object(객체)는 Iterable object가 아닌것일까? 콘솔에 이것저것 작성하면서 놀고(?) 있을 때 문득 Object는 왜 iterable 하지 않은지 의문이 생겨서 폭풍 서치를 시작했다. (맞지 않은 내용이 있다면 댓글 부탁드립니다. 미리 감사합니다!) Iterable이 developerntraveler.tistory.com 이번 포스팅에서는 the iteration protocols의 예시를 살펴볼 것이다. String은 built-i..

콘솔에 이것저것 작성하면서 놀고(?) 있을 때 문득 Object는 왜 iterable 하지 않은지 의문이 생겨서 폭풍 서치를 시작했다. (맞지 않은 내용이 있다면 댓글 부탁드립니다. 미리 감사합니다!) Iterable이란? iteration protocol을 따르는 객체를 iterable이라고 한다. 쉽게 말하면 iterable은 배열을 일반화한 object인 것이다. '반복 가능한'이라는 의미의 iterable을 풀어서 생각해보면, 반복 가능한 객체가 iterable object가 되는 것이다. 예를 들어, 배열, 문자열 등이 iterable이다. 그럼 여기서 Iteration protocol 은 무엇인가? 먼저 protocol에 대해 정리해보자! 컴퓨터와 컴퓨터 혹은 컴퓨터와 다른 장비 사이에서 데이..