개발자가 되는 과정

자바스트립트는 프로토타입 기반의 언어(prototype based language) 이다. 어떤 객체의 프로토타입에서 복제하여 참조함으로써 클래스 기반언어의 상속과 같은 효과를 낸다. prototype prototype은 객체이다. 인스턴스의 생성자의 원형 객체를 나타낸다. function Person(name) { this.name = name; } Person.prototype.callName = function () { return "my name is " + this.name; }; const julie = new Person("julie"); julie.callName = function () { return "call me " + this.name; }; console.log(julie.cal..

this this는 함수를 호출될 때 결정된다. 어떤 상황에서 this를 사용하느냐에 따라 값이 달라진다. 함수와 객체의 메서드를 구분하는 거의 유일한 기능이라고 한다. 전역공간에서 this 런타임 환경에 따라 달라진다. 브라우저 환경에서는 window, Node.js 환경에서는 global을 의미한다. 자바스크립트에 변수는 특정 객체의 프로퍼티로 동작한다. 전역 변수를 선언하면 자바스크립트 엔진은 이를 전역 객체의 프로퍼티로 할당한다. 함수 호출 this는 전역객체를 가리킨다. 객체의 메서드 호출 this는 객체(호출 주체)를 가리킨다. 생성자 함수에서 this 생성될 인스턴스를 가리킨다. 클래스 생성자 함수에서 this는 그 클래스의 인스턴스를 가리킨다고 이해했다. 정리 this의 챕터를 이해해 보려..

VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보와 외부 환경정보 (EnvironmentRecord), 선언시점의 LexicalEnvironment의 스냅샷이며 변경사항은 반영되지 않는다. LexicalEnvironment : 처음에는 VariableEnvironment와 같지만 변경사항이 실시간으로 반영된다. (VariableEnvironment에 정보를 먼저 담은 후 복사하여 LexicalEnvironment가 만들어진다.) 호이스팅 실행되는데 있어 필요한 정보들을 끌어올려 알고 있는 것으로 변수 정보를 수집하는 과정을 표현하는 가상의 개념이다. (엔진이 실제로 끌어올린건 아니지만 편의상 끌어올린 것으로 간주한다는 것이다.) environmenRecord에는 매개변수 이..

자바스크립트에서 없음을 나타내는 값은 undefined, null이 있다. 이 둘의 차이점에 대해 정리해보려고 한다. undefined 값이 지정될 것이라고 예상되는 상황인데도 불구하고 값이 지정되지 않았을 때, 자바스크립트 엔진은 undefined를 반환한다. 아래와 같은 상황일 때, undefined를 반환한다. undefined는 원시값이다. 값을 대입하지 않은 변수 객체 내부의 프로퍼티가 없는데 접근할 경우 return 문이 없거나 호출되지 않는 함수의 실행결과 값을 대입하지 않은 변수에 undefined가 할당된다고 이해하기 보다는 그 변수에 접근할 때, 할당되어 있지 않으면 undefined를 리턴하는 개념이다. 명시적으로 undefined 값을 할당해 줄 수도 있고, 값을 비워두면 undef..

Optional chaining (?) 값이 존재하지 않을 때, 그 값을 호출하면 에러가 발생하면서 어플리케이션이 중단된다. null이나 undefined일 경우 그 값을 호출 하면 에러가 발생하는데 그 때 에러를 발생시키지 않고 undefined 값을 리턴해주는 역할을 한다. const pet = { age: 2, dog: { name: "lili", }, }; const catName = pet.cat?.name; console.log(catName); //undefined 위와 같은 예시에서 pet.dog.name을 호출하면 lili가 출력되나 존재하지 않는 값인 cat.name을 호출할 경우 에러를 발생한다. 이때 cat이 존재하는지 ?를 붙여서 확인할 수 있다. 존재하지 않기 때문에 undefi..

JS의 메소드와 기능들 자바스크립트를 공부하면서 헷갈리거나 자주 사용하는 메서드, 새롭게 알게된 메서드, 기능 등을 정리해보았습니다. 배열 1. 배열에서 실행 const fruits = ["🥑", "🍉"]; //forEach : 배열의 항목을 순환하며 처리 fruits.forEach((fruit) => console.log(fruit)); // find : 조건 만족하는 첫번째 항목 리턴 const result = students.find((student) => student.score === 90); // some : 배열안에서 조건 통과여부 boolean 으로 반환 const result = students.some((student) => student.score < 50); // every : 배열..

Redux에 대하여 Redux란 ? 리덕스란 상태관리 라이브러리이다. 글로벌 상태관리를 할 때 효과적이며, 애플리케이션에서 상태를 보다 효율적으로 관리할 수 있게 도와준다. 리덕스 라이브러리를 설치하여 JS에서 사용할 수도 있고, 리액트 등의 도구와 함께 사용할 수도 있다. 앱이 지니고 있는 상태와 로직이 들어있는 스토어를 통해서 원하는 상태와 함수를 직접 주입하여 관리한다. 컴포넌트 끼리 상태와 로직을 주고 받는 것이 아니라 좀 더 전역적으로 분리되어 관리하는 개념이다. 다양한 로직에 따라 상태변화를 반영해야 하는 상황에서 상태를 한 스토어에서 관리하고 반영할 수 있는 장점을 가지고 있다. 상태에 변화를 일으키기 위해서는 액션(Action)을 스토어에 전달한다. 스토어는 초기에 생성해준다. 리듀서, 액..

React 성능 개선 방법 1. 리액트의 작동과 Shallow Comparison React에서의 작동 React에서는 업데이트 될 때마다 렌더링을 진행하고, VDOM에서 필요한 요소만 확인하여 실제 DOM에는 필요한 것들만 렌더한다. 그래서 업데이트 될 때마다 리액트는 렌더링이 진행되도 html 전체가 렌더링 되는 것이 아니라 필요 부분만 렌더링 되기 때문에 개선된 성능으로 렌더링되어 화면에 나타나는 것이다. 하지만, 업데이트 시 클래스형 컴포넌트 내부의 render메서드나 함수 컴포넌트등은 호출이 계속된다. 이것은 shallow comparison(얕은비교)를 시용하여 성능을 좀 더 개선할 수 있다. shallow comparison를 활용하면 object의 최상위 데이터(props나 state)가 ..