반응형
Jake Seo
제이크서 위키 블로그
Jake Seo
전체 방문자
오늘
어제
  • 분류 전체보기 (715)
    • 일상, 일기 (0)
    • 백준 문제풀이 (1)
    • 릿코드 문제풀이 (2)
    • 알고리즘 이론 (10)
      • 기본 이론 (2)
      • 배열과 문자열 (8)
    • 데이터베이스 (15)
      • Planet Scale (1)
      • MSSQL (9)
      • 디비 기본 개념 (1)
      • SQLite 직접 만들어보기 (4)
    • 보안 (7)
    • 설계 (1)
    • 네트워크 (17)
      • HTTP (9)
      • OSI Layers (5)
    • 회고 (31)
      • 연간 회고 (2)
      • 주간 회고 (29)
    • 인프라 (52)
      • 도커 (12)
      • AWS (9)
      • 용어 (21)
      • 웹 성능 (1)
      • 대규모 서비스를 지탱하는 기술 (9)
    • 깃 (7)
    • 빌드 도구 (7)
      • 메이븐 (6)
      • 그레이들 (0)
    • Java (135)
      • 이펙티브 자바 (73)
      • 자바 API (4)
      • 자바 잡지식 (30)
      • 자바 디자인 패턴 (21)
      • 톰캣 (Tomcat) (7)
    • 프레임워크 (64)
      • next.js (14)
      • 스프링 프레임워크 (28)
      • 토비의 스프링 (6)
      • 스프링 부트 (3)
      • JPA (Java Persistence API) (5)
      • Nest.js (8)
    • 프론트엔드 (48)
      • 다크모드 (1)
      • 노드 패키지 관리 매니저 (3)
      • CSS (19)
      • Web API (11)
      • tailwind-css (1)
      • React (5)
      • React 새 공식문서 요약 (1)
      • HTML (Markup Language) (5)
    • 자바스크립트 (108)
      • 모던 자바스크립트 (31)
      • 개념 (31)
      • 정규표현식 (5)
      • 코드 스니펫 (1)
      • 라이브러리 (6)
      • 인터뷰 (24)
      • 웹개발자를 위한 자바스크립트의 모든 것 (6)
      • 팁 (2)
    • Typescript (49)
    • 리눅스와 유닉스 (10)
    • Computer Science (1)
      • Compiler (1)
    • IDE (3)
      • VSCODE (1)
      • IntelliJ (2)
    • 세미나 & 컨퍼런스 (1)
    • 용어 (개발용어) (16)
      • 함수형 프로그래밍 용어들 (1)
    • ORM (2)
      • Prisma (2)
    • NODEJS (2)
    • cypress (1)
    • 리액트 네이티브 (React Native) (31)
    • 러스트 (Rust) (15)
    • 코틀린 (Kotlin) (4)
      • 자바에서 코틀린으로 (4)
    • 정규표현식 (3)
    • 구글 애널리틱스 (GA) (1)
    • SEO (2)
    • UML (2)
    • 맛탐험 (2)
    • 리팩토링 (1)
    • 서평 (2)
    • 소프트웨어 공학 (18)
      • 테스팅 (16)
      • 개발 프로세스 (1)
    • 교육학 (1)
    • 삶의 지혜, 통찰 (1)
    • Chat GPT (2)
    • 쉘스크립트 (1)
    • 컴파일 (2)
    • Dart (12)
    • 코드팩토리의 플러터 프로그래밍 (4)
    • 플러터 (17)
    • 안드로이드 스튜디오 (1)
    • 윈도우즈 (1)
    • 잡다한 백엔드 지식 (1)
    • 디자인 패턴 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • item8
  • 토비의 스프링
  • 자바스크립트 면접
  • 메이븐 라이프사이클
  • try-with-resources
  • 자바스크립트
  • pnpm
  • 자바 검증
  • 추상 팩터리 패턴
  • serverless computing
  • 슬로우 쿼리
  • 자바 디자인패턴
  • 메이븐 골
  • 싱글톤
  • MSSQL
  • NEXT JS
  • prerendering
  • bean Validation
  • 도커공식문서
  • 플라이웨이트패턴
  • Javadoc 자바독 자바주석 주석 Comment
  • Pre-rendering
  • 프로그래머의 뇌
  • 메이븐 페이즈
  • 이펙티브 자바
  • Java
  • 이펙티브 자바 item9
  • 참조 해제
  • 외래키 제약조건
  • next js app
  • item7
  • 작업기억공간
  • 자료구조
  • 자바스크립트 인터뷰
  • 느린 쿼리
  • 스프링 검증
  • 싱글턴
  • rust
  • 러스트
  • 이펙티브자바
  • 자바
  • 서버리스 컴퓨팅
  • 싱글톤 패턴
  • 알고리즘
  • 빈 검증
  • 팩터리 메서드 패턴
  • 객체복사
  • Next.js
  • item9
  • 디자인패턴

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Jake Seo

