🔧Webpack : module

Notice

Recent Posts

Recent Comments

Link

« 2024/07 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

C-log

🔧Webpack : module 본문

⚛️React/🔧Front-Dev-Environment

🔧Webpack : module

4:Bee 2024. 6. 17. 20:15

728x90

이번 시간에는 webpack과 등장 배경에 관해서 이야기 해볼 것이다.

Webpack의 등장

먼저 모듈에 대해 이야기 해보자. 문법 수준에서 모듈을 지원하기 시작한 것은 ES6(ES2015)부터다. import/export 구문이 없었던 모듈 이전 상황을 살펴보는 것이 웹팩 등장 배경을 설명하는데 수월할 것 같다. ('김정환 블로그' 중..)

예전에는 html에 있는 script 태그를 사용해서 js파일들을 연결하고 html로 관리 했다. 예전에 사용했던 방식을 구현 해본 코드는 아래 더보기를 참고하라

math.js

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

app.js

console.log(sum(1,2));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="src/math.js"></script>
  <script src="src/app.js"></script>
</body>
</html>

command

::CMD
start index.html

예전 방식을 사용하게 되면 발생하는 문제가 있다. 관리적이 차원의 문제도 있지만 전역 스코프가 오염이 된다는 것이다. math.js의 sum함수는 math 모듈에서만 유효한 것이 아니라 여디서든 접근이 가능하다. 한번 개발자 도구에서 sum을 접근해보면 아래와 같이 실행되고 있는 index.html 브라우저에서 확인이 가능하다.

그렇다면 문제가 되는 전역 스코프가 오염이 된다는 것은 무엇인가. 직접 sum을 오염 시켜 보자.

5라는 값을 sum에 직접 대입 하고 sum이라는 함수를 실행 시킨 결과이다.

이렇게 전역 스코프가 오염이 되면 type error가 발생하게 되고 어플리케이션이 예측할 수 없게 되고 러타임 에러가 발생할 수 밖에 없다. 여기서 ES6 문법을 공부한 사람이라면 이런 생각을 하게 될 것이다. '애초부터 sum 함수를 화살 표기법으로 작성하면 되지 않을까?' 그렇다 화살 표기법은 애초에 키워드(선언자)를 const로 스코프의 영역을 제한을 줄 수 있다. 이에 맞게 한번 코드를 수정해서 직접 실행 해보자.

화살 표기법

const sum = (a,b) => {
  return a+b;
}

기본 sum 함수를 위와 같이 화살 표기법으로 변경 했다. 그리고 이를 브라우저에서 window.sum으로 접근하려고 하면 undfiend가 나온다. 일반적으로 sum 함수를 사용 할 순 있지만 위와 같이 sum을 선언하려고 하면 type error가 발생되면서 애초에 sum을 새로운 변수로 선언이 불가능 하게 된다.

위에서 했던 방식과 같이 접근을 시도하면 위에서 의도한 바와 같은 결과가 도출 되지 않는다.

위와 같은 방식으로 전역 스코프의 오염을 막을 수도 있지만 이 방법이 아닌 모듈 방식으로 방지 방법도 있다.

IIFE 방식의 모듈(즉시 실행 함수 표현)

//math.js

var math = math || {};

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

  math.sum = sum;

})()

//app.js

console.log(math.sum(1,2));

전역 스코프 오염을 방지하기 위해서 IIFE 방식을 사용하는데 처음 보는 방식이라 많이 당황스럽다. 한 줄씩 차근 차근 살펴보면 아래와 같다.

var math = math || {};  //true || false

math라는 변수를 초기화한다. math가 이미 정의되어 있고 참(true) 값이면 math 변수는 그 값을 유지한다. 만약 math가 정의되지 않았거나 거짓(false) 값이면 math는 빈 객체 {}로 초기화된다.

(function(){
  ...
})()

이 패턴은 IIFE이다. IIFE는 정의되자마자 즉시 실행되는 함수로 함수 내부에서 선언된 모든 변수는 함수 밖에서 접근할 수 없어 프라이버시를 제공한다. 이를 통해 글로벌 스코프의 오염을 방지하고 코드를 모듈화하는 데 도움을 준다.

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

math.sum = sum;

이 함수는 IIFE 내부에서 정의되어 외부에서 직접적인 접근이 불가능하다. 그러나 math.sum = sum을 통해 math 객체에 sum 함수를 속성으로 할당한다. 이렇게 하면 IIFE 외부에서도 math.sum을 호출하여 사용할 수 있게 된다.

