본문 바로가기
[javascript] 생성자 함수는 어떤 과정으로 인스턴스를 생성할까? 생성자 함수는 인스턴스를 생성하기 위한 '템플릿'처럼 동작한다. 즉 인스턴스를 생성하고, 이 인스턴스에 프로퍼티를 추가하고 초기값을 할당하여 초기화 하는 것이다. 아래와 같은 생성자 함수 정의를 보면, 인스턴스를 초기화하는(값 할당) 부분은 있지만 인스턴스를 생성하고 반환하는 코드가 없다. (그래서 아래 Language를 일반 함수처럼 호출하면 반환값이 undefined이기도 하다. - 참고)function Language(name) { this.name = name; this.getName = function() { return 'my name: ' + this.name ; }}; 그런데 어떻게 생성자 함수를 호출하면 객체(인스턴스)가 생성되어 반환되는 것일까?  new 연산자.. 2024. 4. 25.
[javascript] 생성자 함수에 의한 객체 생성 - 언제 필요하고 어떻게 사용하는가? 객체를 생성할때 아래와 같이 객체 리터럴로 객체를 생성하는 것이 가장 간단한 방식일 것이다. const objectByObjectLiteral = { name: 'javascript'};  하지만 아래와 같이 동일한 구조의 객체를 여러 개 생성해야 할 때 (특히 프로퍼티의 갯수가 많고, 동일한 내용의 메서드들이 있는 경우) 객체 리터럴로 객체를 생성하는 방식은 다소 비효율적일 수 있다. 이런 경우에 생성자 함수로 객체를 생성하는 방법을 사용해볼 수 있다. const js = { name: 'javascript'; getName() { return 'my name: ' + this.name ; }};const html = { name: 'ht.. 2024. 4. 18.
[javascript] this 개념과 this 바인딩 이해하기 아래와 같은 생성자 함수가 있다.function Circle(radius) { ...} 이 생성자 함수를 가지고 new Circle(5) 로 새로운 인스턴스를 생성했을때,  인수로 받은 radius 값 5를 생성한 인스턴스의 radius 값으로 할당하려면 어떻게 해야할까?  또, 아래와 같이 Circle의 prototype으로 지름을 구하는 메서드를 추가해서, Circle 생성자 함수가 생성한 인스턴스의 지름을 구하려면 어떻게 해야할까? Circle.prototype.getDiameter = function () { ...}  닭이 먼저이냐 달걀이 먼저이냐의 문제처럼, 생성자 함수 내에서 생성자 함수가 생성할 인스턴스를 참조할 수는 없다. 왜냐하면, 생성자 함수가 먼저 정.. 2024. 4. 11.
리액트 useEffect 제대로 이해하고 똑똑하게 사용하기 - useEffect의 정의 useEffect는 매일 사용하는 Hooks 중 하나이고, 동작 방식을 어느 정도 이해하고 있다고 생각하지만 제대로 알고 있다고 말하기에는 마음에 걸리는 것들이 많은 Hook 이기에, 제대로 정리해보고자 한다. 모던 리액트 Deep Dive 에서는 useEffect의 정확한 정의를 아래와 같이 말한다. useEffect는 애플리케이션 내 컴포넌트의 여러 값들을 활용해 동기적으로 부수 효과를 만드는 메커니즘이다. 우리가 일반적으로 이야기 하는 useEffect의 특징, 즉 의존성 배열이 변경되면 콜백함수를 실행한다, 의존성 배열이 빈 배열인 경우 컴포넌트가 마운트 될 때 실행되고, useEffect가 반환하는 클린업 함수는 컴포넌트가 언마운트 될 때 실행된다 등의 특징들을 한 문장으로 설명하려면, 결국 컴.. 2024. 4. 3.
자바스크립트 객체 프로퍼티 이해하기 2. [프로퍼티 정의] 프로퍼티 정의란, 프로퍼티 어트리뷰트를 정의하는 것을 의미한다. 혹시 프로퍼티 어트리뷰트가 무엇인지 모른다면 아래 포스팅을 통해 먼저 내부 슬롯/내부 메서드에 대해 훑어 보시길 바란다! 자바스크립트 객체 프로퍼티 이해하기 1. [내부 슬롯 & 내부 메서드 ] 내부 슬롯과 내부 메서드 ECMA Script 사양에서는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 내부 슬롯(internal slot)과 내부 메서드(internal method)라는 개념을 사용한다. 이 두 개념은 실제 stay-present.tistory.com 프로퍼티를 정의하는 상황에는 아래 두 가지 상황이 존재한다. 1. 새로운 프로퍼티를 추가하면서 프로퍼티 어트리뷰트를 명시적으로 정의 2. 기존 프로퍼티의 프로퍼티 어트리뷰트를 재.. 2024. 4. 1.
자바스크립트 객체 순회 메서드 : for...in / Object.keys() / Object.values() / Object.entries() / Object.getOwnPropertyNames() / Reflect.ownKeys() JavaScript에서 객체를 열거(enumerate)하는 다양한 방법 중 몇 가지 주요 메서드들을 정리하려고 한다. 이 정도 메서드들은 문제없이 바로바로 쓰고 차이점은 알 수 있도록 익숙해져야지 (제발!) 1. for...in 루프 객체의 모든 열거 가능한 속성을 순회 객체 자체의 속성뿐만 아니라 프로토타입 체인을 통해 상속받은 속성도 순회가 가능하다 const object = {a: 1, b: 2, c: 3}; for (const key in object) { console.log(key, object[key]); } 2. Object.keys() 주어진 객체의 자체 열거 가능한 속성의 이름들을 배열로 반환. (상속받은 속성은 제외) const object = {a: 1, b: 2, c: 3}; Ob.. 2024. 3. 28.
리액트 useState 똑똑하게 쓰기 - lazy Initialization (게으른 초기화) 리액트를 사용하는 프론트 개발자라면 수없이 써봤을 useState 훅에 대해 새로운 사실을 하나 알게 되어 포스팅을 해보려한다. useState의 initalState argument useState훅의 initalState argument 즉, 훅을 호출할때 state의 초깃값으로 전달하는 인수로 값 뿐 아니라, 값을 리턴하는 함수를 넣을 수도 있다. //아래와 같이 초깃값으로 값을 넣을 수도 const [ stateValue, setStateValue ] = useState('defaultValue') //아래와 같이 초깃값으로 값을 리턴하는 함수를 넣을 수도 있다 const [ stateValue, setStateValue ] = useState(() => 'defaultValue') 이와 같이 u.. 2024. 3. 27.
자바스크립트 객체 프로퍼티 이해하기 1. [내부 슬롯 & 내부 메서드 ] 내부 슬롯과 내부 메서드 ECMA Script 사양에서는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 내부 슬롯(internal slot)과 내부 메서드(internal method)라는 개념을 사용한다. 이 두 개념은 실제로 자바스크립트 엔진에서 동작하는 개념이지만, 직접 접근할 수 있도록 공개되어있지는 않다. 하지만 내부 슬롯과 내부 메서드 중 일부에 대해서는 간접적으로 접근할 수 있는 수단이 제공된다. 예를 들어, 객체의 내부 슬롯 [[Prototype]]은 직접 접근할 수는 없지만, __proto__ 를 통해 간접적으로 접근할 수 있다. const javascriptObject= {}; //모든 자바스크립트 객체는 [[Prototype]] 내부 슬롯을 가지고 있다. o.[[Prototype].. 2024. 3. 24.
[프론트 성능 최적화] 1. Lighthouse 검사 결과 및 웹 바이탈 지표(FCP, LCP, TBT, CLS, SI) 이해하기 올해 첫 챕터 (1-2월) 나의 one goal은 내가 개발하고 있는 웹사이트 성능을 개선하는 것인데 google pageSpeed Insight와 lighthouse로 성능을 측정하고, 개선한 후 다시 비교해보기로 했다. 프론트엔드 성능 최적화 가이드 책(우측)과 구글링한 자료를 통해서 lightHouse의 지표들을 이해하고 개선해보는 작업을 진행하려고 한다! lighthouse 에서 검사를 할 때 총 세 가지 모드를 선택할 수 있는데, Navigation 모드는 초기 페이지 로딩 시 발생하는 성능 문제를 분석하는 모드이고, Timespan 모드는 사용자가 정의한 시간동안 발생한 성능 문제를 분석하는 모드이고, Snapshot은 현재 상태의 성능 문제를 분석하는 모드이다. 내가 해결하고 싶은 문제는 웹.. 2024. 2. 12.
반응형

티스토리툴바