leetcode.com/problems/maximum-depth-of-n-ary-tree/ Maximum Depth of N-ary Tree - 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 DFS로 푸는 문제이다. 2진트리가 주어지면 최대 depth를 return #include #include #include using namespace std; // Definition for a Node. class Node { public: int val; vector ..
고차컴포넌트 컴포넌트 logic을 재사용하기 위한 React의 고급 기술이다. React API가 아닌 리액트의 특성에서 나오는 패턴이다. 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수이다. 컴포넌트는 props를 UI로 변환하는 한편, 고차 컴포넌트는 새로운 컴포넌트로 변환한다. 고차 컴포넌트는 Redux의 connect와 Relay의 createFragmentContainer와 같은 서드 파티 React library에서 흔하게 볼 수 있다. 횡단 관심사(Cross-Cutting Concerns)에 고차 컴포넌트 사용하기 만약 외부로 부터 데이터를 subscribe하여 댓글 목록을 Rendering하는 컴포넌트가 있다고 하자. 그리고 블로그의 Post를 구독하기 위해 비슷한 패턴의 컴..
Hoisting - 호이스팅은 모든 선언을 (var, let, const, function 등)을 해당 유효범위의 가장 위로 끌어올린다는 느낌으로 이해하면 된다. - 주의할 점으로 물리적으로 코드의 상단으로 옮겨지는 것은 아니다. - 따라서 메모리에서의 변화는 없다. 코드에서 입력한 위치와 정확히 일치한 곳에 있다. - 호이스팅이 발생하는 이유는 변수의 생성과 초기화가 분리되어 진행되기 때문이다. - var, let, const 모두 hosting이 적용 되며, let, const 키워드는 TDZ에 의한 제약으로 변수 선언 이후에 사용 가능하다. (var, let, const 키워드에 대한 정리 kmj24.tistory.com/70) console.log(hoisting); //undefined var ..
#include #include using namespace std; struct TreeNode { int val; TreeNode *left; TreeNode *right; TreeNode() : val(0), left(nullptr), right(nullptr) {} TreeNode(int x) : val(x), left(nullptr), right(nullptr) {} TreeNode(int x, TreeNode *left, TreeNode *right) : val(x), left(left), right(right) {} }; class Solution { private: queue q; public: void run(TreeNode* root) { //DFS preOrder(root); cout..
1. styled컴포넌트만을 이용했던 것을 scss, styled컴포넌트로 나눔 2. Wrapper컴포넌트 수정 3. 로그인 페이지 / 회원가입 페이지 수정 기존 로그인, 회원가입 페이지는 Wrapper컴포넌트의 navbar, sidebar를 화면에 포함한 형태가 아니었지만 어색한 느낌이 들어서 화면에 모두 출력. 4. 회원가입 페이지 컴포넌트 분할 및 유효성 검사 개발 리팩토링 하면서 가장 만족하는 부분이다. 기존에는 하나의 컴포넌트에서 모든 상태를 관리하면서 코드가 굉장히 비대해졌었는데, 각 input 마다 컴포넌트를 분할하여 코드의 복잡성을 크게 줄였다. 기존에는 왜 이렇게 할 생각을 못했을까..,? 소소하게 하나 배우고 간다,,,, ^-----------^ 해야될 것 1. 회원가입 페이지 - 유효..
React에서 컴포넌트가 여러 element를 반환하는 것은 흔한 패턴이다 Fragment는 DOM에 별도의 Node를 추가하지 않고, 여러 자식을 그룹화할 수 있다. return ( ); 다음과 같은 컴포넌트가 있다. class Table extends React.Component { render() { return ( ); } } 위의 컴포넌트가 유효하려면 Columns 컴포넌트는 td 엘리먼트만 반환해야 된다. Columns 컴포넌트가 div로 감싸져 있다면 이는 잘못된 html이 된다. // tr태그 아래에 div태그가 있으면 안된다. Hello World 이러한 오류상황을 해결하기 위해 Fragments를 이용할 수 있다. Columns 컴포넌트를 React.Fragment로 감싸는 것이다. c..
Ref 전달은 컴포넌트를 통하여 자식 중 하나에 ref를 자동으로 전달하는 기법이다. 일반적으로 application대부분은 컴포넌트에 필요하지 않지만, 재사용 가능한 컴포넌트 라이브러리와 같은 어떤 컴포넌트에는 유용할 수 있다. function FancyButton(props) { return ( {props.children} ); } 위와 같이 button을 Rendering하는 컴포넌트가 있다. FancyButton을 사용하는 다른 컴포넌트들은 일반적으로 내부 button DOM요소에 대한 ref를 얻을 필요가 없다. 하지만 이런 캡슐화는 FeedStory나 Comment와 같은 Application level의 컴포넌트에서는 바람직하지만, 재사용성이 높은 말단 요소에서는 불편할 수 있다. 이러한 ..
UI의 일부분에 존재하는 Javascript에러가 전제 application을 중단하면 안된다. 이러한 문제를 해결하기 위해 error boundary가 도입되었다. Error boundary는 하위 컴포넌트 트리의 어디서든 javascript에러를 기럭하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React컴포넌트이다. Error boundary는 Life cycle method 및 그 아래의 전체 트리에서 오류를 잡아낸다. Error boundary는 다음과 같은 오류는 잡지 않음 - Event Handler - 비동기 코드 - Server Side Rendering - Error boundary에서 발생하는 오류 Life Cycle method인 static getDerivedStateFrom..