-
Javascript 에 Module 알아요?Front-end study/Javascript 2023. 3. 13. 19:16
# Do you know module in javascript?
Javascript 와 Typescript 에서 사용할 수 있는
module은 파일 안의 코드를 모듈화 하는 것이다.
Module 을 알면 React, Typescript 코드를 볼 때 어색하지 않다.
한 모듈은 한 파일 안에 작성된 코드를 말한다.
따로 모듈화하지 않으면 작성된 코드는 모두 global scope에 들어간다.
만약 2 ~ 3개의 파일에서 같은 이름의 함수를 구현한다면
test_script_01.js
getName() { ... }
test_script_02.js
getName() { ... }
test_script_03.js
getName() { ... }
getName 은 이름 충돌이 일어날 확률이 높고
앞으로 가져올 라이브러리에도 같은 이름의 함수가 포함될 확률이 있다.
모듈은 해당 자바스크립트 파일을
import 한 곳에서만 사용할 수 있도록 제한 한다.
코드로 보면...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Document</title> <script type="module" src="module_test1.js"></script> <script type="module" src="module_test2.js"></script> </head> <body> <h1>What is module?-_-</h1> </body> </html><script type="module" src="module_test1.js"></script>
위처럼 스크립트 태그에 type="module" 을 넣으면
모듈을 넣은 스크립트 즉,
module_test1.js
module_test2.js
파일들은 서로 바로 접근해서 서로의 함수 등을 사용할 수 없는 상태가 된다.
만약 서로 접근해서 사용하고 싶다면 아래와 같이 만들어 준다.
//module_test1.js export default function plus(a, b) { return a + b; } //한 파일에서 export default는 한 번만 사용할 수 있다 export function minus() { return a - b; }export 는 다른 파일에서 사용할 수 있도록 만드는 것
//module_test2.js import plus_func, {minus as minus_two} from './module_test1'; console.log(plus_func(2, 3));import 는 다른 파일을 가져와서 사용하는 것
이 때 import하는 함수 이름은 위와 같이 원하는 대로 변경할 수 있다.
default 가 아닌 함수는 { ... } 안에 넣어서 import 하여 사용한다.
마찬가지로 import하는 함수 이름은 as 뒤에 원하는 대로 변경할 수 있다.
//module_test1.js export const counter = 1; export function plus(a, b) { return a + b; } export function minus(a, b) { return a - b; }default 없이 export 하고
//module_test2.js import * as calc_module from './module_test1'; console.log(calc_module.counter); console.log(calc_module.plus(2, 3)); console.log(calc_module.minus(2, 3));모두 import 해서 변수, 함수 등을 사용할 수도 있다.
이처럼 모듈화를 이용하면
파일들 간에 중복되는 이름 충돌을 방지할 수 있고
모듈간 재사용성을 높여준다.
'Front-end study > Javascript' 카테고리의 다른 글
Javascript blur 이벤트로 이메일 입력 후 형식 체크 (jquery 활용) (0) 2023.11.10 Javascript keyup 이벤트 시 전화번호에 실시간 하이픈 입력 (jquery 활용) (0) 2023.11.10 Javascript Prototype : 상속을 위해 (0) 2023.03.09 Javascript {...} [...] destructuring assignment : 구조 분해 할당 (0) 2023.03.07 Arrow function expressions (0) 2023.01.26