[JavaScript] : Import / Export 모듈 사용 방법.

자바스크립트에서 모듈이란, 코드를 재사용 가능한 단위로 만드는 방법입니다.
이를 통해 전체 코드베이스를 유지 보수하기가 쉽고, 코드를 관리함에 있어서도 편리합니다.

src = "import 한 js 파일"

import

export

type = "module"

---

src로 html 파일과, js 파일 연동하기.

• 새로운 html 파일에 사용하고 싶은 함수를 작성하고, live server를 실행해서, 콘솔로 작동 확인을 해보았다.

// html 파일에서 live server 열어 콘솔로그 확인
<script>
    function getLengthOfString(str) {
        return +str.length;
    }
    const result = getLengthOfString('abcde');
    console.log(result); // 5
</script>

 

정상작동 확인 완료.

html 파일과 js 파일로 위 코드 분리.

위처럼 파일을 만들어주고 분리를 시작한다.

// index.html 파일입니다.

<script src="./main.js"></script>

// main.js 파일 입니다.

function getLengthOfString(str) {
    return +str.length;
}
const result = getLengthOfString('abcde');
console.log(result); // 5

이제 더 이상 html 파일에는 자바스크립트 코드가 존재하지 않지만,

이렇게 파일을 분리시켜도, script의 원천이 main.js 를 가리키고 있기 때문에, html 파일에서 live server를 열어서 콘솔로그를 확인해도, 정상적으로 코드가 작동하는 것이다.

src 의 뜻.

src = source 의 약자

---

새로운 js 파일인 test.js 를 만들어 주었다.

Export
'자바스크립트 파일 안' 에서 함수, 변수 또는 클래스를 외부로 공개시킬 수 있다.

// test.js 파일입니다.

// Export 사용법

export const result = getLengthOfString('abcde');
// 외부에 공개하고자 하는 함수, 변수 또는 클래스명 앞에 export 를 써준다.

// test.js 파일 입니다.

export function getLengthOfString(str) {
    return +str.length;
}
export const result = getLengthOfString('abcde');

새로운 자바스크립트 파일을 만들고 내가 외부 파일에 공개하고 싶은 함수와, 변수를 export를 해주었다.

Import
'외부 자바스크립트 파일' 에서 함수, 변수 또는 클래스의 데이터를 가져올 때 사용됩니다.

// main.js 파일입니다.

// Import 사용법

import { 불러오고 싶은 함수명 또는 변수명, 클래스명 } from "./test.js";

// main.js 파일 입니다.

import { getLengthOfString, result } from './test.js';
console.log(result);

위처럼 세팅을 완료 후 index.html 에서 콘솔로그가 잘 찍히는지 확인.

---

Syntax Error (구문 오류)

Uncaught SyntaxError: Cannot use import statement outside a module

모듈 외부에서 import 문을 사용할 수 없습니다.

---

과정 진단 및 해결

1. export 키워드를 통해서 함수와 변수를 외부 파일로 공개를 해주었고,

2. import 키워드를 통해서, test.js 파일의 함수와 변수를 main.js 로 가져와서 사용은 했으나,

3. 자바스크립트 모듈을 index.html 파일에서 불러올려면, script 태그에 type="module" 속성을 추가해 주어야 한다.

<!-- index.html 파일 입니다. -->
<script type="module" src="./main.js"></script>

이렇게 세팅을 완료한다면,

모듈 정상 확인.

정상적으로 console.log 가 잘 찍히는걸 볼 수 있다.

 

#javascript_모듈 #import #export #type_module #src #syntaxerror #js파일분리