1. 배경문법 수준에서 모듈을 지원하기 시작한 것은 ES2015부터입니다.import / export 구문이 없던 모듈 이전 상황을 살펴보면 웹팩의 등장 배경을 이해하는데 수월할 것입니다.// math.jsfunction sum(a,b){ return a + b;}// app.jssum(1, 2);위 코드는 모두 하나의 HTML 파일 안에서 로딩해야만 실행됩니다.math.js가 로딩되면 app.js는 이름 공간에서 ‘sum’을 찾은 뒤 이 함수를 실행합니다.문제는 ‘sum’이 전역 공간에 노출된다는 것입니다. 즉, 다른 파일에서도 ‘sum’이란 이름을 사용한다면 충돌이 일어납니다.1.1 IIFE 방식의 모듈이러한 문제를 예방하기 위해 스코프를 사용합니다.함수 스코프를 만들어 외부에서 안으로 접근하지 못하..

1. 프론트엔드 개발에 Node.js가 필요한 이유1.1 최신 스펙으로 개발할 수 있다.자바스크립트 스펙의 빠른 발전에 비해 브라우저 지원 속도는 항상 뒤쳐진다.아무리 편리한 스팩이 나오더라도 이것을 구현해주는 징검다리 역할, 예를 들면 바벨같은 도구의 도움 없이는 부족하다.더불어 웹팩, NPM과 같은 노드 기술로 만들어진 환경에서 사용할 때 비로소 자동화된 프론트엔드 개발환경을 갖출 수 있다.Typescript, SASS 같은 고수준 프로그래밍 언어를 사용하려면 전용 트랜스파일러가 필요한다, 이것 역시 Node.js 환경이 뒷받침 되어야 우리가 말하는 프론트엔드 개발 환경을 만들 수 있다. 1.2 빌드 자동화과거처럼 코딩 결과물을 브라우저에 바로 올리는 경우는 흔치 않다.파일을 압축하고, 코드를 난독화..

0. 공부 계기프로젝트를 진행하며 Package.json 파일은 자주 보고, 사용하지만 Package-lock.json에 대해서 따로 공부해본 경험이 없습니다.그저 패키지매니저를 재설치 할 때 package-lock.json와 node_modules를 지우고 재설치해야된다는 정도...? 그래서 정확히 공부해야할 필요성을 느껴 공부하기 시작했습니다. 1. Package.json이란Node.js 프로젝트를 시작할 때, 터미널에 'npm install', 'yarn' 등의 패키지매니저를 설치하면 아래와 같이 여러 파일들이 기본적으로 설치됩니다. 현재 진행중인 프로젝트의 Package.json{ "name": "moyeota-webview", "private": true, "version": "..