개념 정리/모던 자바스크립트 딥다이브45 모던 자바스크립트 : 제너레이터와 async/await 1. 제너레이터란? ES6에서 도입된 제너레이터 제너레이터 : 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수 제너레이터와 일반 함수 차이 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권 양도 가능 일반 함수 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행 함수 호출자는 함수를 호출한 이후 함수 실행 제어 불가능 제너레이터 함수는 함수 실행을 함수 호출자가 제어 가능 = 함수 호출자가 함수 실행을 일시중지시키거나 재개 가능 = 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도 가능 제너레이터 함수는 함수 호출자와 함수 상태 주고받을 수 있음 일반 함수 호출 시 매개변수를 통해 함수 외부에서 값을 주입받고 함수 코드를 일괄 실행해 결과값을 함수.. 2023. 12. 20. 모던 자바스크립트 : Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축 0. ES6+/ES.NEXT 개발 환경 구축 ES6+와 ES.NEXT의 최신 ECMAScript 사양을 사용해 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 구형 브라우저에서 문제없이 동작시키기 위한 개발 환경 구축 필요 또한 대부분의 프로젝트가 모듈을 사용하기때문에 모듈 로더 필요 ES6 모듈(ESM) ES6 모듈(ESM)은 대부분의 모던 브라우저에서 사용 가능하지만 별도의 모듈 로더 사용하는 것이 일반적 IE를 포함한 구형 브라우저는 ESM 지원하지 않음 ESM을 사용하더라도 트랜스파일링이나 번들링이 필요함 ESM이 아직 지원하지 않는 기능(bare import 등)이 있고 점차 해결되고는 있지만 아직 몇가지 이슈 존재 1. Babel Babel은 ES6+/ES.NEXT로 구현된 최신 사양의 소스.. 2023. 12. 19. 모던 자바스크립트 : 모듈 1. 모듈의 일반적 의미 모듈 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각 모듈은 기능을 기준으로 파일 단위로 분리 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프) 가질 수 있어야함 모듈의 비공개 자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재 모듈의 재사용 애플리케이션과 완전히 분리되어 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재의 의미가 없음 모듈은 애플리케이션이나 다른 모듈에 의해 재사용되어야 의미가 있음 export : 모듈은 공개가 필요한 자산.. 2023. 12. 18. 모던 자바스크립트 : 에러처리 1. 에러 처리의 필요성 발생한 에러를 방치하면 프로그램은 강제 종료됨 try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해서 코드 실행 가능 직접적으로 에러를 발생하지는 않는 예외적인 상황 발생할 수 있음 예외적인 상황에 적절하게 대응하지 않으면 에러로 이어질 수 있음 2. try...catch...finally 문 a. 에러 처리를 구현하는 방법 querySelector, Arry#find 메서드처럼 예외적인 상황이 발생하면 반환하는 값(null / -1)을 if 문이나 단축 평가 또는 옵셔널 체이닝 연산자를 통해 확인해서 처리하는 방법 에러 처리 코드를 미리 등록해두고 에러가 발생하면 에러 처리 코드로 점프하도록 하는 방법 b. 그 중 try...c.. 2023. 12. 16. 모던 자바스크립트 : 이벤트 1. 이벤트 드리븐 프로그래밍 브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지해 이벤트 발생 만약 애플리케이션이 특정 타입의 이벤트에 대해 반응해 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출 위임 이벤트 핸들러 : 이때 이벤트가 발생했을 때 호출될 함수 이벤트 핸들러 등록 : 이벤트 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 브라우저는 사용자의 버튼 클릭을 감지해 클릭 이벤트 발생 가능 특정 버튼 요소에서 클릭 이벤트가 발생하면 특정 함수(이벤트 핸들러) 호출하도록 브라우저에게 위임(이벤트 핸들러 등록) 가능 이벤트 핸들러 프로퍼티에 함수를 할당하면 해당 이벤트가 발생했을 때 할당한 함수가 브라우저에 의해 호출 이벤트와 그에 .. 2023. 12. 14. 모던 자바스크립트 : 프로미스 0. 프로미스 자바스크립트는 비동기 처리를 위한 패턴으로 콜백 함수 사용 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리중 발생한 에러의 처리가 곤란해 여러개의 비동기처리를 한번에 처리하는데 한계가 있음 ES6에서 비동기 처리 위한 패턴으로 프로미스 도입 전통적인 콜백 패턴이 가진 단점 보완 비동기 처리 시점을 명확하게 표현 가능 1. 비동기 처리 위한 콜백 패턴의 단점 a. 콜백 헬 콜백 헬 콜백 헬 : 콜백 함수를 통해 비동기 처리 결과에 대한 후속 처리를 수행하는 비동기 함수가 비동기 처리 결과를 가지고 또다시 비동기 함수를 호출해야한다면 콜백 함수 호출이 중첩되어 복잡도 높아지는 현상 콜백헬 은 가독성 나쁘게 하며 실수 유발하는 원인 비동기 함수 비동기 함수 : 함수 내부에 비동.. 2023. 12. 13. 이전 1 2 3 4 ··· 8 다음
