모듈3 CommonJS 모듈 내보내기/불러오기 CommonJS 많은 프로젝트에서 ES6 모듈 시스템을 더 널리 사용하고 있는 추세이다. 하지만 import 키워드를 사용할 수 없는 상황(babel과 같은 ES6 코드 변환 도구를 사용할 수 없을 때)에서는 require 키워드를 사용해야하기 때문에 사용 방법을 알고 있으면 좋다. require - 불러오기 const moment = require("moment"); CommonJS에서는 다른 파일의 코드를 불러올 때 require 키워드를 사용하여 다른 변수를 할당하듯이 모듈을 불러온다. exports/module.exports - 내보내기 CommonJS 방식으로 모듈을 내보낼 때는 특정 변수나 그 변수의 속성으로 내보낼 객체를 세팅해줘야 한다. 특히 exports와 module.exports 변수.. 2021. 10. 11. [Webpack]웹팩이란 ? 웹팩(Webpack)이란? 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다. 모듈 번들러란 웹 애플리케이션을 구성하는 자원(html, css, javascript, images 등)을 모두 각각의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구를 의미한다. 번들링이 필요한 이유 번들링 없이 웹사이트를 로딩시키면 매우 많은 파일들이 로딩되며 이렇게 많이 접속할수록 앱은 느려질 수 밖에 없다. 또한 여러 js 파일들 중에서 같은 변수명을 가진 데이터들끼리 충돌이 일어날 수도 있다. 웹팩에서의 모듈/번들링 웹팩에서 지칭하는 모듈이라는 개념은 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 웹 애플리케이션을 구성하는 몇십, 몇백개의 자원들을 하나의 파일로 .. 2021. 10. 10. [Javascript] 모듈이란? 1. 모듈의 일반적 의미 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 의미한다. 일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이러한 모듈은 자신만의 파일 스코프를 가져 캡슐화 되어있기 때문에 재사용하기 위해서 export와 import를 사용한다. export(공개)를 하면 다른 모듈에서 사용가능하고 공개된 모듈은 import를 통해 재사용할 수 있다. 즉... 모듈이란 개념이 도입되어 각 기능별로 파일을 따로 만들어서 이것들을 내가 원하는대로 재사용하기 편해졌다는 것... 2. 자바스크립트와 모듈 자바스크립트는 기본적으로 파일 스코프와 import, export를 지원하지 않았다. script 태그를 이용해 외부 js 파일을 로드할 수는 있지만 .. 2021. 10. 10. 이전 1 다음 반응형
