모듈(module)

jiin lee·2024년 1월 3일

frontend-javascript이론

목록 보기

10/15

사회망을 개발하는 작업을 수행한다고 상상해보세요. 이를 위해서는 100,000줄 이상의 코드를 작성해야 할 것입니다. 물론 이 모든 코드를 하나의 파일에 넣을 수 있지만, 이를 관리하는 데 많은 문제가 발생할 것입니다. 이 주제에서는 모듈을 사용하여 코드를 여러 파일로 분할하여 조직하는 방법을 자세히 살펴보겠습니다.

모듈이란?

모듈은 독립적인 코드가 담긴 단일 파일로, 다른 파일에서 가져올 수 있는 기능입니다. 모듈을 사용하는 파일은 해당 모듈의 결과물과만 작동하며 내부 구현을 알지 못합니다.

이는 프로그램을 유지 관리하는 데 도움이 됩니다. 모듈을 다시 작성하려면 해당 모듈의 코드만 변경하면 되며 다른 부분에 영향을 미치지 않습니다.

모듈의 이점

1. 코드 조직

큰 코드베이스를 모듈로 나누면 더 나은 조직이 가능합니다.
특정 기능에 집중할 수 있게 되어 프로그램의 다른 부분에 간섭하지 않고 작업할 수 있습니다.

2. 유지 보수성

모듈은 유지 보수를 더 쉽게 만듭니다. 모듈을 수정하려면 프로그램의 다른 부분에 영향을 미치지 않고도 수행할 수 있습니다.

3. 코드 재사용

비슷한 작업을 위해 코드를 복사하여 붙이는 대신 모듈은 코드 재사용을 촉진합니다.
코드를 한 번 작성하고 필요할 때마다 재사용하는 것이 "자신을 반복하지 말라"는 개발의 주요 규칙을 따르는 데 훨씬 나은 방법입니다.

Import and export

다른 파일에서 함수를 사용하려면 먼저 해당 함수 이름 앞에 export 키워드를 작성해야 합니다.

// library.js
export function myBestFunction() {
  //...
}

그런 다음 import 키워드를 사용하여 호출하려는 파일에 가져와야 합니다. 그 후 가져온 함수를 원하는 곳에서 호출할 수 있습니다.

// main.js
import { myBestFunction } from './library.js';

myBestFunction();

as 키워드를 사용하여 가져온 함수의 이름을 변경할 수도 있습니다.

// main.js
import { myBestFunction as myFunction } from './library.js';

myFunction();

하나의 모듈에서 여러 함수를 사용해야 할 때 모듈 전체를 가져오는 * 기호를 사용할 수 있습니다.

// main.js
import * as myLib from './library.js';

myLib.myBestFunction();

함수 이름을 작성하지 않고 가져오는 것도 가능합니다. 이를 위해 export 뒤에 default 키워드를 추가하고, 괄호 없이 어떤 이름이든 사용하여 함수를 가져올 수 있습니다.
무조건 해당 파일에서는, default로 설정한 function이 가져와지는 것임

// library.js
export default function myBestFunction() {
  //...
}

// main.js
import anyNameToFunction from './library.js';

anyNameToFunction();

파일당 하나의 기본 내보내기만 가질 수 있지만, 하나의 파일에서 기본 및 비기본 내보내기를 조합할 수 있습니다.

// library.js
export function myFunction() {
  //...
}

export default function myBestFunction() {
  //...
}

// main.js
import anyNameToFunction, { myFunction } from './library.js';

anyNameToFunction();
myFunction();

기본 내보내기의 문제점
기본 내보내기를 사용할지에 대한 개발자 간의 큰 논쟁이 있습니다.
문제는 각 프로그래머가 기본 함수를 가져올 때
자체 이름을 만들기 때문에 일관된 코드가 되지 않는다는 것입니다.
-> 그렇다면, 기본 내보내기 사용하려면 이런 식으로 해라!!
이를 피하기 위해 가져온 함수를 파일 이름에 따라 명명하는 것이 좋습니다.

// main.js
import library, { myFunction } from './library.js';

library();

myFunction();

자바스크립트의 모듈은 코드를 캡슐화하고 잠재적인 오류를 피하는 데 도움이 되는 강력한 도구입니다.
이러한 이점을 활용하기 위해서는 함수를 생성할 때 export 키워드를 작성하고, 다른 파일에 가져올 때 import 키워드를 작성하는 등 간단한 작업만 수행하면 됩니다.

"Reduce errors using only local variables"

모듈의 장점에 대한 하위 주제 중 하나로서, 모듈을 사용함으로써 어떻게 오류를 줄일 수 있는지에 대한 내용입니다.

모듈을 사용하면 코드를 여러 파일로 나눌 수 있습니다. 각 모듈은 독립적이며 다른 모듈의 내부 구현을 알지 못합니다. 이러한 독립성은 코드를 더욱 안정적이고 오류가 적은 상태로 유지하는 데 도움이 됩니다. 여기에 몇 가지 관련 이점이 있습니다.

지역 변수 사용: 모듈 내에서 정의된 변수는 해당 모듈 내에서만 유효합니다. 이는 변수의 범위를 제한하고 다른 부분에서의 오류 가능성을 줄입니다. 다른 모듈에서 동일한 이름의 변수를 정의해도 서로 영향을 미치지 않습니다.

모듈 간 충돌 회피: 다른 모듈에서는 해당 모듈이 내부적으로 어떤 변수나 함수를 사용하는지 알 필요가 없습니다. 이는 이름 충돌을 방지하고 각 모듈이 독립적으로 작동할 수 있도록 합니다. 이름 충돌은 오류의 일반적인 원인 중 하나입니다.

모듈 단위 테스트: 모듈은 단일 파일이므로 해당 모듈에 대한 단위 테스트를 수행하기가 더 쉽습니다. 각 모듈을 독립적으로 테스트할 수 있으므로 오류를 발견하고 수정하는 것이 더 쉬워집니다.

코드의 재사용: 모듈은 코드를 논리적으로 그룹화하고 재사용 가능한 조각으로 만들어줍니다. 한 모듈에서 발생하는 오류는 해당 모듈 내에서만 영향을 미치므로 다른 모듈의 코드에는 영향을 주지 않습니다.

이러한 이점들은 모듈을 사용하여 코드를 구성함으로써 소프트웨어의 유지 보수성을 향상시키고 오류를 줄이는 데 도움이 됩니다. 모듈화는 대규모 코드베이스에서 특히 중요하며, 이를 통해 팀이 효율적으로 협업하고 유지 보수 비용을 최소화할 수 있습니다.

Create a user

Let's assume that you have a default exported createUser function and an independent createUserName function. Find the correct way to import both functions from the same file.

import createUser, {createUserName} from "./user.js";

menu.js

export function getMenuItem() {
  // ...
}

export function getMainMenu() {
  // ...
}

export function getAdditionalMenu() {
  // ...
}

가능
import { getMenuItem as myMenuGet, getMainMenu as myMenuGetMain, getAdditionalMenu as myMenuGetAdditional} from './menu.js';
import * as getMenu from './menu.js';
import { getMenuItem, getMainMenu, getAdditionalMenu } from './menu.js';
불가능
import getMenuItem, getMainMenu, getAdditionalMenu from './menu.js';