2023.04.09 자바스크립트 스터디 12회차 공부 사이트: https://poiemaweb.com/ 13. Babel 1) 정의 Babel은 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환시킬 수 있는 트랜스파일러(Transpiler)이다. 2) 설치 npm을 이용한 Babel CLI 설치 과정 (로컬 설치 권장) // 1. 디렉터리 생성 mkdir ... // 2. package.json 생성 npm init -y // 3. babel-core, babel-cli 설치 npm install --save-dev @babel/core @babel/cli // 4. Babel 프리셋 설치 npm install --save-dev @babel/preset-en..

2023.04.09 자바스크립트 스터디 12회차 공부 사이트: https://poiemaweb.com/ 12. 제너레이터 ES6에서 도입된 제너레이터 함수는 이터러블을 생성하는 함수이다. → 이터레이션 프로토콜을 준수하여 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. → 비동기 처리에 유용하게 사용된다. 1) 제너레이터 // 이터레이션 프로토콜을 구현하여 무한 이터러블을 생성하는 함수 const createInfinityByIteration = function() { let i = 0; return { [Symbol.iterator]() { return this; }, next() { return { value: ++i }; } }; }; for(const n of createInfi..

2023.04.09 자바스크립트 스터디 12회차 공부 사이트: https://poiemaweb.com/ 11. 이터레이션 프로토콜 ES6에서 도입된 이터레이션 프로토콜은 데이터 컬렉션을 순회하기 위한 프로토콜이다.이를 준수한 객체는 for of문으로 순회할 수 있고, Spread 문법의 피연산자가 될 수 있다. 이터레이션 프로토콜에는 두 개의 프로토콜이 존재한다. ㅇ 이터러블 프로토콜 : "순회 가능한 자료 구조" 를 위한 프로토콜 ㅇ 이터레이터 프로토콜 : "이터러블의 요소를 탐색하기 위한 포인터" 를 위한 프로토콜 이터러블은 데이터 공급자의 역할을 한다. 1) 이터러블 for of문 등의 반복문에서 순회 가능한 자료구조. Symbol.iterator 메소드를 구현하거나, 프로토타입 체인에 의해 상속한..

2023.04.02 자바스크립트 스터디 11회차 공부 사이트: https://poiemaweb.com/ 10. 심볼 심볼은 ES6에서 새롭게 추가된 타입으로, 변경 불가능한 원시 타입의 값이다. 주로 충돌할 위험이 없는 객체의 프로퍼티 키를 만들기 위해 사용한다. let mySymbol = Symbol(); console.log(mySymbol); console.log(typeof mySymbol); Symbol() 함수는 래퍼 객체를 생성하는 생성자 함수와 달리, new 연산자를 사용하지 않는다. 해당 함수에 문자열을 인자로 전달할 수 있으나, Symbol 생성에 어떠한 영향도 주지 않는다. 단지 생성한 Symbol에 대한 설명을 달아줄 뿐이다. (디버깅 용도) 1) Symbol의 사용 Symbol 값..

2023.04.02 자바스크립트 스터디 11회차 공부 사이트: https://poiemaweb.com/ 9. 프로미스 비동기 처리 시 콜백 함수를 사용하는데, 콜백 함수는 여러가지 단점을 가지고 있다. 이러한 콜백 패턴 대신 사용하는 객체가 프로미스이다. 1) 콜백 패턴의 단점 ① 콜백 헬 비동기 처리 모델은 실행 완료를 기다리지 않고 다음 작업을 즉시 실행한다. 비동기 함수의 처리 결과를 가지고 다른 비동기 함수를 호출해야 하는 경우, 함수 호출이 중첩되어 복잡도가 높아지는 현상이 콜백 헬이다. 콜백 헬은 가독성을 낮추고, 복잡도를 증가시켜 실수를 유발하는 원인이 되며, 에러 처리가 곤란하다. ② 에러 처리 try { setTimeout(()=> { throw new Error('Error!'); },..

2023.04.02 자바스크립트 스터디 11회차 공부 사이트: https://poiemaweb.com/ 8. 모듈 모듈: 애플리케이션을 구성하는 개별적 요소. 재사용 가능한 코드 조각을 의미한다. 1) 모듈 스코프 HTML에서 자바스크립트 파일 2개를 로드하면 해당 파일들은 하나의 전역을 공유한다. 그러니 ES6의 모듈은 파일 자체의 스코프를 제공하기에, 독자적은 모듈 스코프를 갖는다. 모듈 내에서 var 키워드로 선언한 변수는 전역 변수가 아니게 되며, window 객체의 프로퍼티가 아니게 된다. // m1.mjs var x = 'test'; console.log(x); //console.log(window.x); //window is not defined // m2.mjs var x = 'TEST';..

2023.04.02 자바스크립트 스터디 11회차 공부 사이트: https://poiemaweb.com/ 7. 클래스 자바스크립트는 프로토타입 기반 객체지향 언어이다. 프로토타입 체인과 클로저 등으로 객체지향 언어의 상속, 캡슐화 개념을 구현할 수 있다. ES6의 클래스는 클래스 기반 언어에 익숙한 프로그래머를 위한 문법을 제시한다. 1) 클래스 정의 클래스는 class 키워드를 사용하여 정의하고, constructor()를 사용하여 생성자를 만든다. 또한 객체의 멤버변수는 (_)로 시작하도록 만든다. (멤버변수 = 클래스 필드) class Person { constructor(name){ this._name = name; } sayHi(){ console.log(`Hi ${this._name}`); } ..

2023.04.02 자바스크립트 스터디 11회차 공부 사이트: https://poiemaweb.com/ 6. Destructuring 디스트럭처링(Destructuring): 구조화된 배열 또는 객체를 비구조화시켜서 개별 변수에 할당하는 것 → 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용함. 1) 배열 디스트럭처링 // ES5 var arr = [1,2,3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; // ES6 const arr = [1,2,3]; // 배열의 인덱스를 기준으로 배열로부터 요소를 추출하여 변수에 할당 // 변수 one, two, three가 선언됨. const [one, two, three] = arr; 왼쪽의 변수..