Frontend/webpack & babel

webpack

webpack? 웹팩은 엄청 많이 쓰이는 오픈 소스 모듈 번들러 라이브러리이다. 번들러(Bundler)? 번들러는 여러 개로 나뉜 모듈을 하나로 묶어주는 도구이다. 의존성이 있는 것들을 찾아서 그룹핑을 해주는 도구! 웹팩은 IIFE를 사용해서 번들링을 해서 스코프 충돌에 대한 걱정 없이 안전하게 스크립트 파일들을 연결하거나 결합한다! dependency graph를 생성하여 빌드 거대한 자바스크립트 소스코드와 대규모 의존성을 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 늘어나게 되었다. 이 모듈 단위의 파일들을 호출하여 브라우저에 띄워야 하는데, 자바스크립트의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때 생겨나는 ..

webpack과 babel 리액트 프로젝트 생성

webpack? 웹팩은 엄청 많이 쓰이는 오픈 소스 모듈 번들러 라이브러리이다. 번들러(Bundler)? 번들러는 여러 개로 나뉜 모듈을 하나로 묶어주는 도구이다. 의존성이 있는 것들을 찾아서 그룹핑을 해주는 도구! 웹팩은 IIFE를 사용해서 번들링을 해서 스코프 충돌에 대한 걱정 없이 안전하게 스크립트 파일들을 연결하거나 결합한다! dependency graph를 생성하여 빌드 거대한 자바스크립트 소스코드와 대규모 의존성을 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 늘어나게 되었다. 이 모듈 단위의 파일들을 호출하여 브라우저에 띄워야 하는데, 자바스크립트의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때 생겨나는 ..