Webpack 모듈이란? - 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미합니다. 자바스크립트로 치면 아래와 같은 코드가 모듈입니다.이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 됩니다. - 웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미합니다. 웹 애플리케이션을 제작하려면 HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요하죠. 이 파일 하나하나가 모두 모듈입니다. - 문제점은 실제로 복잡한 애플리케이션을 개발할 때 발생합니다. 변수의 이름을 모두 기억하지 않은 이상 변수를 중복 선언하거나 의도치 않은 값을 할당할 수 있다는 것이다. 이처럼 파일 단위의 자.. 2020. 12. 10. var, let, const 차이 1. 변수 값의 변환 재선언 재할당 var o o let x o const x x 2. 변수의 스코프 - let과 const로 선언된 변수는 블록 레벨 스코프를 가지므로, {} 내부에 변수를 선언하면 해당 블록 내부에만 생명주기를 유지한다. - var는 함수 레벨 스코프를 가지므로 블록 내부에 선언되어도 외부에서 접근할 수 있다. 3. 호이스팅 - 변수생성 3단계 1. 선언단계: 변수를 실행 컨텍스트에 등록한다. 2. 초기화 단계: 실행 컨텍스트에 등록된 변수 객체에 대한 메모리를 할당한다. 이 단계에서 변수는 undifined로 초기화된다. 3. 할당 단계: undefined로 초기화된 변수에 값을 할당한다. console.log(a); // undefined var a = 2; - var 로 선언된 .. 2020. 11. 8. JS 프로토타입 프로토타입언어 JavaScript는 클래스라는 개념이 없고 기존의 객체를 복사하여(cloning) 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 프로토타입 기반 언어는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어내는데 이렇게 생성된 객체 역시 또 다른 객체의 원형이 될 수 있다. 자바스크립트 함수 - 자바스크립트에서 함수를 정의하면 내부에 prototype 이라는 프로퍼티가 존재한다. prototype프로퍼티는 프로토타입객체를 참조하고 있다. - 정의한 함수를 생성자함수로써 new라는 연산자와 함께 사용하여 인스턴스를 생성할 경우 prototype프로퍼티가 참조하고 있는 프로토타입객체는 생성된 모든 인스턴스의 원형이 된다. - 이렇게 생성된 인스턴스에는 __proto__라는 프로퍼티가 있.. 2020. 11. 7. JS 클로저 클로저, clousure란? - 어떤 함수 A에서 선언한 변수 a를 참조하는 A의 내부함수B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후라도 변수 a가 사라지지 않는 현상. - 이러한 현상은 자바스크립트의 가비지 컬렉터의 동작원리 때문에 발생하는데, 자바스크립트의 가비지컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집 대상에 포함하지 않는다. V8엔진에서는 실행컨텍스트가 종료될 때 해당 실행컨텍스트의 내부함수가 실제로 사용하는 변수만 남겨두고 나머지는 가비지컬렉팅하도록 최적화 되어있다. - 클로저는 어떤 필요에 의해 의도적으로 함수의 지역변수가 계속 메모리에 머물도록 함으로써 발생하므로, 그 필요성이 사라지면 더 이상 메모리를 소모하지 않도록 관리를 하여 메모리누수 문제가 발생.. 2020. 11. 7. JS this this란? - this는 기본적으로 실행 컨텍스트가 생성될 때 결정되므로, 어떤 방식으로 함수를 호출하느냐에 따라 this의 값이 달라진다 1. 전역공간에서의 this - 전역 공간에서 this는 전역 객체를 가리킨다. - 브라우저 환경에서 전역객체는 window이고, Node.js에서 전역객체는 global이다. - 자바스크립트의 모든 변수는 특정객체(실행 컨텍스트의 LexicalEnvironment)의 프로퍼티로 동작하므로, 전역변수 a 와 전역컨텍스트에서 this.a 와 전역객체.a 는 모두 같은 값을 가진다. 2. 매서드로서 호출할 때, 매서드 내부의 this - 함수와 메서드를 구분하는 유일한 차이는 독립성인데 함수는 그 자체로 독립적인 기능을 수행하며 메서드는 자신을 호출한 대상 객체에 관한.. 2020. 11. 7. JS 실행 컨텍스트 실행 컨텍스트, execution context란? - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 - 어떤 실행 컨텍스트가 활성활 될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는데 필요한 환경정보들을 수집해서 실행 컨텍스트 객체에 저장하고 이를 call stack에 쌓는다. - 스택 구조상 call stack의 맨 위에 쌓이는 컨텍스트와 관련있는 코드가 현재 실행되며, 이런 방식으로 전체 코드의 환경과 순서를 보장한다. - 실행 컨텍스트 객체는 다음과 같은 정보를 담고 있다 : VariableEnvironment, LexicalEnvironment, ThisBinding VariableEnvironment와 LexicalEnvironment - VariableEnvironmen.. 2020. 11. 7. 이전 1 2 3 4 ··· 6 다음