제이크서 위키 블로그

자바스크립트/모던 자바스크립트

모던 자바스크립트, 모듈 1 - import 와 export 방식

2023. 3. 26. 00:12

명명된 이름으로 모듈화하기 (named export, named import)

  • 이름을 지어 export 하고 그 이름을 받아 import 하는 방식이다.
  • 모듈을 만들었을 때 변화에 가장 유연하기에 가장 선호되어야 하는 방식이다.
  • 모듈 배포 후 여기저기서 의존한 이후에도 업데이트하는 것이 상대적으로 자유롭다.

네임드 익스포트 혹은 명명된 익스포트 (named export)

  • 변수, 함수, 클래스 등을 내보낼 수 있다.
  • as 를 이용해 별칭으로 내보내는 것도 가능하다.
    • 이를 이용해 {... as default} 로 기본 익스포트를 만들 수는 있지만 추천되는 방법이 아니다.
  • export { a, b } 혹은 import {a, b} from "/abc.js" 는 디스트럭처링 처럼 생겼지만 전혀 아니다.
// 내보내기 (var, let, const, function, class 타입이 가능하다)
export let myVariable = Math.sqrt(2);
export function myFunction() {
  // …
}

// 모듈 스코프에 존재하는 함수와 변수 나중에 내보내기
export { myFunction2, myVariable2 };

// 다른 이름으로 내보내기
const itsMyVariable = 1;
export { itsMyVariable as v };

네임드 임포트 혹은 명명된 임포트 (named import)

  • 필요한 변수나 함수를 모듈에서 가져올 수 있다.
  • {} 기호를 이용해서 가져올 이름을 입력하면 된다.
  • as 를 이용해 이름을 변경해서 가져오는 것도 가능하다.
  • default 모듈을 import 할 수도 있지만, 모범 사례가 아니다.
import { myVariable, myFunction } from "/modules/my-module.js";
import {
  myVariable as myVar,
  myFunction as myFunc,
} from "/modules/my-module.js";
import { default as something } from "/my_module.js";

기본 이름으로 모듈화하기 (export default, import default)

  • 모듈의 기본 이름을 이용해 모듈로 내보내고 받는 방식이다.
  • 신중하게 이용해야 하는 import, export 방식이다.
    • 단 하나만 가능하므로 일단 다른 js가 어떤 모듈의 default export 에 의존한다면, 해당 모듈의 default export 에 해당하는 코드를 수정하기 힘들어진다.

기본 익스포트 (export default)

export default myFunction;

export default function () { /* … */ }
export default class { /* … */ }

export { myFunction as default }; // 맨위의 export default myFunction; 와 같은 의미이다.

기본 임포트 (default import)

  • {} 기호 없이 import 기호를 이용하면 된다.
  • 원하는 이름으로 불러오면 된다.
import example from "./module.js";

console.log(example);
example();

default 모듈만의 특징

  • 식별자나 TDZ 에 영향을 받지 않는 유일한 export 방법이다
    • 식별자가 없다는 것만 제외하면 named export 과 똑같다.
  • default 는 모듈의 다른 코드에 접근할 수 없다.
  • 익명 혹은 익명 클래스로 모듈을 내보낼 수 있는 유일한 장소이다.
  • default 이후의 나머지 코드가 default 를 건들 수 없으니 안전한 export 가 가능하다.
  • export default 다음에 식별자를 쓰는 일은 의미가 없다.
  • export default 를 export default 만의 목적이 없이 그냥 쓰는 것을 추천하지 않는다.
  • export default 는 어떻게 보면 모듈의 큰 부분을 바꿀 수 없는 큰 제약을 거는 것이다.
    • export default 가 바뀌어버리면 import 한 사람들이 전부 소스코드를 바꾸어야 할 수도 있다.

