[javascript] Modules

자바스크립트 모듈 

1. Module은 코드를 관리하는 작은 단위

 

2. Module을 이용하면 코드관리와 재활용이 편리해짐

 

3. 자바스크립트 파일을 분리하고 사용하는 기술

 

*es6부터 import문과 export문이 추가됨

 

 

export 내보내기!!!!

지시자를 변수나 함수앞에 붙이면 다른 외부 모듈에서 해당 변수나 함수를 import해서 사용할 수 있음

 

선언부 앞에 export

변수, 함수, 클래스 앞에 export 붙일 수 있음

//함수
export function ss() {
	실행 구문
}

//변수
export let ss = 5;

//클래스
export class user {
	constructor(name) {
    	this.name = name
    }
}

 

선언부와 떨어진 곳

//함수
function ss() {
	실행 구문
}

//변수
let hh = 5;

//클래스
class user {
	constructor(name) {
    	this.name = name
    }
}

export {ss, hh, user};

 

export default

개체를 하나만 불러올 수 있음

//함수
export default function ss() {
	실행 구문
}

//함수
function ssh() {
	실행 구문
}

export default ssh

 

export default 사용하고 import 하면 ssh 중괄호없이 사용하여 가져올 수 있다.

import ssh from "./경로"


import {ss} from "./경로"

 

 

import 불러오기

지시자를 붙이면 다른 외부 모듈을 가지고 와서 사용할 수 있습니다.

 

export를 받은 어떠한 개체를 불러올 때

//export 
import {ssh} from "./경로"

//여러 개체 불러올 때
import {ssh, hh} from "./경로"

//export default
import ssh from "./경로"

 

가져올 것이 많을 경우  

구문)

import * as <obj>

//폴더명 intro.js
export function name() {
	console.log("name")
}

export function age() {
	console.log("age")
}

======================================= 파일이 2개로 분리되어있을때

//폴더명 main.js
import * as intro from "./경로"

intro.name()
intro.age()

 

import 'as',  export 'as'

as를 사용하면 이름을 바꿔서 사용할 수 있다.

 

export 'as'

//폴더명 intro.js
function name() {
	console.log("name")
}

function age() {
	console.log("age")
}

export{name as nameStr , age as ageNum};
======================================= 파일이 2개로 분리되어있을때

//폴더명 main.js
import * as intro from "./경로"

intro.nameStr() //함수명 변경
intro.ageNum()  //함수명 변경

 

import 'as'

//폴더명 intro.js
export function name() {
	console.log("name")
}

export function age() {
	console.log("age")
}

======================================= 파일이 2개로 분리되어있을때

//폴더명 main.js
import { name as nameStr, age as ageNum } as intro from "./경로"

intro.nameStr() //함수명 변경
intro.ageNum()  //함수명 변경