개발일기

React.Memo 사용 시 두 번째 인자 활용법

React.Memo로 컴포넌트 최적화를 할 때, 두번째 인자에서 props 값이 바뀌었는지를 점검해서 boolean을 리턴. 그런데 만약 비교해야하는 값이 많아지면 어떻게 대응할까? ✅ 전제 요약: React.memo 두 번째 인자의 역할tsx복사편집export default React.memo(MyComponent, (prevProps, nextProps) => { return prevProps.someProp === nextProps.someProp; }); true를 리턴하면 같다고 간주 → 리렌더링 안 함false를 리턴하면 다르다고 간주 → 리렌더링 함 🎯 질문: props가 많아질수록 어떻게 대응해야 하나?✅ 1. 엄격하게 필요한 것만 비교한다 (Partial Equality Check)모든..

보호되어 있는 글입니다.

Prototypeprototype V.S [[Prototype]] V.S constructor 생성자 함수를 new 연산자로 instance를 생성할 경우, constructor의 'prototype'이라고 하는 프로퍼티의 내용이 instance의 [[Prototype]]라고 하는 프로퍼티로 참조를 전달하게 된다.곧, Constructor.prototype과 instance[[Prototype]]은 같은 객체를 바라본다.그런데 [[Prototype]]은 접근 가능한 것이 아닌 정보를 보여주기만 할 뿐, 실제 동작 상으로는 instance와 동일시되며, 이 프로퍼티를 이용해 constructor.prototype에 직접 접근할 수는 없다.생성자의 프로토타입은 인스턴스를 가리킨다.리터럴로 생성한 배열이든, ..

클로저(Closure)MDN says: A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). ... In Javascript, closures are created every time a function is created, at function creation time.내부 함수와 LexicalEnvironment의 조합 실행 컨텍스트 A 내에서 함수 B를 생성한 경우, A(실행 컨텍스트)의 lexical environment와 내부함수 B의 조합에서 나타나는 특별한 현상 컨텍스트 A에서 선언한 변수를 내부함수..

콜백 함수(callback function)함수를 처리해달라고 요청하고, 이 요청을 넘겨받은 쪽에서 알아서 작업을 한 다음 처리가 끝난 뒤 요청한 쪽으로 알려주는 것.( callback 함수에 대한 제어권을 넘긴다는 것을 의미(= 제어권 위임) )제어권을 위임한다는 것은 아래의 것들을 넘겨준다는 것을 의미한다.실행 시점매개변수this1. 실행 시점 setInterval SPEC => setInterval(callback func, milliseconds) callback Func를 milliseconds 뒤에 setInterval 함수가 실행시켜준다. 사용자가 milliseconds 마다 callback func에 있는 내용을 호출해줄 필요 없이. setInterval(() =..

[ 앤드류 후버만 says 30배 효율 늘리는 학습 방법 ] 1. 공부 계획(홀로 공부하며 하루 3~4시간씩 2번 공부할 타임 슬롯을 빼둘 것) 2. 가르치고 설명하는 능동적인 학습. 3. 셀프 테스트를 많이 해야 한다. 셀프 테스트는 학습 직후(공부 후에) & 시험 직후에 해야한다. 셀프 테스트 형식은 짧은 단어를 떠올리는 빈칸채우기, 혹은 개방형 질문을 통해서 내용을 이해한 후 답을 제시하는 방법 공부 후 5~10초 정도라도 더 생각해볼 것. 최소 5분만이라도 셀프 테스트를 할 것. 램슬맆 상태에서 정리되는 효율과 맘 먹는다. 4. 크고 야심찬 목표를 가질 것.  자신이 해야만 하는 이유를 알고, 야심찬 꿈을 갖고 생활해야 한다.  힘이 들 때마다 그 목표를 상기하여 꾸준하게 나아갈 수 있는 원동력을..

this 바인딩- this binding은 실행 컨텍스트가 활성화 될 때 한다.(= 실행 컨텍스트가 생성되는 순간에 this를 바인딩한다.)- 실행 컨텍스트는 컨텍스트에 해당하는 함수가 호출될 때 생성된다. 곧 this는 함수가 호출될 때에 비로소 결정되는 것이다. 그렇기에 정적으로 코드만 봤을 때 어떤 것의 this가 무엇이다 바로 예측할 수 있는 것이 아니라 이 함수를 어떤 식으로 호출했느냐에 따라서 this가 얼마든지 달라질 수 있다.(= this는 동적으로 바인딩 된다.) 호출하는 방식에 따른 this* 아래의 다섯가지에 대한 차이점을 이해하면 this에 대해 완벽하게 정리할 수 있다.전역공간에서 호출할 경우함수를 함수로서 호출할 경우함수를 메서드로서 호출할 경우함수를 callback 함수로 넘겼..

1무합 D-30 생활 패턴 (p266~)이 시점에 사람들의 반응은 아래와 같이 나뉜다.평소에 하던 대로 꾸준히 한다.평소에 하지 않던 벼락치기 공부법을 갑자기 시도한다.포기하거나 도망간다.멘탈이 약할수록 요행을 바라서는 안된다.시험 시간에 맞춰 공부하기시험 한 달 전부터는 공부시간을 시험 시간에 맞춰 짠다.시간대에 맞춰 공부하는 과목도 바꿔서 하는 연습을 한다.자고 일어나는 시간 맞추기적어도 4주전(만약 수험 형태에 따라 벼락치기를 꼭 해야하는 시험이라면 일주일 전에 바꾸는 것을 추천)부터는 수면 패턴을 시험 날에 맞추는 것을 추천한다. 나는 6시간 정도 잠을 자며 공부했지만 30일 전부터는 조금 더 늘려 7시간 정도 자면서 신체 컨디션을 최상의 상태로 맞추기 위해서 노력했다.자는 시간과 일어나는 시간도..

Execution Context= 코드를 실행하는데 필요한 주변 환경= 코드의 배경이 되는 조건/환경= 코드를 실행하는 데에 필요한 배경이되는 환경= 함수를 실행할 때 필요한 환경정보를 담은 객체 javascript에서 동일한 조건을 지닐 수 있는 환경은 4가지(전역공간, 함수, eval, module) 밖에 없다.eval은 여러 문제를 야기하는 몹시 위험한 명령자바스크립트 코드가 실행되는 순간에 바로 전역 컨텍스트가 생성되고, 전체 코드가 끝날 때에 비로소 전역 컨텍스트가 종료되기에 '전역공간'은 거대한 함수 공간이라고 볼 수 있다.module도 import 되는 순간에 그 모듈 내부에 있는 컨텍스트가 생성이 되고 그 모듈 코드가 전부 끝났을 때 컨테스트 종료되기에 module 또한 하나의 함수 공간이..

JS typeprimitive, reference type으로 구성primitive(원시값)number, string, boolean, null, undefined, Symbol (ES6에 Symbol이 추가)Reference(참조값)Object(객체): Array, Function, RegExp, Set / WeakSet, Map / WeakMap (Set, WeakSet, Map, WeakMap 등 ES6에 추가되었다.)이 두 타입을 구분하는 이유가 있다. 이 두개의 타입은 메모리에 저장되는 형식이 다르기 때문이다.javascript 메모리 구조는 Stack Memory와 Heap Memory 영역으로 구성되어 있다.스택 영역에는 변수, 기본형 데이터 저장(정적 할당)힙 영역에는 참조형 데이터(동적 ..