[JavaScript] 파일 모듈화(module)

티스토리 뷰

🟨 JavaScript

[JavaScript] 파일 모듈화(module)

10000COW 2022. 12. 24. 10:47

728x90

파일 모듈화

모듈(module)을 사용하면 JavaScript 파일별로 각각 캡슐화가 가능하다.

두 개의 JavaScript 파일을 만들어서 모듈화를 해보자.

우선, 아래와 같이 HTML 파일에 counter.js 파일과 main.js 파일을 <script> 태그로 연결해보자.

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module" src="counter.js"></script>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

counter.js 파일에는 변수 count가 있고, 함수 increase와 getCount가 있다.

변수 count는 다른 파일에서 접근하지 못하게 하고, increase와 getCount는 사용할 수 있게하려면

export를 앞에 붙여주면 다른 파일에서 import가 가능하다.

(export default는 모듈에서 딱 하나만 export할 때 사용할 수 있다.)

counter.js

let count = 0;
export function increase() {
  count++;
  console.log(count);
}
export function getCount() {
  return count;
}

main.js는 import를 활용해 counter.js로 부터 increase 함수와 getCount 함수를 받아올 수 있다.

(count는 export되지 않았으므로 불가)

import * 을 사용하면 counter.js 파일이 export하는 모든 것을 받아오고,

이런 식으로 원하는 것만 받아올 수도 있다.

import { increase} from './counter.js';

import { increase, getCount } from './counter.js';

main.js

import * as counter from './counter.js';

counter.increase();
counter.increase();
counter.increase();
console.log(counter.getCount());

728x90

저작자표시

'🟨 JavaScript' 카테고리의 다른 글

[JavaScript] 에러 버블링(Error Bubbling) (0)	2022.12.24
[JavaScript] switch문은 언제 쓰면 좋을까? (0)	2022.12.20
[eslint] Failed to load parser 'babel-eslint' declared in 'package.json' Error Handling (0)	2022.12.19
[eslint] Failed to load parser 'babel-eslint' declared in 'package.json' 에러 해결 방법 (0)	2022.12.19

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			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

글 보관함

250x250

티스토리 뷰