본문 바로가기

분류 전체보기

[React] map 함수에 key 값이 필요한 이유 (재조정; Reconciliation) 우리는 React app을 개발하면서 한 번쯤 map 함수를 사용하였을 것이다, 그 때마다 key 값을 넣어야 함도 알고 있다 그 이유에 대해서 한 번 알아보자 React에서 state나 props가 갱신되면 render() 함수는 새로운 Render Tree를 반환하며 reflow/repainting 과정을 거친다. 이를 리렌더링이라고 하는데, 그 중 Render Phase에서 재조정이 일어난다. 이에 대해 React는 최소한의 연산 수를 구하는 O(n) 복잡도의 휴리스틱 알고리즘을 구현하였다 다음 두 가정을 하며 말이다 서로 다른 타입의 두 Element는 서로 다른 트리를 만들어낸다 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 Element가 변경되지 않아야 할지 표시해 줄 수.. 더보기
[Github][ESLint][Husky] Casing of ~ does not match the underlying filesystem import/no-unresolved 에러 Casing of ~ does not match the underlying filesystem import/no-unresolved 이라는 알 수 없는 에러로 한참을 고생했다 https://danieljscheufler.wordpress.com/2018/06/12/til-how-to-resolve-false-positive-eslint-errors/ TIL… How to Resolve false-positive ESLint Errors So a colleague of mine was struggling with our local build process. Every time he ran the npm command, which ran a webpack build, He’d get numerous erro.. 더보기
[React][lodash/debounce] debounce 와 throttling 구현하기 디바운스(debounce)란? 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것 첫 함수를 호출하고 일정한 시간 후까지 연이어 호출되는 함수를 무시되는 것이 아니라, 가장 마지막 함수를 호출하고 일정한 시간 후까지 호출이 안 되면 그 함수를 실행시킨다 vs 쓰로틀링(throttling) 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것 이는 아래에서 소개하는 debounce의 leading 옵션 기능과 같고, 스크롤이 바닥에 닿을 때마다 실행하는 함수 등에 사용할 수 있다 사용 문법 **_.debounce(func, [wait=0], [options={}])** // Avoid costly calculations w.. 더보기
[React][Context] Prop drilling 과 useContext (1/2) Prop Drilling (프로퍼티 내리꽂기) Typescript를 공부하며, Prop interface의 중복을 모듈화 하여 해소할 수 있을까 했는데, 애초에 많이 중복된다는 것은, prop drilling 문제의 가능성이 있을 수 있다고 하여 공부해보았다! Prop Drilling, 그게 뭔가요? Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서, React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정을 말한다. import React from "react"; export default function App() { return ( ); } function FirstComponent({ content }) { .. 더보기
[DB][데이터베이스] 7-2. BCNF & 3NF & 4NF(MD) 1NF (First Normal Form) Features of Good Relational Design Functional Dependencies Decomposition Using Functional Dependencies BCNF (Boyce-Codd Normal Form) 3NF Multivalued Dependencies and 4NF Overall DB Design Process by Prof. Chang Hwan Lee Boyce-Codd Normal Form (BNCF) FD(Frequency Dependencies)의 집합 F에 대한 관계 R은 F+ 형식의 모든 FD에 대해 BCNF를 만족한다 a -> b 일 때, a -> b 는 trivial 이거나(b는 a의 부분집합), a는 supe.. 더보기