결론은 sum 함수에 직접적인 접근이 불가능 해지며 math 객체의 속성을 통해서만 sum을 호출하고 접근이 가능 해지는 것이다. math가 선언 된 첫 번째 줄에서는 비어있는 객체가 할당이 되고 이에 IIFE 방식의 함수가 선언이 된 것이다. math를 직접 적으로 할당 했을 때의 객체 형태는 아래와 같다.

//Example.js

var math = {
  sum : function(a,b) {
    return a+b
  }
};

IIFE의 빈약

IIFE가 전역 스코프의 완벽한 방지를 할 수 있는 대안은 아니다. 그 이유는 math를 통해서 sum을 접근 해야 한다는 규칙 성만 존재 할 뿐 java와 같은 private 처럼 변수를 완벽히 보호, 분리를 보장하지는 않는다. 강의와 실습 자료에서는 마치 IIFE가 변수 재할당을 막아주면서 private 키워드처럼 사용되는 듯 들렸고 보였다. 아래 개발자 도구로 sum에 접근해 값을 재할당을 시도한 결과를 한번 살펴보면 알 수 있다.

결론적으로 IIFE는 private를 구성하는 형식도 아닌 변수명의 재할당을 방지하기 위한 하나의 패턴도 아니란 것을 알 수 있다. 단순히 sum이 전역 공간에 노출된다는 것을 막는 방안 정도 일 뿐이다. 따라서 개인적으론 ES6의 화살표 함수를 적극 활용하는 것이 오히려 전역 스코프 오염을 방지할 수 있다고 본다. 우리는 여기서 느낄 수 있다. 모듈의 필요성을 말이다.

다양한 모듈 스펙

js에서 모듈을 구현하는 대표적인 명세가 AMD와 CommonJs가 있다.

CommonJs : CommonJs는 js를 사용하는 모든 환경에서 모듈화 하는 것이 목표이다. exports로 모듈을 만ㄷ르고 require함수로 불러오는 방식이다. 서버 사이드 플렛폼 Nodejs에서 이를 사용한다.
AMD : AMD는 비동기로 로딩 되는 환경에서 모듈을 사용하는 것이 목표다. 주로 브라우저 환경이다.
UMD : AMD기반으로 CommonJs 방식까지 지원하는 통합 형태이다.

이런 다양한 형태의 모듈 스펙들을 제안하다가 ES6(ES2015)에서 표준 모듈 시스템을 내놓게 된다.

ES6(ES2015) 표준 모듈 시스템

ES6(ES2015) 표준 모듈 시스템을 실행하기 위해서 가상의 서버가 필요하다 수업에서는 lite-server라는 라이브러리를 사용하지만 본인은 vsc에서 제공하는 확장자 live-server를 사용한다.

export

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

import 하는 2가지 방법

//app.js
import * as math from './math.js'
console.log(math.sum(1,2));

//app.js
import { sum } from './math.js';
console.log(sum(1,2));

HTML : type = "module"

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

이렇게 우리는 ES6를 기준으로 js가 모듈로 돌아간다는 것을 알았다. 하지만 모든 브라우저 환경에서 모듈을 지원하는 것은 아니다. 그렇다면 우리는 어떻게 해야할까 이를 해결하는 방법이 바로 webpack을 사용하는 것이다. 다음 시간에는 본격적으로 webpack을 배워 볼 것이다.

728x90

저작자표시

'⚛️React > 🔧Front-Dev-Environment' 카테고리의 다른 글

🔧Webpack : Loader (0)	2024.06.23
🔧Webpack : Entry (0)	2024.06.21
🔧외부 패키지를 관리하는 방법 : npm install (0)	2024.06.17
🔧프로젝트 생성 : NPM&yarn(yarn-berry) (0)	2024.06.17
🔧수업에 앞서 (0)	2024.06.16

'⚛️React/🔧Front-Dev-Environment' Related Articles

Comments

C-log

🔧Webpack : module 본문

🔧Webpack : module

Webpack의 등장

화살 표기법

IIFE 방식의 모듈(즉시 실행 함수 표현)

IIFE의 빈약

다양한 모듈 스펙

ES6(ES2015) 표준 모듈 시스템

export

import 하는 2가지 방법

HTML : type = "module"

'⚛️React > 🔧Front-Dev-Environment' 카테고리의 다른 글

티스토리툴바