자바스크립트에서 외부 모듈을 불러오는 두 가지 방법

require

CommonJS 방식으로 모듈을 불러오며 불러온 모듈의 객체를 반환한다. 동기적으로 작동하며 모듈 경로의 파일 확장자를 생략할 수 있다.

const fs = require('fs'); // Node.js 내장 모듈인 fs를 가져옴
const myModule = require('./myModule'); // 현재 폴더에 있는 myModule.js 파일의 모듈을 가져옴

CommonJS

모듈화를 위한 자바스크립트 표준 규격 중 하나로 서버 측 자바스크립트 개발을 위해 개발되었다. CommonJS는 require()를 사용하여 다른 모듈을 불러오고, module.exports, exports를 사용하여 다른 모듈에서 사용할 함수, 객체, 변수 등을 내보낸다. 모듈은 파일로 구성되며 각 파일은 독립적인 스코프를 가지고있다.

동기 vs 비동기

코드의 실행 순서와 관련된 개념. 동기 처리는 코드의 실행 결과를 기다린 후에 다음 코드를 실행한다. 즉, 어떤 함수가 호출되면 그 작업이 끝날 때까지 코드의 실행을 멈추고 대기한 후 다음 코드를 실행한다.
반면에 비동기 처리는 코드의 실행 결과를 기다리지 않고 다음 코드를 실행한다. 콜백 함수에서 주로 사용하는 방법이며 작업이 끝났을 때 결과를 전달하거나 다음 작업을 실행한다.

스코프(Scope)

변수와 함수의 유효 범위. 즉, 스코프는 변수와 함수가 정의된 위치에서 어디까지 접근 가능한 지를 결정한다.

-	전역 스코프(Global Scope)	지역 스코프(Local Scope)
접근 범위	코드 어디서나 접근 가능	함수 내부에서 정의한 변수 및 함수가 해당 함수 내부에서만 접근 가능

-	렉시컬 스코프(Lexical Scope)	다이나믹 스코프(Dynamic Scope)
따르는 위치	함수가 정의된 위치	함수를 호출하는 위치

대부분의 언어는 렉시컬 스코프에 해당하며 자바스크립트 역시 마찬가지다.

import

ES6부터 도입된 모듈 시스템으로 브라우저 환경에서도 사용 가능하다. 비동기적으로 작동하며, export로 내보낸 모듈의 객체를 가져와 사용한다. 모듈 경로에 확장자를 포함해야 한다. 특정한 함수나 변수만을 가져올 때는 {중괄호}를 사용하며, 가져올 모듈이 export default인 경우에는 중괄호를 사용하지 않고 이름을 바로 지정할 수 있다.

import fs from 'fs'; // Node.js 내장 모듈인 fs를 가져옴
import { myFunction } from './myModule.js'; // 현재 폴더에 있는 myModule.js 파일에서 myFunction 함수를 가져옴

export와 export default

	export	export default
갯수 제한	없음	한 컴포넌트에 한 개의 함수(대표 함수)만 가능
export	export {함수명}	export default 함수명
import	import {export 이름 = named export}	import (직접 정의한 이름) from 경로

export의 경우 as를 사용하면 export와 import시 함수명을 임의로 변경할 수 있다.

• export as

  export {originName as ChangedName};

• import as

  import {originName as ChangedName} from './moduleFile.js;