Front-End/프론트엔드 개발환경 2

Webpack - 프론트엔드 개발환경 이해 [2/3]

1. 웹팩의 등장 배경 import/export 구문이 없었던 모듈 이전의 상황을 살펴보자. math.js: function sum(a, b) { return a + b } // 전역 공간에 sum이 노출 app.js: sum(1, 2) // 3 위 코드는 모두 하나의 HTML 파일 안에서 로딩해야만 실행된다. math.js가 로딩되면 app.js는 이름 공간에서 'sum'을 찾은 뒤 이 함수를 실행한다. 문제는 'sum'이 전역 공간에 노출된다는 것. 다른 파일에서도 'sum'이란 이름을 사용한다면 충돌한다. 1.1 IIFE IIFE(Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 Javascript Function 을 말한다. 전역 스코프가 오염되..

NPM - 프론트엔드 개발환경 이해 [1/3]

1. Node.js 란 무엇일까 기존 웹에서는 정적인 html 파일에 다이나믹한 변화를 주기 위해 JavaScript가 쓰이고 있었다. 이 언어를 해석하는 주체는 브라우저로 각 브라우저 마다 JS 해석 엔진이 있다. 예로 크롬은 V8, 익스플로러는 Chakra 등. 브라우저에서만 동작하던 JS를 V8엔진에 살을 붙여서 브라우저가 아닌 다른 환경에서도 쓸 수 있게 만든 것이 Node.js이다. 쉽게 말해 자바스크립트 실행 환경이라고 볼 수 있다. 따라서 Node.js만 있으면 브라우저 없이도 자바스크립트 문법을 실행할 수 있다. 2. 프론트엔드 개발시 Node.js가 필요한 이유 최신 스펙으로 개발 가능 빌드 자동화 개발 환경 커스터마이징 3. Node의 REPL 기능 REPL(read-eval-print..