네임 스페이스로 모듈화하기 (Namespace import, Namespace export)

  • ES6 이전에 네임스페이스 객체로 모듈화 하는 것의 모듈 버전쯤 된다.
  • 모든 named export 등을 한번에 가져올 때 유용하다.
  • 단, 네임스페이스 export 와 명명된 export 를 결합할 수는 없다.
    • 기본값은 가능하긴 한데, 기본 값 임포트가 먼저 나와야 한다.
    • 스펙에서 파싱 복잡성을 피하기 위해 지원하지 않는다.
export const doAllAmazingThings = () => {
  console.log("hello world");
};
import * as myModule from "/modules/my-module.js";
myModule.doAllTheAmazingThings();
import def, * as ns from "./mod.js"; // 정상
import * as ns, def from "./mod.js"; // 에러가 난다.
import def, {a, b as bee} from "./mod.js"; // 정상
import * as ns, {a, b as bee} from "./mod.js"; // 에러가 난다.

사이드 이펙트로 모듈화하기

  • 전역에 영향을 주는 스크립트를 작성해서 불러와야될 때가 있다.
  • 이를테면, polyfill 은 prototype 의 내용을 바꿔서 새로운 함수를 추가해준다.
/**
 * Array.flat() polyfill
 * Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat#reduce_concat_isArray_recursivity
 */
if (!Array.prototype.flat) {
  Array.prototype.flat = function (depth) {
    "use strict";

    // If no depth is specified, default to 1
    if (depth === undefined) {
      depth = 1;
    }

    // Recursively reduce sub-arrays to the specified depth
    var flatten = function (arr, depth) {
      // If depth is 0, return the array as-is
      if (depth < 1) {
        return arr.slice();
      }

      // Otherwise, concatenate into the parent array
      return arr.reduce(function (acc, val) {
        return acc.concat(Array.isArray(val) ? flatten(val, depth - 1) : val);
      }, []);
    };

    return flatten(this, depth);
  };
}
import "./polyfill.js"; // Array.prototype.flat 이 없다면 추가해줌, 지원하지 않는 브라우저 용도

롤업 모듈과 간접 익스포트 (indirect export)

  • 간접 익스포트는 다른 모듈의 일부 혹은 전체를 받아 다시 export 하는 것을 말한다.
  • 나에게 필요한 모듈만 모아놓은 또 다른 모듈을 만들 때 유용하다.

가져온 이후에 export 하기

import { example } from "example.js";
export { example };

가져오면서 바로 export 하기

  • export 에서 from 을 덧붙여 아래와 같은 것도 가능하다.
    • 그러나 export 는 import 가 아니므로 로깅에서 에러가 난다. 사용할 수 없음에 유의하자.
export { example } from "example.js";
export { example1 as ex1 } from "example.js"; // 이것도 가능
console.log(example); //error

모듈의 모든 내용을 바로 export 하기

  • 이 기능은 내가 export 하는 모듈에 새로운 export 가 업데이트 됐을 때 유용하다
export * from "example.js";

export 의 이상적인 방식

  • 가장 밑으로 미루는 것이 좋다.
    • 왜냐하면 TDZ의 흐름과 일치하기 때문이다.
    • export 에는 TDZ 가 사용되지 않지만 그것을 따로 인지하면서 코딩하기는 굉장히 어렵기 때문이다.

잘못된 예제

let a = [1, 2, 3];
export { a };
a = [5, 6];
  • a 는 변화가 가능하기 때문에 결국 export 이후 결과가 [5, 6] 이 되긴 한다.
    • 이 코드를 보는 모든 사람이 단번에 알기는 어렵다.
  • export 모델만 TDZ 를 사용하지 않아서 기존 자바스크립트 코드를 짜다가 봤을 때 굉장히 헷갈린다.

올바른 예제

let a = [1, 2, 3];
a = [5, 6];
export { a };
  • 우리가 평소에 JS 코드를 작성할 때 하는 사고에서 위배되지 않는 자연스러운 코드이다.

