💫 FN 개발자의 개발 환경 이해와 실습 - 02 (패키지설치 / IIFE / 다양한 모듈 스펙)

패키지설치

가장 간단한 방법은 CDN으로 제공하는 라이브러리를 직접 가져오는 방식이다. 리액트의 주소를 html에서 로딩해준다. 하지만 주의해줘야 될 것이 아무리 우리 어플리케이션 서버가 정상이더라도 필수 라이브러리를 가져오지 못한다면 웹 어플리케이션은 정상적으로 동작할 수 없다. 그런 장애와 무관하게 우리가 직접 다운로드를 하는 방법이 있다.

 

명령어

npm install [설치할 라이브러리]

 

예를 들어 npm install react 했을 경우, 밑에처럼 package.json 파일에 dependencies 안에 react가 설치 된 것을 확인 할 수 있다.

 

---

 

IIFE (즉시 실행 함수 표현)

정의되자마자 즉시 실행되는 자바스크립트 함수를 말한다.

var math = math || {};

(function () {
 function sum(a,b) {
 retrun a + b;
 } 
  math.sum = sum;
 })();

1. 첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

2. 두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.

 

(function () {
    var aName = "Barry";
})();

aName 

IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.

// throws "Uncaught ReferenceError: aName is not defined"

 

다양한 모듈 스펙 알아보기

자바스크립트 모듈을 구현하는 대표적인 명세가 AMD와 CommonJS다. CommonJS는 자바스크립트로 사용하는 모든 환경에서 모듈을 하는 것이 목표다. exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식이다. 대표적으로 서버 사이드 플랫폼인 Nodejs에서 이를 사용한다.

 

export function sum(a,b) { return a + b;}

내보낼 때는 export를 사용한다.

 

import * as math from './math.js'

가져올 때는 import를 사용한다.

 

---

 

AMD : 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표다. 주로 브라우저 환경이다.

UMD : AMD 기반으로 CommonJS 방식까지 지원하는 통합 형태다.

이렇게 각 커뮤니티에서 각자의 스펙을 제안하다가 ES2015에서 표준 모듈 시스템을 내놓았다. 지금은 바벨과 웹팩을 이용해 모듈 시스템을 사용하는 것이 일반적이다. ES2015 모듈 시스템의 모습을 살펴보자.

 

😀 html 브라우저

<script type="module" src="src/math.js"></script>

이렇게 되면 script 구문 안에 type="module" 을 입력 해야한다. 하지만 이럴 때는 서버를 돌려야 되는데, npm으로 lite-server를 설치해준다.

 

$npx lite-server

위 명령어로 설치해주면 현재 폴더를 서버로 만들어준다. 그럼 자동으로 브라우저가 켜지면서 app.js 파일에 import 시킨 math.js 파일의 수식들이 계산되어 나온다.