console - Web APIs | MDN The console object provides access to the debugging console (e.g., the Web console in Firefox). The specifics of how it works vary from browser to browser or server runtimes (Node.js, for example), but there is a de facto set of features that are typically developer.mozilla.org 디버깅을 위해 console.log만 주구장창 찍던 과거를 반성하며... console.count 함수나 코드가 실행된 횟수 계산 가능 호출된 횟수만 기록 함수나 코드에..
회사 프론트엔드 개발 문서 규칙에 적혀있었다. 그래서 그 이유를 한 번 더 되짚어 보았다. 브라우저 렌더링 과정을 생각해보면 DOM이 변경될 때마다, DOM 트리 생성 및 파싱 작업을 재수행한다. (Reflow가 일어난다) → 비효율적이고 렌더링 부담이 큼 Virtual DOM이 이 문제를 해결 Virtual DOM은 자바스크립트 객체이기 때문에 변경에 대한 부담이 적다. Virtual DOM과 실제 DOM의 차이점을 파악하여 그 부분만 변경되도록 한다. (Reconciliation) → React와 Vue 등은 가상 DOM을 사용하고 있다. 결론적으로 DOM을 직접 조작하는 것은 렌더링 성능에 큰 영향을 끼치지 때문에 특별한 경우가 아니면 getElementById 등의 메서드를 통해 JS로 DOM을 ..
1) 함수란?함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수 내부로 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다. 또한 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구별하기 위해 식별자인 함수 이름을 사용할 수 있다. 함수는 함수 정의(function definition)을 통해 생성한다. 함수를 실행하기 위해서는 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시해야 한다. 이를 함수 호출(function call/invoke)이라 한다. 함수를 호출하면 코드 블록에 담긴 문들이 일괄적으로 실행되고, 실행 결과,..
의존성 주입이란? 기존 컴포넌트 기반 아키텍처는 상위에서 하위로 데이터를 전달할 때(props), props를 사용하지 않는 컴포넌트에도 props를 선언하고 전달해야 하는 Props Drilling의 문제가 있었다. 이를 해소하기 위해 redux, recoil, vuex, pinia 등 다양한 상태 관리 라이브러리를 사용하여 props를 전역 변수로 관리하는 방법을 이용하기도 했다. vue3부터는 vue 자체적으로 중간 컴포넌트를 지나지 않고도 상위에서 하위로 props를 전달할 수 있는 기능을 제공한다. 그것이 바로 의존성 주입(Provide Injection)이다. 즉, props drilling 없이 상위에서 하위로 의존성을 제공하는 것이다. 사용법 사용법 또한 굉장히 간단하다. 상위 컴포넌트에서..
기존 서비스의 기능 및 페이지를 확장하게 되며, 타입스크립트 정의 방법에 대해 고민을 하게 됐다. 기존에는 서비스 규모가 작았기 때문에 declare로 타입 인터페이스를 정의해두었는데, 이번에 확장하며 필요한 인터페이스의 개수가 많아졌다. 그래서 declare과 export(모듈화) 방식의 성능 차이나 장단점을 알아봤다. 1. 전역적으로 선언하는 경우 (declare) 장점: 편리하게 전역적으로 사용 가능 (별도의 Import 문이 필요하지 않음) 일부 라이브러리와 외부 모듈과의 통합이 간편할 수 있음 단점: 전역 네임스페이스 오염 위험 코드가 커질수록 유지보수가 어려워짐 성능 저하의 가능성이 있음 (일반적으로 미미함) 2. 모듈화된 인터페이스 사용하는 경우 (export) 장점: 네임스페이스 충돌과 오..
Array.prototype.fill() - JavaScript | MDN Array.prototype.fill() - JavaScript | MDN Array 인스턴스의 fill() 메서드는 배열의 인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경합니다. 그리고 수정된 배열을 반환합니다. developer.mozilla.org Array.prototype.fill ES6에서 도입된 fill 메서드는 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다. 이때 원본 배열이 변경된다. const arr = [1, 2, 3]; arr.fill(0); console.log(arr); // [0, 0, 0] 두 번째 인수로 요소 채우기를 시작할 인덱스를 전달할 수 있다. const arr = [1, 2..
in 연산자 - JavaScript | MDN in 연산자 - JavaScript | MDN in 연산자는 명시된 속성이 명시된 객체에 존재하면 true를 반환합니다. developer.mozilla.org in 연산자를 사용하여 객체의 존재 유무를 판단할 때 가끔 의도치 않은 결과가 반환되는 경우가 있다. 그 이유는 in 연산자는 명시된 속성이 명시된 객체에 존재하면 true를 반환하기 때문이다. 즉, 객체가 undefined로 설정되어 있어도 그것을 true라고 반환하는 것이다. in 연산자에서 false를 반환하기 위해서는 처음부터 정의되지 않았거나 delete 연산자를 통해 제거된 속성이어야 한다. 이러한 문제 발생의 가능성을 제거하고자 다른 방법을 사용하여 객체의 포함 여부를 확인하였다. 포함 ..
자바스크립트가 제공하는 7가지 데이터 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다. 원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다.▪️ 원시 값은 변경 불가능한 값이다. 이에 비해 객체는 변경 가능한 값이다.▪️ 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수에는 참조 값이 저장된다.▪️ 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. (값에 의한 전달) 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. (참조에 의한 전달) 1) 원시 값변경 불가능한 값한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다. 이러한 원시 값의 특성..
1) 객체란?자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 “모든 것”이 객체다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다. 원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 값은 변경 불가능한 값이지만 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있으며, 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라..
결론은 NO. 동적 프로퍼티 할당이 성능을 저하시키지는 않는다. 그 이유는 자바스크립트 엔진이 성능 최적화를 위해 Hidden Class를 사용하기 때문이다. 자바스크립트 엔진 성능 최적화 - Hidden Class 자바스크립트는 동적 타입 언어이기 때문에 객체를 생성할 때 메모리를 얼마나 할당해야 하는지 모른다. 따라서 속성이 추가될 때마다 랜덤한 주소에 메모리를 할당하고 그 속성을 다루기 위해 딕셔너리 랜덤한 메모리에 접근해야 한다. 또한 객체의 속성들이 언제 바뀔지 모르기 때문에 Name-Value 쌍을 항상 유지해야 한다. 이러한 방식은 자바스크립트가 다른 언어에 비해 느려질 수 밖에 없는 한계를 가지게 만든다. V8 엔진에서는 이를 최적화 시키기 위해 런타임에 내부적으로 숨겨진 클래스를 만들어 ..
