모듈 시스템 require와 import의 차이 / commonJs와 ES6 / 웹팩 바벨

모듈 시스템 require와 import의 차이

💡둘다 모듈화를 위한 모듈 시스템입니다. require는 CommonJS 키워드이고, import는 ES6에서 새로 도입된 키워드입니다. 최근에는 ES6 모듈 시스템인 import가 많이 사용되고 있지만 모든 브라우저에서 호환되진 않기 때문에 Babel과 같이 ES6 문법을 이전 문법으로 트랜스파일링(Transpiling)해주는 도구가 있어야 import를 사용 가능합니다. 

차이점으로는
1. CommonJs 모듈 방식으로는 전체 모듈을 다 불러오고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없습니다. 이 때문에 ES6(ECMA2015)부터는 import 방식의 모듈 시스템을 사용합니다. import는 require과는 다르게 모듈내에 정의된 특정한 부분만 불러올 수 있습니다.

2. CommonJS 방식은 런타임에서 동작하여 동기적인 모듈 로드를 지원하기 때문에 서버 사이드(Node.js)에서 더 자주 사용됩니다. 반면에 ES6 방식은 정적으로 분석되어 런타임 이전에 모듈 로드를 수행하며, 비동기적인 모듈 로드를 지원하기 때문에 브라우저와같이 네트워크 요청 등 비동기 작업이 많은 경우 비동기적인 모듈 로드가 웹 페이지의 성능과 속도를 향상시킬 수 있습니다.

require와 import는 노드와 브라우저 환경에 따라 기존 코드와 환경 호환성, 프로젝트 설정을 고려하여 적절한 방식을 선택하여 사용합니다.

- require / exports 는 기존까지 Node.js에서 사용되던 CommonJs 모듈 방식으로, module.exports 객체에 모듈 전체를 치환하여 내보내고, require을 통해 해당 모듈을 불러오는 방식이다. 따라서 CommonJs 모듈 방식으로는 전체 모듈을 다 불러오게 되고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없다.

때문에 ES6(ECMA2015)부터는 import / export 라는 방식의 모듈 시스템을 사용한다. import는 require과는 다르게 모듈내에 정의된 특정한 부분만을 불러올 수 있다.

import {name} from 'module'

 

 

commonJs와 ES6 / 모듈 시스템과 웹팩 바벨과의 관계

commonJS란?

CommonJS 모듈 시스템은 서버 사이드 개발을 위해 설계되었으며, 주로 Node.js 환경에서 사용된다. 기본적으로 브라우저에서는 지원되지 않으며 브라우저 환경에서는 웹팩과 같은 번들러를 사용하여 CommonJS 모듈을 다룰 수 있다.

 

웹팩이란 ? 바벨이란 ?

웹팩(Webpack) : 브라우저와 서버 간의 모듈 시스템 차이를 극복하기 위해 웹팩(Webpack)과 같은 번들러가 등장. 웹팩은 여러 개의 모듈을 하나의 번들로 묶어주는 역할을 수행하며, CommonJS와 같은 모듈 형식을 브라우저에서도 사용할 수 있게 해준다. 웹팩은 번들링 과정에서 모듈 간의 의존성을 파악하고, 필요한 모듈만 로딩하도록 최적화하여 불필요한 스크립트의 로딩과 실행을 방지한다. 이로 인해 브라우저에서도 CommonJS 모듈을 사용할 수 있게 되었다.

바벨(Babel) : ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 모든 브라우저에서 동작할 수 있도록 호환성을 지켜주는 트랜스파일러다.

Babel이란 무엇인가?

 

바벨(babel)이란 무엇인가?

 

모듈 시스템(require, import)과 바벨, 웹팩과의 관계 정리

ES6 문법은 모던 브라우저에서 지원되는 경우가 많지만, 모든 브라우저에서 완전히 지원되지 않을 수 있다. 따라서 ES6 문법을 사용하여 개발하더라도, 이를 모든 브라우저에서 동작하도록 하려면 트랜스파일링(Transpiling)이 필요하다. 이 때 바벨이 트랜스파일링을 하는 역할을 수행한다. 트랜스 파일링된 ES5문법, 즉 commonJS 모듈 시스템 문법 등은 기본적으로 브라우저 환경에서 지원하지 않기 때문에 번들링(Bundle) 과정이 필요하다. 웹팩을 통해 필요한 모듈들을 번들링하여, 모든 브라우저에서 호환되는 자바스크립트를 생성할 수 있게 된다.