시작은 가볍게 마무리는 묵직하게

loader란 웹팩이 웹앱을 해석할 때 해석하기 힘든 정적자원들을 처리하거나 해당 정적자원들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 dependency graph에 추가하는 역할을 한다. 다양한 loader들은 npm을 통해 다운로드해야 사용할 수 있다. 예 : npm install --save-dev 로더명 로더를 만약 사용하지 않고 css파일을 import하는 js파일을 웹팩으로 컴파일 하면??? 에러가 뜨면서 적절한 로더를 사용하라는 에러문구가 뜨게 된다. 그러면 어떠한 loader들이 있을까? 우선 loader는 아주 다양하기 때문에 이 글에서 모든 loader를 소개하는 것은 무리가 있기 때문에 흔히 프로젝트에 적용하는 loader 중 자주 쓰일 수 있는 loader를 소개하고 설명..

entry entry란 웹팩에서 웹자원을 변환하기 위해 최초로 진입하는 곳이자 번들링하고자 하는 자바스크립트 파일 경로와 이름을 적는 곳이다. 이 속성에는 웹 애플리케이션의 전반적인 구조와 내용이 담겨져 있어야 한다. 웹팩이 해당 파일을 가지고 웹 애플리케이션에서 사용되는 모듈들의 연관 관계를 이해하고 분석하기 때문에 애플리케이션을 동작시킬 수 있는 내용들이 담겨져 있어야 한다. 그림으로 나타내면 다음과 같다. 위와 같이 모듈 간의 의존관계가 생기는 구조를 dependency graph라고 하며 코드로 나타내면 다음과 같다. // index.js import {item} from './item.js'; import {upload} from './upload.js'; import {signup} from ..

이 글은 우선 npm과 모듈이 무엇인지 그리고 바닐라 자바스크립트의 기본문법에 대해 이미 공부한 독자들에게 설명하는 느낌으로 작성한 것이다. 결코 필자가 webpack을 잘 알고 있어서 튜토리얼로 작성한 글이 아니며 어디까지나 필자가 webpack에 대해 공부한 부분을 정리하기 위해 작성한 글임을 염두해뒀으면 한다. 웹팩을 쓰는 이유가 무엇인지 나름대로 생각해보았다 1. 파일 단위로 자바스크립트 모듈 관리 가능 여기서 모듈이란 파일이나 코드를 하나의 단위로 하여 애플리케이션 하나의 구성요소를 의미한다. 이렇게 모듈로 관리하면 장점은 각 단위로 코드를 재사용할 수 있고 규모가 큰 애플리케이션을 작은 모듈들로 잘게 분리해서 관리할 수 있다. 자바스크립트는 전역 스코프로 공유하기 때문에 변수 충돌의 가능성이 ..

이벤트 루프란 결론부터 말하자면 호출 스택이 비워질 때마다 콜백 큐에서 호출할 콜백함수가 있는지 반복하여 확인 후 있으면 콜백함수를 호출하여 실행하는 역할을 하는 것이다. 이벤트 루프의 정의를 들었을 때 이해가 안 간다면 아마 호출 스택, 콜백 큐 등을 구동하는 브라우저 환경에 대한 이해가 확실하지 않아 그럴 수 있다. 일단 자바스크립트 엔진을 구동하는 브라우저 환경을 그림으로 나타내면 다음과 같다. 구성요소는 다음과 같다. heap : 메모리 할당이 이루어지는 곳 호출 스택(call stack) : 자바스크립트는 코드가 실행되면 순서대로 실행될 코드들이 쌓여 처리되는 곳 web APIs : 실행시키고자 하는 코드 중에 xmlHttpRequest(), setTimeout(), setInterval() 등..

비동기 2편에서 설명할 async, await은 promise보다 비교적 코드를 보기 좋은 형태로 작성할 수 있으며 비동기의 단점을 해결할 수 있다. 우선 async와 await은 독립적인 기능이 아니라 같이 사용한다. 그럼 다음 코드를 살펴보자! const err = false const PROMISE = (count) => { return new Promise((resolve, reject) => { setTimeout(() => { if(err) reject('에러 발생'); resolve(`실행${count}`); },200) }) } async function install(){ const start1 = await PROMISE(1) const start2 = await PROMISE(2) c..

비동기 방식이란 논 블로킹 형태로 동작하는 방식이라는 것을 의미한다. 그럼 논 블로킹 방식이란 무엇인가? 이 논 블로킹 방식은 콜백함수를 반환하는 코드 방식을 의미한다. 이에 대해 구체적으로 설명해보고자 한다. 비동기 방식은 메인 쓰레드가 있으며 실제 코드를 실행하는 역할을 한다. 잠깐 용어를 짚고 넘어가자! 프로세스란 단순히 실행중인 프로그램을 의미하며 쓰레드는 이 프로세스 내에서 실제로 작업을 수행하는 주체이다. 다시 비동기 방식의 얘기로 돌아오자! 이 메인 쓰레드가 실제 코드를 실행할 때 실행시간이 좀 오래 걸린다고 판단하면 다른 쓰레드에게 '방금 내가 맡은 코드가 실행시간이 좀 오래 걸릴 거 같은데 너가 대신 실행해줘!'라고 하며 작업을 넘기고 다른 코드를 실행시키는 작업을 한다. 그러면 메인 쓰..