JavsScript - html과 js 파일에서 import, export 하기

김민찬·2022년 4월 8일
0

JavaScript

목록 보기
8/23
post-thumbnail

import와 export!

지금 까지 CRA(Create React App)에서만 importexport를 사용해서 JavsScript의 모듈 기능을 사용해왔다.

그러다 갑자기 궁금증이 생겼다.
순수한 htmlJS에서는 importexport를 어떻게 구현해야할까?

파일 경로는 다음과 같이 구성했다.

index.html

  • index.html은 기본적인 구성에 추가로 body에 script 태그만 추가했다.

script 태그를 추가할때 <script type="modules">을 추가해 해당 스크립트가 모듈이라는 것을 브라우저가 알 수 있게 해줘야한다.

type="moudules"를 추가해 주지 않으면 exportimport 를 사용하지 못하고 브라우저는 다음과 같은 에러를 뱉는다.

<!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>JavaScript Modules</title>
</head>
<body>
  <script src="./js/main.js" type="module"></script>
</body>
</html>

Util.js

  • Util.js에는 간단한 함수를 만들었다.
  • add 함수는numbers라는 배열을 받아서 배안의 모든 요소를 더해주는 함수이다.

그리고 함수를 export로 내보내준다.

export const add = (numbers) => {
  return numbers.reduce((acc, cur) => {
    return acc + cur;
  }, 0);
}

main.js

대망의 main.js이다.

  • 아까 export 해준 add함수를 import로 받아준다.
  • 1+2+3은? 정답은 콘솔에 출력된다!
import { add } from './Util.js';

console.log(add([1, 2, 3]))

여기서 주의할 점은 확장자를 꼭 붙혀야 한다는 것이다. 아니면 다음과 같은 에러를 만나볼 수 있다.

이 에러를 만나고 싶지 않으면 처신 잘하라고

이제 개발자도구의 Console을 켜면 6이 잘 출력된 것을 볼 수 있다.

소스코드

소스코드를 보실분은 여기로 오세요

profile
두려움 없이

0개의 댓글