FrontEnd/JavaScript24 [JavaScript] Webpack 알아보기 웹팩은 Javascript 모듈 번들러다. 모듈 번들러는 웹 애플리케이션을 구성하는 자원 (HTML, CSS, Javascript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다. 번들러를 사용하면 모듈 지원이 불가한 브라우저에서의 의존성 관리 문제를 해결할 수 있다.최근 사용되는 번들러들은 단순히 의존성 패키지들의 코드를 하나로 묶어 주는 것을 넘어 개발 생산성 자체에도 도움을 주고있다.webpack 설치npm에서 webpack과 cli에서 웹팩을 사용할 수 있게 해줄 수 있게 설치한다.$ npm i webpack webpack-cli --save-dev 다음과 같이 webpack 명령어로 번들링을 실행할 수 있다.$ webpackwebpack.. 2024. 7. 27. [JavaScript] EventLoop(이벤트루프) 알아보기 자바스크립트는 싱글 스레드 이다.스레드가 하나라는 말은 동시에 하나의 작업만 처리할 수 있다는 뜻이고 자바스크립트 엔진이 단일 호출 스택을 사용한다는 뜻이다.자바스크립트가 구동되는 환경인 브라우저에서는 여러 개의 스레드가 사용된다.브라우저는 자바스크립트 엔진이 제공하지 않는 웹 API를 제공하며 이를 통해서 비동기 방식으로 동작할 수 있다.이러한 구동 환경이 단일 호출 스택을 사용하는 자바스크립트 엔진과 상호 연동하기 위한 장치가 이벤트 루프 이다.자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다.Heap메모리 할당이 되는 곳, 선언현 변수와 함수가 담겨져 있다.Call Stack코드가 실행될 때 쌓이는 곳이다.요청이 들어올 때마다 순차적으로 호출 스택을 담아서 처리한다.함수가 실행.. 2024. 7. 27. [JavaScript] Module Module 모듈의 일반적인 의미 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다. 자신만의 파일 스코프를 갖는 모듈의 자산(모듈에 포함되어 있는 변수, 함수, 객체 등)은 기본적으로 비공개 상태다. 다시 말해, 자신만의 파일 스코프를 갖는 모듈의 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없다. 즉, 모듈은 개별적 존재로서 애플리케이션과 분리되어 존재한다. 하지만 애플리케이션과 완전히 분리되어 개별적으로 존재하는 모듈은 재사용이 불가능하므로 존재의 의미가 없다. 모듈은 애플리케이션이나 .. 2022. 7. 16. [JavaScript] Error Handling Error Handling 에러 처리의 필요성 에러는 언제나 발생할 수 있다. 발생한 에러에 대해 대처하지 않고 방치하면 프로그램은 강제 종료된다. console.log('[Start]'); foo(); // ReferenceError: foo is not defined // 발생한 에러를 방치하면 프로그램은 강제 종료된다. // 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다. console.log('[End]'); try...catch 문을 사용해 발생한 에러에 적절하게 대응하면 프로그램이 강제 종료되지 않고 계속해도 코드를 실행시킬 수 있다. console.log('[Start]'); try { foo(); } catch (error) { console.error('[에러 발생]'.. 2022. 7. 16. [JavaScript] 제네레이터와 async/await 제네레이터와 async/await 제네레이터란? ES6에서 도입된 제네레이터(generator)는 코드블록의 실행을 일시 중지했다가 필요할 시점에 재개할 수 있는 특수한 함수다. 제네레이터와 일반 함수의 차이는 다음과 같다. 제네레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 일반 함수를 호출하면 제어권이 함수에게 넘어가고 함수 코드를 일괄 실행한다. 즉, 함수 호출자(caller)는 함수를 호출한 이후 함수 실행을 제어할 수 없다. 제네레이터 함수는 함수 실행을 함수 호출자가 제어할 수 있다. 함수 호출자가 함수 실행을 일시 중지시키거나 재개시킬 수 있다. 이는 함수의 제어권을 함수가 독점하는 것이 아니라 함수 호출자에게 양도(yield)할 수 있다는 것을 의미한다. 제네레이터 함.. 2022. 7. 16. [JavaScript] Promise Promise 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. ES6에서 비동기 처리를 위한 또 다른 패턴으로 Promise를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. Promise 생성자 함수를 new 연산자와 함꼐 호출하면 프로미스(Promise 객체)를 생성한다. ES6에서 도입된 Promise는 호스트 객체가 아닌 ECMAScript 사양에 정의된 표준 빌트인 객체다. Promise 생성자 함수는 비동기 처리를 수행할 콜백.. 2022. 7. 15. 이전 1 2 3 4 다음
