Books/모던 JS Deep Dive ✔️49 [모던 JS Deep Dive] 49장 - Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 (마지막) 49.1 Babel - Babel 설치 - Babel: ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 ES5 사양의 소스코드로 변환(트랜스파일링) - npm을 사용하여 Babel 설치 - Babel 프리셋 설치와 babel.config.json 설정 파일 작성 - Babel 프리셋: 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것 - 트랜스파일링 - npm scripts에 Babel CLI 명령어 등록 - Babel 플러그인 설치 - 브라우저에서 모듈 로딩 테스트 49.2 Webpack - Webpack 설치 - Webpack: 의존 관계에 있는 JS, CSS, 이미지 등의 리소스들을 하나 또는 여러 개의 파일로 번들링하는 모듈 번들러 - babel-loader 설치 - babel-loa.. 2022. 1. 27. [모던 JS Deep Dive] 48장 - 모듈 48.1 모듈의 일반적 의미 - 모듈: 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 - 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함 - 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재함 - 모듈은 공개가 필요한 asset에 한정하여 명시적으로 선택적 공개 가능 => export - Module Consumer는 모듈이 export한 asset의 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용 가능 => import - 코드의 재사용성, 유지보수성 48.2 자바스크립트와 모듈 - 브라우저; 모든 JS는 하나의 전역을 공유 - CommonJS, AMD(Asynchronous Module Definition) - Node.js; 모듈 시스템 지원, 파일별.. 2022. 1. 27. [모던 JS Deep Dive] 47장 - 에러 처리 47.1 에러 처리의 필요성 - 에러는 언제나 발생 가능 - try ... catch문 사용해서 에러에 적절하게 대응 (에러 처리 코드 미리 등록) - if문, 단축 평가, 옵셔널 체이닝 연산자 활용 - 우리가 작성한 코드에서는 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 중요 47.2 try ... catch ... finally 문 - 에러 처리 코드를 미리 등록해 두고 에러 발생 시 에러 처리 코드로 점프하도록 하는 방법 (Error Handling) - try; 실행할 코드 (에러가 발생할 가능성이 있는 코드) catch; try 코드 블록에서 에러 발생 시 이 코드 블록의 코드가 실행됨 (에러 객체 전달됨) finally; 에러 발생 상관없이.. 2022. 1. 27. [모던 JS Deep Dive] 46장 - 제너레이터와 async/await 46.1 제너레이터란? - ES6 제너레이터: 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 - 함수 호출자에게 함수 실행의 제어권 양도 가능 - 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 yield할 수 있음 - 함수 호출자와 함수의 상태를 주고받을 수 있음 - 함수 호출자에게 상태를 전달할 수 있고 함수 호출자로부터 상태를 전달받을 수 있음 - 제너레이터 객체 반환 - 이터러블이면서 동시에 이터레이터인 제너레이터 객체 반환 46.2 제너레이터 함수의 정의 - function* 키워드로 선언 - 하나 이상의 yield 표현식 포함 - 화살표 함수로 정의 불가, 생성자 함수로 호출 불가 46.3 제너레이터 객체 - 제너레이터 함수 호출 시 제너레이터 객체.. 2022. 1. 27. 이전 1 2 3 4 ··· 13 다음 반응형