브라우져에서 자바스크립트 Module 사용하당

자바스크립트

by e7e 2023. 9. 6. 08:40

인터넷이 일반에 확산되던 꽤나 오래 오래 전 과거에는 웹 프로그램에서

자바스크립트가 담당하는 영역은 대부분 Validation(유효성) 체크 부분이었고,

DHTML(Dynamic HTML)이라고 해서 화면에 재미난 움직임을 조금 넣는

정도 였기 때문에 그 코드 양이 얼마 되지 않았당.

하지만 지금은 어떤가?, CSR(Client Side Rendering)이란 말이 나올 정도로

브라우져(Client)에서 하는 일이 많아지다 못해 서버에서 하던

비지니스 로직까지도 자바스크립트로 하는 상황이 되었당.

곧 자바스크립트 코드 양이 장난 아니게 늘었단 이야기당.

거기에 Node의 등장!, React, Angular, Vue 등등등........

이제 더 이상 자바스크립트는 작은 언어가 아닌게 되었당. 마니도 컸당.

코드의 양이 늘면, 분리를 해야 집중할 수 있고, 유지/관리도 잘 할 수있당.

Node에선 이미 오래전에 module 개념을 도입했당.

require를 사용하는 commonJS 방식과 import를 사용하는 ESM(표준)방식

이 있는뎅, 브라우져에서 ESM방식을 사용할 수 있게 되었당. Good이당.

사실 이미 많이 사용되고 있당. 쉽고도 쉬우닝 금방 할수 있당.

일단 머릿속에 export( 모듈수출)/import( 모듈수입) 2개 키워드를 기억행

idolModule.js

//export 키워드에 주목
export const blackPink = {
    groupName: "블랙핑크",
    members: ["로제", "제니", "리사", "지수"],
    debut: "2016-08-08",
    company: "YG",
    songs: ["불장난", "마지막처럼", "Pink Venom"],
    insa: () => "Hi, This is BLACKPINK!"
}

export const itzy = {
    groupName: "있지",
    members: ["채령", "예지", "리아", "류진", "유나"],
    debut: "2019-02-12",
    company: "JYP",
    songs: ["달라달라", "Not Shy", "믿지"],
    insa: () => "너희가 원하는 거 전부 있지? 있지!"
}

const merong = pName => pName;

//export default 에 주목
export default merong;

moduleUse.html

<!DOCTYPE html>
<meta charset="UTF-8">
<script type="module">
    //import 키워드에 주목
    import { blackPink as bP } from "./idolModule.js";
    import { itzy as iZ } from "./idolModule.js";
    // export default 한 거시 import 됨!
    import myLover from "./idolModule.js";

    console.log("블랙핑크:", bP);
    console.log("블랙핑크 인사:", bP.insa());

    console.log("있지:", iZ);
    console.log("있지 인사:", iZ.insa());
    console.log("myLover", myLover("mkJang 안농!"));


    let myInsa = "나는 나얌";
    window.bP = bP;
    window.iZ = iZ;
</script>
<script type="module">
    //console.log("module", myInsa);  // 공유안됨
    console.log("module", bP);        // 공유됨
</script>
<script>
    //console.log("an module", myInsa); // 공유안됨
    console.log("an module", bP);       // 공유안됨
</script>

알아도 되고 몰라도 되지만 안다면 사람이 쪼메 있어보이는 것

모듈 통째로 가져오깅.

import * as MyModule from ".../xxx.js";
MyModule.myFunc1();
MyModule.myFunc2();

가져온 걸 합쳐서 내보내깅..

export * from "../xxx.js"
exporrt {All} from "../xxx.js"

동적(Dynamic) 모듈 로오오딩!

//import 함수는 Promise 리턴
import("../xxxx.js")
 .then((MyModule) => {
 });

await 사용

//await를 가진 모듈을 import하는 모듈속의 모듈들은 
//await가 끝날때 까정 기다린당
const colors = fetch("../json리턴url")
  .then((response) => response.json());

export default await colors;

뽀인또.

코드 실행 확인은 서버가 필요
자동으로 엄격모드(strict mode)로 구동
자동으로 deferred 모드로 구동 (defer 사용 안해도 됨)
여러번 <script> 태그에 넣어도 Module은 한번만 실행됨
global scope가 아님에 주의 import한 script태그 안에서만 실행됨
Module변수는 전역객체에 의도적으로 붙이지 않는 한 모듈 안에서만 사용가능
전역변수는 모듈안에서도 사용가능

요정도만 알아도 기본 사용에는 큰 문제가 없지만 (핵심은 어케 분리, 기준선택)

더 자세한 건 역시 항상 MDN을 참고하장!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

그......녀가 날 잊어도 난 OK!

원래 모든 건 시간 속에서 흐려지공 잊혀지는 거잖앙!

그래 내가 그....녀를 기억하면 되는거얌!~~

https://www.youtube.com/watch?v=yYchF3OLkm4

'자바스크립트' 카테고리의 다른 글

GridStack 가안딴 사용법 (1)	2023.09.08
FullCalendar(풀캘린더) 어거지 사용법 (6)	2023.09.06
차트 그려 보아용 (chart.js) (0)	2023.09.04
노션에 등장 블록 에디터 (editor.js) (0)	2023.07.30
혀니 네이버 날씽 가져오깅 (2)	2023.07.28