104%

Mobx를 사용하려고 하던 찰나에 바벨 플러그인으로 @babel/plugin-proposal-class-properties의 loose:true가 사용되는걸 보고 이건 어떤 옵션일까 궁금해서 찾아봤습니다. @babel/plugin-proposal-class-properties이란? 자바스크립트에서도 Class를 사용할 수 있습니다. 하지만, Class내부의 속성들을 선언할때는 바벨 플러그인이 없으면 오류가 납니다. 보통은 아래처럼 class의 constructor에서 변수를 초기화 합니다. / class Example { constructor() { this.abc = '123'; } } 하지만 아래처럼 쓰고 싶은 경우도 있을겁니다. class Bork { // 속성 초기화 문법 instancePrope..

Mobx를 공부하려고 하는데 다른 예제에서 @babel/plugin-proposal-decorators의 legacy: true옵션을 사용하길래 이 옵션은 왜 사용하는건지 히스토리를 알고 싶어 정리했습니다. 아래 글은 바벨 7.1.0 버전이 출시되면서 변경된 내용을 정리한 바벨의 공식 문서입니다. https://babeljs.io/blog/2018/09/17/decorators TC39 Standards Track Decorators in Babel · Babel Babel 7.1.0 finally supports the new decorators proposal: you can try it out by using the [`@babel/plugin-proposal-decorators`](https://..

Given a binary tree, return the sum of values of its deepest leaves. Example 1: Input: root = [1,2,3,4,5,null,6,7,null,null,null,null,8] Output: 15 Constraints: The number of nodes in the tree is between 1 and 10^4. The value of nodes is between 1 and 100. var deepestLeavesSum = function(root) { let maxDepth = 0; const arr = []; const dfs = (root, curDepth) => { if(!root) return; if(!root.left &..

Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the longest path from the root node down to the farthest leaf node. Note: A leaf is a node with no children. Example: Given binary tree [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 7 return its depth = 3. var maxDepth = function(root) { let depth = 0; const dfs = (root, len) => { if(!root) { depth = Math.ma..

leetcode.com/problems/sum-of-left-leaves/ Sum of Left Leaves - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com Find the sum of all left leaves in a given binary tree. Example: 3 / \ 9 20 / \ 15 7 There are two left leaves in the binary tree, with values 9 and 15 respectively. Retur..

셀의 크기를 화면에서 보이지 않는 방식으로 측정한다음 세팅해주는 HOC이다. width나 height중 하나를 고정시켜야 다른 하나를 잴 수 있다. CellMeasurer는 Grid, List, Table에서 사용할 수 있다. CellMeasurerCache CellMeasurer가 측정한 값을 캐싱하는 용도이다. 그 캐싱된 값은 부모인 Grid와도 공유된다. defaultHeight number 셀이 처음 렌더링 될때 기본 값 defaultWidth number 셀이 처음 렌더링 될때 기본 값 fixedHeight boolean 높이를 고정 시키고 너비를 동적으로 fixedWidth boolean 너비를 고정 시키고 높이를 동적으로 minHeight number 계산된 row Height의 최소값 mi..

AutoSizer 부모 element의 너비와 높이를 자식 컴포넌트에 전달해주는 HOC이다. 이걸 활용하면 부모의 너비와 높이만큼 자식을 꽉 채울 수 있다. 옵션값 children ({ height: number, width: number }) => PropTypes.element 이런 형태여야함. className, style AutoSizer에 추가됨 defaultWidth, defaultHeight SSR시 초기 너비와 높이값. 정확한 값이 계산되면 그 값으로 대체됨. disableWidth, disableHeight 고정된 width와 height nonce Nonce of the inlined stylesheets for Content Security Policy onResize 리사이징될때 호..

다른 대부분의 라이브러리들은 jquery로 되어있거나 타이머를 두고 지속적으로 엘리먼트의 변화를 감지하기 때문에 성능이슈가 있었다. 이 포스트에서는 스크롤 이벤트 기반의 엘리먼트 사이즈 변화를 감지할 수 있는 방법에 대해서 소개한다. window.addResizeListener = function(element, fn){ if (!element.__resizeListeners__) { element.__resizeListeners__ = []; if (attachEvent) { element.__resizeTrigger__ = element; element.attachEvent('onresize', resizeListener); } else { if (getComputedStyle(element).pos..