Before Start
encapsulation(캡슐화)란 외부에서 접근 가능한 함수를 통해 객체의 상태(state)를 update하는 것인데, Javascript의 파일 단위로도 비슷한 기능을 수행할 수 있다. 즉, 어떤 js 파일에서 선언한 변수나 함수 등을 다른 파일에서 그대로 이용하는 것이 가능하다. 이를 "modularization"이라고 부른다.
How to modularization?
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>
<script defer src="counter.js"></script> <!-- type="module" -->
<script defer src="main.js"></script> <!-- type="module" -->
</head>
<body></body>
</html>
html 내부에 script 태그를 작성해서 js파일을 html에 포함시킬 수 있다. 이 때 여러 개의 js파일이 포함되어 있다면, 나중에 분석(parse)된 js 파일이 먼저 parse된 js 파일 내부에 접근할 수 있다. 즉, 위의 예제 코드의 main.js 파일에서 별다른 키워드 없이도 counter.js 파일의 모든 코드에 접근할 수 있다. 만약 counter 파일에 어떤 함수가 정의되어 있다면, main 파일에서도 그 함수에 접근할 수 있다는 것이다.
모든 코드에 접근하지 않고, 필요한 코드에만 접근하게 만드는 방법도 있다. 이 때에는 script 태그 내부에, type = "module" 속성을 작성해 주어야 하고, 어떤 코드를 외부에서 접근 가능하게 만들 것인지를 JS 파일 안에서도 정해야 한다.
JavaScript | import & export
// counter.js
let count = 0;
export function increase() {
count++;
console.log(count);
}
export function getCount() {
return count;
}
변수나 함수 앞에 "export" 키워드를 붙이면 외부 파일에서도 이 함수를 이용할 수 있다. 하지만 count를 노출시키지 않은 것처럼, 변수 자체를 export하는 것은 좋은 방법이 아닌데, 파일의 여기 저기에서 직접 변수 값을 바꿀 위험이 있기 때문이다. 따라서 변수의 값을 확인하는 getter 함수를 export 하는 것이 더 좋은 방법이다.
// main.js
// import { increase as incre } from './counter.js';
// import { increase, getCount } from './counter.js';
// import increase from './counter.js'; => when increase is default
import * as counter from './counter.js';
counter.increase();
counter.increase();
counter.increase();
console.log(counter.getCount());
counter 파일에서 작성한 내용을 main 파일에서 이용하기 위해서는 import 키워드를 작성해야 한다. import 방식은 위에 작성한 것과 같이 다양하다.
우리는 count라는 변수의 값(state) 자체를 변경하는 것이 아니라, increase라는 method를 통해 count의 값을 변경할 수 있게 된다. 이는 class에서 state는 내부에 숨기고, 외부에서 접근할 수 있는 method(함수)를 통해 state를 update하는 방법과 같다는 점에서, OOP의 핵심 개념 중 하나인 캡슐화를 찾아볼 수 있다.
import, export가 실행되는 방법
- 모던 브라우저에 의해, import/export 구문이 실행된다.
- 브라우저는 import/export 하고 있는 파일을 파악하고 다운로드, 실행한다
- 여러 번의 http 요청이 필요하다 => webpack과 같은 패키지로 번들링 작업(여러 개의 js파일을 하나의 파일로 합치는 작업)을 해주면 요청 빈도를 줄일 수 있다.
- html에서 하나의 스크립트 파일만 import 하면 된다.
+) more ways to modularize | Typescript
모든 js 파일을 <script />로 html에 연결하는 것은 번거롭고 오류를 발생시키기도 쉽다. 특히 타입스크립트에서는 더 큰 제약이 발생한다(예를 들어 a 파일에서 정의한 타입을 b 파일에서는 사용할 수 없다). 따라서 대부분의 프로젝트에서는 다음과 같은 방법을 사용해서 코드를 모듈화하는 것이 더 이상적이다.
name-spaces or file bundling
- namespace | 타입스크립트가 제공하는 syntax feature로, 코드를 그룹화할 수 있다. 하나의 namespace는 하나의 파일을 가리킬 수 있고, 이를 다른 파일에서 import 할 수 있다.
- file bundling | 타입스크립트는 여러 ts 파일을 하나로 번들링한다(묶어준다).
- 파일 묶음이 가능하기 때문에, html에서 수동으로 관리해야 하는 스크립트 파일이 줄어든다.
'Study > JavaScript' 카테고리의 다른 글
| Asynchronous | callBack, promise, async & await (0) | 2022.04.02 |
|---|---|
| Call stack & Task que (0) | 2022.04.01 |
| Iterable (0) | 2022.03.30 |
| Map & Set (0) | 2022.03.30 |
| Array (0) | 2022.03.29 |
