한량의 개발블로그

클로저란 함수가 속한 렉시컬 스코프를 기억하여 렉시컬 스코프 밖에서 함수가 실행됨에도 그 렉시컬 스코프에 접근할 수 있는 기능입니다. function outer() { var a = 2; function inner() { console.log(a); } return inner; } var func = outer(); func(); // 2 함수가 종료되었음에도 함수 안에서 선언됐던 변수를 참조하고 있는 함수가 있다면 Garbage Collector가 해당 참조를 없애지 않습니다. 클로저 사용 예시 1. 데이터 보존 함수가 종료되었음에도 외부 함수에 있던 변수를 참조할 수 있는 기능 덕분에 데이터를 보존할 수 있습니다. 특정 데이터를 특정 스코프안에 가둬놓고 필요한 경우 사용할 수 있습니다. 2. 캡슐화,..

정의 스코프란 자바스크립트 엔진이 참조의 대상이 되는 식별자(Identifier)를 검색할 때 사용하는 규칙의 집합(구간)이다. 즉, 어떤 변수를 사용하거나 함수를 호출하려고 할 때 선언된 식별자로 사용하는데, 그 식별자를 검색하는 메커니즘이라고 이해하면 된다. 렉시컬 스코프 프로그래머가 코드를 짤 때, 변수 및 함수/블록 스코프를 어디에 작성하였는가에 따라 정해지는 스코프를 렉시컬 스코프라고 한다. "렉시컬 "이라는 명칭이 붙은 이유는 자바스크립트 컴파일러가 소스코드를 토큰(Token)으로 쪼개서 의미를 부여하는 렉싱(Lexing)단계에 해당 스코프가 확정되기 때문이다. 쉽게 말해, 변수 혹은 함수/블록이 어디에 써있는가를 보고 그 스코프를 판단하면 된다. 스코프체인 현재 스코프에서 식별자를 검색할 때..

정의 코드의 실행환경에 대한 여러가지 정보를 담고 있는 사용되는 코드의 정보를 담은 객체 종류 자바스크립트의 코드는 3가지 종류로 이루어지는데, 글로벌 스코프에서 실행하는 글로벌 코드, 함수 스코프에서 실행하는 함수 코드 그리고 eval()로 실행하는 코드가 있다. 이 각각의 코드는 자신만의 실행 컨텍스트를 생성한다. 순서 엔진이 스크립트 파일을 실행하기 전에 글로벌 실행 컨텍스트(Golbal Execution Context, GEC)가 생성되고, 함수를 호출할 때마다 함수 실행 컨텍스트(Function Execution Context, FEC)가 생성된다. 주의할 점은, 글로벌의 경우 실행 이전에 생성되지만 함수의 경우 호출할 때 생성된다는 점이다. 실행 컨텍스트 스택 콜 스택(Call Stack)이라..

Pakage.json 파일을 보면 위와 같이 각종 dependency 옆에 버전이 기재되어 있습니다. 0.0.0의 익숙한 형태의 버전은 Sementic Versioning 이라는 규칙을 따른 버저닝입다. Sementic Versioning이란 ? Sementic Versioning은 Github를 창업하신 분이 기존의 버전 문제점을 해결하고자 만든 제안이라고 합니다. Node.js, Npm 등 대부분의 소프트웨어가 sementic Versioning을 따르고 있습니다. Semantic Versioning 규칙 Semantic Versioning은 Major, Minor, Patch의 구조로 생겼습니다. Semantic Versioning의 사용 규칙에 대해 알아봅시다. 1. 버전 번호는 Major, Mi..

Redux-Saga가헷갈렸던 이유중 하나가 기존에 사용했던 Redux에 대한 개념을 잊어버려서.. Redux의 Action, Store, Dispatch, Reducer의 개념과 작동원리에 대해 먼저 알아봅시다. Action 상태 값에 변화가 필요할 때, 우리는 액션이란 것을 발생시킵니다. 액션은 객체의 형태이며, type 필드를 필수적으로 가지고 있어야 합니다. { type: "ADD_TODO", // 필수 data: { // 선택 id: 0, text: "리덕스 배우기" } } Action 생성함수 액션 생성함수는 파라미터를 받아와서 액션 객체 형태로 만들어주는 함수입니다. function addTodo(data) { return { type: "ADD_TODO", data }; } Reducer ..

실행컨텍스트가(Execution Context) 생성될때마다 this 객체에 바인딩이 일어난다. (실행컨텍스트) this객체에 바인딩이 일어나는 순서대로 다음과 같다. 1. new를 사용했을 때 해당 객체로 바인딩된다. function Employee(name, age) { this.print = function f() { this.name = name; this.age = age; console.log("Hello, I'm " + this.name + ". I'm " + this.age + "years old"); }; } let a = new Employee("Sean", "17"); a.print(); // 👉👉 Hello, I'm Sean. I'm 17years old let b = new Emp..

정의 코드의 실행환경에 대한 여러가지 정보를 담고 있는 개념 으로, 간단히 말하자면 자바스크립트 엔진에 의해 만들어지고 사용되는 코드 정보를 담은 객체의 집합이라고 할 수 있다. 종류 자바스크립트의 코드는 3가지 종류로 이루어지는데, 글로벌 스코프에서 실행하는 글로벌 코드, 함수 스코프에서 실행하는 함수 코드 그리고 여기서 다루진 않지만 eval() 로 실행되는 코드가 있다. 이 각각의 코드는 자신만의 실행 컨텍스트를 생성한다. 엔진이 스크립트 파일을 실행하기 전에 글로벌 실행 컨텍스트(Global Execution Context, GEC) 가 생성되고, 함수를 호출할 때마다 함수 실행 컨텍스트(Function Execution Context, FEC) 가 생성된다. 주의할 점은, 글로벌의 경우 실행 이..

이벤트 위임을 알기위해 선수지식으로 이벤트 버블링과 이벤트 캡쳐링의 동작방식을 알아야한다. 이벤트 버블링과 이벤트 캡쳐링은 브라우저가 이벤트를 감지하는 방식이다. 이벤트 버블링 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다. 위 그림은 아래에 예시로 들 코드를 미리 도식화한 그림이다. 세 개의 div 태그가 있고 가장 아래에 있는 div 태그에서 이벤트가 발생했을 때 최상위 요소인 body 태그까지 이벤트가 전달되는 모습이다. //// HTML //// //// JS //// let divs = document.querySelectorAll('div'); divs.forEach(function(div) { div.addEve..