책 읽다가 코딩하다 죽을래

우리는 흔히 this는 자기 참조, super는 부모 참조라는 간단한 공식으로 그 동작 원리를 쉽게 추론하고 있다. 본 글을 통해 this와 super의 동작 원리에 대해 배워보자 📕 this의 동작 원리 다음 코드 예시를 보자 class Person { age: number; name: string; constructor(age: number, name: string) { this.age = age; this.name = name; } getGoal(): string { return "끝까지 생존하며 자신과 똑같은 형질의 개체를 후손으로 남기는 것"; } introduce(): string { return `안녕하세요. 저는 ${this.name}입니다. ${ this.age }살이며 ${this.ge..

🤔 우린 한 번이라도 고민해본 적이 있지 않은가? 우리가 흔히 아는 배열은 다음과 같다 만약 c언어의 배열인 int sample[5] = [11,22,33,44,55]; 라는 배열이 있다고 생각해보자 그럼 첫번째부터 마지막까지 순서대로 나열되어 메모리에 할당된다는 것은 다 알고 있을 것이다. 여기서 중요한건 메모리에 들어가는 데이터 타입이 한 가지(정수를 나타내는 int는 4byte)로 통일되어있으니 모든 배열의 요소는 4바이트씩 할당되어 빈틈없이 연속적으로 나열된다. 즉 자료구조에서 말하는 배열은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열되는 자료구조이다. 우리는 이러한 배열을 밀집 배열(dense array)라 부른다. 하지만 자바스크립트의 배열은 다르다. const array = [ 's..

🤔 실행 환경을 배워야 하는 이유 코드는 정적이다. 여러분들이 코딩을 끝마치고 컴파일을 하여도 변함이 없고 실제 런타임 때나 서버가 돌아가는 와중에도 코드는 자기가 스스로 변하지 않는다. 하지만 이런 변함없는 코드일지라도 실제 내부적으로는 그 코드 속 변수, 함수들은 항상 똑같이 행동하지 않고, 똑같은 것을 참조하지 않는다. 그것은 대부분 자바스크립트 엔진 작동원리의 핵심 개념인 실행 환경을 알면은 굳이 컴파일을 하지 않아도 예상할 수 있게 된다. 또한 개발자는 당연히 예상이 가능해야지 정상적인 개발을 할 수 있을 것이다. 그러므로 이런 동적인 움직임을 갖고 있는 자바스크립트 코딩을 하려면 실행 환경을 배워야 한다. 또한 이 개념은 hosting, this와도 밀접한 연결이 있다. 📖 실행 환경의 사전적..

🧾 이 강의는 시리즈 별로 되어있습니다. 이 강의를 읽기 전에 확인하세요! 자바스크립트 프로토타입에 대해 지금 같이 알아볼까?[클릭] 이 강의를 읽은 후에 확인하세요! prototpe chaining에 대해 알아봅시다[클릭] prototype에 대해 전혀 모르신다면 위에 있는 링크를 타서 prototype의 개념부터 정리하셔야 이 글을 이해하실 수 있습니다. 이번 시간에는 prototype 개념을 사용해 자바스크립트의 메소드 상속에 대해 다뤄보겠습니다. 📚 메소드 상속 및 동작원리 function Person(n, a){ this.name = n; this.age = a; } const rose = new Person('로제',30); const gisu = new Person('지수',25); rose..

🧾 이 강의는 시리즈 별로 되어있습니다. 이 강의를 읽은 후에 확인하세요! prototype으로 배워보는 메소드 상속 및 동작 원리[클릭] prototype chaining에 대해 알아봅시다 이 글은 인프런 정재남 강사님의 JS Flow 강의를 기반으로 하여 작성하였습니다. 인프런 JS Flow 강의 보러 가기[클릭] 견우(Object.prototype)와 직녀(Object 인스턴스)를 잇는 연결고리는 오작교(인스턴스.[[prototype]])이다. 📚 프로토타입(Prototype)이란? JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다. 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가..

📚 this(자기 참조)란? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메소드를 참조할 수 있습니다. 에서 이웅모 저 즉 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 그래서 this를 소환했을 때의 어떤 실행 컨텍스트에서 불러내었는지를 알면 이해하기 쉬워집니다. 📋 실행 컨텍스트에 따라 달라지는 this this는 다음 실행 컨텍스트에 따라 달라집니다. 전역 공간에서 -> window/global 함수 내부에서 -> window/global 메소드 호출 시 -> 메소드 호출 주체 callback함수에서 -> 함수 내부에서와 동일 생성자 함수에서 -> 인..

React-Redux를 더욱 쉽게 관리하게 만들어주는 immer, redux-action에 대해 배워보자 모듈 설치 방법 yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 immer redux-actions npm i redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0 immer redux-actions 각 모듈에 대한 설명 redux-logger : 웹상에서 redux의 action이 일어날 때마다 콘솔에서 action 내역을 이쁘게 보여주는 모듈 이런 식으로 action이 일어날..