분류 전체보기46 [JS] Babel과 Webpack 📌 ES6 모듈보다 별도의 모듈 로더를 사용하는 이유IE를 포함한 구형 브라우저는 ESM(ES6 모듈)을 지원하지 않음ESM을 사용하더라도 트랜스파일링이나 번들링이 필요함ESM이 아직 지원하지 않는 기능(bar import)이 있으며, 몇 가지 이슈가 존재함 📌 BabelBabel: ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환해 주는 트랜스파일러 📌 WebpackWebpack: 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없음여러 개의 자바스크립트 파일을 하나로 번들.. 2024. 10. 17. [JS] 모듈 📌 모듈의 일반적 의미모듈(module): 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 함자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재함 모듈은 export 키워드를 통해 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개할 수 있음모듈 사용자: 공개된 모듈의 자산을 사용하는 모듈모듈 사용자는 import 키워드를 통해 모듈이 공개한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있음모듈은 기능별로 분리되어 개별적인 파일로 작성되기 때문에 코드의 단위를 명확히 분리하여 애플리케이션.. 2024. 10. 16. [JS] 에러 처리 📌 에러 처리의 필요성에러나 예외적인 상황에 대응하지 않으면 프로그램은 강제 종료될 수 있음작성한 코드에서 언제나 에러나 예외적인 상황이 발생할 수 있다는 것을 전제하고 이에 대응하는 코드를 작성하는 것이 필요함 📌 try ... catch ... finally 문try ... catch ... finally 문으로 에러 핸들링을 할 수 있음try ... catch ... finally 문을 실행하면 먼저 try 코드 블록이 실행되고, try 코드 블록에 포함된 문 중에서 에러 발생 시 발생한 에러는 catch 문의 err 변수에 전달되고 catch 코드 블록이 실행됨finally 코드 블록은 에러 발생과 상관없이 반드시 한 번 실행됨try { // 실행할 코드} catch (err) { /.. 2024. 10. 13. [JS] 제너레이터와 async / await 📌 제너레이터란?제너레이터(generator): 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수제너레이터와 일반 함수의 차이:제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있음제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있음제너레이터 함수를 호출하면 제너레이터 객체를 반환함 📌 제너레이터 함수의 정의제너레이터 함수는 function* 키워드로 선언하며, 하나 이상의 yield 표현식을 포함함애스터리스크(*)의 위치는 fuction 키워드와 함수 이름 사이라면 어디든 상관 없지만 일반적으로 function 키워드 바로 뒤에 붙여서 사용함제너레이터 함수는 화살표 함수로 정의할 수 없음제너레이터 함수는 new 연산자와 함께 생성자 함수로 호출.. 2024. 10. 13. 이전 1 2 3 4 ··· 12 다음
