나만보는개발공부블로그

for ... in 객체의 열거 가능한 속성을 반복하는데 사용됩니다. 객체의 프로퍼티를 열거하며 프로퍼티의 이름 또는 키를 반환합니다. 객체의 프로토타입 체인까지 열거할 수 있다고 합니다. Object.prototype.customObj = function() {} 배열에도 사용할 수 있지만, 배열의 인덱스가 아닌 배열 요소의 키를 반환합니다. Object.prototype.customFn = function() {}; const obj = { a: 1, b: 2, c: 3 }; for (const key in obj) { console.log(key); // "a", "b", "c", "customFn" 출력 } const arr = [1, 2, 3]; for (const index in arr) { ..

async/await문법을 map과 forEach에서 사용하게 될 경우 내가 원하는 흐름처럼 작동하지 않을것이다. forEach나 map을 통해 루프를 진행할경우 병렬이기 때문에 await을 기다리지 않고 function내의 로직만 처리하기 때문이라고 한다. 예시코드 let slugs = []; const batches = lodash.chunk(libraries, 50); batches.map(async (batch) => { //this will return Promise return await batch.something(); }) 해결방안 //Reading in sequence for(const batch of batches) { await batch.something(); } //Reading ..

공통 컴포넌트를 만들거나 순수 함수에서 전달 받는 인자 값들의 타입이 하나로만 지정되지 않고 보통은 여러 개의 Props 및 인자를 전달받아야하는상황이 옵니다. 타입의 Generic이라는 개념을 이용해 받는 타입을 다양하게 설정할수있는걸로 알고 있습니다. React의 라이브러리 내부 안의 index.d.ts를 살펴봐도 아래와 같이 설정되어있습니다. type FC = FunctionComponent; 위에서는 P는 사용자가 임의로 설정한 값이라고 생각하면 되고 P가 받는 값은 {}으로 되어있습니다. 이제 제가 작성하려고 하는 공통 컴포넌트는 다음과 같습니다. type ComponentProps = { someData: Array } //여기에 제너릭을 어떻게 설정할까? export default cosnt..

splice(start, deleteCount, item1, item2, item3, etc.) - start : 시작 인덱스, 만약 배열 크기보다 크면 배열의 크기에서 시작됨, 음수인 경우 배열의 끝에서부터 요소를 세어나간다. - deleteCount: 시작 인덱스부터 삭제할 갯수 - item1, item2,... : 시작 인덱스에 넣을 아이템 요소값 - splice()는 배열의 요소 순서를 유지시키기 위해 제거시키는 요소가 생성 된 구간(구멍?)이 끝까지 이동되고 배열 크기를 조정하여 제거 할 수있을 때까지 요소의 절반을 계속 이동시키게 된다. - splice()는 linear time(선형 시간)을 따른다. https://262.ecma-international.org/6.0/#sec-array.p..

변수를 복사하다보면 바라보는 객체도 동일하게 되고 두개의 변수 중 하나만 변경되어도 나머지 하나도 동일하게 수정되는 현상이 발생한다. -자바스크립트에서는 기본 자료형(숫자,문자열,boolean)의 값을 복사할 때 값을 완전히 복사한다. let s = "test"; let t = s; s = "hi"; console.log(t); 위의 경우 t에 s의 값을 복사해주고 s의 값을 변경했지만 t의 변화는 없는데 t에 값만 복사 한 경우이다. let s = ['a','b','c']; let t = s; t[0]='d'; console.log(s); 객체의 경우에는 s의 첫 인덱스를 변경했더니 같이 변경되는 현상이 발생한다. 이것이 객체의 특징인데 객체는 다른 변수에 대입할때 값을 복사하는 게 아니라 참조인 메모..

호이스팅이란? - 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 범위의 최상단에 선언하는 것 - var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성 let 키워드로 선언된 변수를 선언문 이전에 참조하면 참조 에러가 발생하는데 스코프의 시작에서 변수의 선언까지 일시적 사각지대에 빠지기 때문이다. * 일시적사각지대=TDZ(Temporal Dead Zone) : 초기화되지 않은 변수가 있는 곳. 변수가 초기화 되는 순간 TDZ에서 나오게 되며 사용할 수 있게 되는 것. 변수 생성 과 호이스팅이 이루어지는 과정 변수는 3단계에 걸쳐서 생성된다. 1. 선언 단계(Declaration Phase) : 변수를 실행 컨텍스트의 변수 객체에 등록한다. 변수 객체는 ..