JavaScript40 모듈 여러 개발 지식을 공부하다 보면 모듈화가 잘되어 있다. 모듈화를 해야 한다 등과 같은 이야기들이 많이 나온다. 그때마다 어림잡아 하나의 패키지로 모아 애플리케이션의 일부분을 구성한다라고 이해하고 지나갔는데, 이번에 좀 더 자세히 알아보자. 모듈의 일반적인 의미 모듈은 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈의 성립하기 위해선 자신만의 파일 스코프를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산은 기본적으로 비공개 상태이다. 변수, 함수, 객체 등은 전부 캡슐화 되어 다른 모듈에서 접근할 수 없다. 이 말은 개별적인 존재로서 애플리케이션과 분리되어 존재한다. ( 범용적인 기능을 다양한 플.. 2022. 3. 26. Generator, async/await 제너레이터와 async/await을 잘 활용하기 위해 책 한 권을 거의 다 읽었다... 제네레이터는 ES6에 도입되었으며 코드 블록의 실행을 일시적으로 중지했다가 필요한 시점에 재개할 수 있는 함수이다. 특징 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 일반 함수는 호출하면 제어권이 함수에게 넘어가고 내부 코드를 실행하는데 함수 호출자(caller)는 함수를 호출한 이후 함수의 제어권이 없는 반면 제너레이터 함수는 함수 실행을 caller가 제어할 수 있다. 이는 제어권을 함수 호출자가 독점하는 것이 아니라 양도(yield) 할 수 있다는 것을 말한다. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 정방향이 아닌 역방향으로 향할 수 있는 제너레이터 함수는 .. 2022. 3. 22. 이벤트 (3) 이벤트 핸들러 내부 this 이벤트 핸들러 어트리뷰트 방식 이벤트 핸들러 어트리뷰트의 값으로 지정한 문자열은 사실 암묵적으로 생성되는 이벤트 핸들러의 문이라고 했다. 따라서 handleClick 함수는 이벤트 핸들러에 의해 일반 함수로 호출된다. funciton onclick(){ handleClick(); } 일반 함수의 호출의 내부 this는 전역 객체 window를 가리킨다. 다만 이벤트 핸들러를 호출할 때 인수로 전달한 this는 이벤트를 바인딩한 DOM 요소를 가리킨다. 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식 두 방식 모두 이벤트 핸들러 내부의 this는 이벤트를 바인딩한 DOM 요소를 가리킨다. 즉 이벤트 핸들러 내부의 this는 이벤트 객체의 currentT.. 2022. 3. 16. 이벤트 (2) 이벤트가 발생하면 이벤트에 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다. 암묵적으로 이벤트 핸들러의 첫 번째 인자인 매개변수 e에 할당된다. 이는 브라우저가 이벤트를 호출할 때 이벤트 객체를 인수로 전달하기 때문이다. 따라서 이벤트 객체를 전달받으려면 이벤트 핸들러를 정의할 때 이벤트 객체를 받을 매개변수를 명시적으로 선언해야 한다. 이벤트가 발생하면 암묵적으로 생성되는 이벤트 객체도 생성자 함수에 의해 생성된다. 그리고 생성된 이벤트 객체는 생성자 함수와 더불어 생성되는 프로토타입으로 구성된 프로토타입 체인의 일원이 된다. 예를 들어 click 이벤트가 발생하면 암묵적으로 생성되는 MouseEvent 타입의 이벤트 객체는 UI.. 2022. 3. 16. 이벤트 (1) 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 이제는 Node.js로인해 서버 사이드 언어로도 자기매김 하였지만 과거에는 인터랙티브 한 웹 애플리케이션을 표현하기 위해 많이 사용되었고 사용자와 상호작용하기 위해서 이벤트를 많이 사용했다. 우리는 특정 타입에 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이베트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 이러한 이벤트 타입은 약 200여 가지가 있다. 마우스 이벤트 키보드 이벤트 포커스 이벤트 - focusin, focusout 이벤.. 2022. 3. 15. 구조 분해 할당 잠시 헷갈리는 것을 복습해보자. Rest 파라미터는 함수의 가변 인자를 배열로 받기 위해 사용된다. 스프레드 문법은 이터러블인 객체를 개별적인 값들의 목록으로 변환하기 위해 사용된다. 그럼 디스트럭처링 할당은 구조화된 배열과 같은 이터러블 또는 객체를 destructuring 하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 즉 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 과거 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다. var arr = [1,2,3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; ES6의 배열 디스트럭처링 할당은 배열의 각 요소를 배열로부터 추출하여.. 2022. 3. 9. 스프레드 문법 지난번에 알아본 Rest 파라미터는... 을 통해 함수에 전달된 인수들의 목록을 배열로 전달받기 위한 문법이다. 스프레드 문법은 ES6에 도입되었으며... 은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 이터러블에 한정된다. ( Array, String, Map, Set, DOM 컬렉션, aruments와 같이 for.. of문으로 순회할 수 있는 대상) * 이터러블 - Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 Symbol.iterator 메서드를 호출하면 next메서드를 소유하고 이 next메서드를 호출하면 이 터러블을 순회하며 value와 done 프로퍼티를 갖.. 2022. 3. 9. Rest 파라미터 Rest 파라미터는 매개변수 이름 앞에 세 개의 점... 을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다. 일반 함수와 메서드에는 유사배 열인 arguments 바인딩이 존재하지만 화살표 함수는 함수 자체의 arguments 바인딩을 갖지 않기 때문에 화살표 함수에서의 arguments를 참조할 시 상위 스코프의 arguments를 참조한다. function foo(...rest){ console.log(rest); // [1,2,3,4,5] } foo(1,2,3,4,5); 일반 매개변수와 Rest 파라미터는 함께 사용할 수 있다. 이때 함수에 전달된 인수들은 매개변수와 Rest파라미터에 순차적으로 할당된다. function foo(first, .. 2022. 3. 7. ES6 함수 ES6 이전까지 자바스크립트의 함수는 별다른 구분 없이 다양한 목적으로 사용되었다. 자바스크립트의 함수는 일반 함수로 호출하거나, new 연산자와 함께 호출하여 인스턴스를 생성할 수 있는 생성자 함수로서 호출하거나, 객체에 바인딩되어 메서드로서 호출할 수 있다. ES6이전의 동일한 함수를 다양한 형태로 호출하는 예제를 보자. var foo = function (){ return 1; }; //일반 함수 foo(); //생성자 함수로서 호출 new foo(); //메서드로 호출 var obj = {foo : foo}; obj.foo(); ES6이전의 함수 사용은 언뜻 보면 편리한 것 같다. 하지만 이는 성능면에서 손해이며 명확한 함수 호출에 규약이 없다는 점에서 실수를 유발할 수 있다. 즉 사용 목적에 따.. 2022. 3. 5. 클래스 (2) 클래스를 더 공부하기 전 프로퍼티 어트뷰트를 공부하고 다시 돌아왔다. 클래스의 접근자 프로퍼티를 이해할 수 있다. 접근자 프로퍼티의 디스크립터 객체를 보면 다음과 같이 구성되어 있다. get ([[Get]]) set ([[Set]] enumerable ([[Enumerable]] configurable ([[Configurable]]) ()는 내부슬롯 get과 set은 접근자 함수로 구성되어 있다. 이러한 접근자 프로퍼티는 클래스에서도 사용할 수 있다. class Person{ constructor(name){ this.name = name; } get getName(){ return this.name; } set setName(name){ this.name = name; } } 이때 getter와 se.. 2022. 3. 3. 이전 1 2 3 4 다음