동적 모듈 임포트

  • 필요에 의해 if 와 같은 조건문을 주고 동적으로 모듈을 임포트할 수 있다.
  • 동적 모듈 임포트도 정적으로 로드된 모듈과 마찬가지로 캐싱된다.

이전까지의 import 방식의 특징 (정적 모듈 임포트)

  • 이전까지의 import 방식은 모듈 지정자 (module specifier) 에 표현식이 아닌 문자열 리터럴을 넣었다.
  • 최상위 수준에서만 import 혹은 export 사용이 가능했다.
  • if 문 혹은 while 문과 같은 조건문에서 조건에 따라 모듈을 임포트할 수 없었다.
  • 정적인 덕분에 코드를 실행하지 않고도 의존성을 확인할 수 있었다.

그러나 일부 사용 사례에서는 런타임에 가져올 모듈의 엔트리나 위치를 결정해야 한다.
이 때문에 ES2020 부터 동적 모듈 임포트가 추가되었다.

동적 모듈 임포트

import(variable /* 런타임에 결정되는 이름 */)
  .then((mod) => {
    // ...
  })
  .catch((err) => {
    console.log(err);
  });
  • 위에서 import 는 함수 호출이 아니라서 동적 모듈 임포트 외의 다른 목적으로 사용이 불가능하다.
  • 일반 함수 호출이 안되는 이유가 2가지 있다.
    • 일반 함수 호출이 전달하지 않는 컨텍스트 정보를 전달해야 한다.
    • 트리 셰이킹 등을 위해 동적 임포트가 사용되는지 알아야 한다.

플러그인을 로드하는 예시 함수

async function loadPlugins(editor, discoveredPluginFiles) {
  const plugins = [];
  const failed = [];

  await Promise.all(
    discoveredPluginFiles.map(async (pluginFile) => {
      try {
        const plugin = await import(pluginFiles);
        plugin.init(editor);
        plugins.push(plugin);
      } catch (error) {
        failed.push({ error, pluginFile });
      }
    })
  );

  return { plugins, filaed };
}
  • 플러그인 배열을 인자로 주어 플러그인을 병렬로 로드한다.
  • 로드된 플러그인과 실패한 플러그인이 결과 객체로 반환된다.

모듈의 메타 데이터 정보 확인하기

  • import.meta 를 통해 모듈의 메타정보를 확인할 수 있다.
console.log(import.meta.url); // 모듈이 불러진 URL 을 알 수 있다.

웹 워커를 모듈 형태로 로드하기

  • 웹 워커를 모듈 형태로 생성할 수 있지만, 브라우저 지원을 잘 확인해야 한다.
const worker = new Worker("./worker.js", { type: "module" });
반응형
저작자표시 비영리 (새창열림)

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

모던 자바스크립트, 모듈 3 - 트리 셰이킹과 번들링  (0) 2023.03.26
모던 자바스크립트, 모듈 2 - 모듈의 동작 방식  (0) 2023.03.26
모던 자바스크립트, 위크 맵(WeakMap) 과 위크 셋(WeakSet)  (0) 2023.03.24
모던 자바스크립트, 셋 혹은 세트 (Set)  (0) 2023.03.23
모던 자바스크립트, 맵 (Map)  (0) 2023.03.23
    '자바스크립트/모던 자바스크립트' 카테고리의 다른 글
    • 모던 자바스크립트, 모듈 3 - 트리 셰이킹과 번들링
    • 모던 자바스크립트, 모듈 2 - 모듈의 동작 방식
    • 모던 자바스크립트, 위크 맵(WeakMap) 과 위크 셋(WeakSet)
    • 모던 자바스크립트, 셋 혹은 세트 (Set)
    Jake Seo
    Jake Seo
    ✔ 잘 보셨다면 광고 한번 클릭해주시면 큰 힘이 됩니다. ✔ 댓글로 틀린 부분을 지적해주시면 기분 나빠하지 않고 수정합니다. ✔ 많은 퇴고를 거친 글이 좋은 글이 된다고 생각합니다. ✔ 간결하고 명료하게 사람들을 이해 시키는 것을 목표로 합니다.

    티스토리툴바