# CommonJS
CommonJS 와 ES Modules 의 번들 크기 비교
https://web.dev/commonjs-larger-bundles/ 의 예시 코드를 직접 돌려본 결과 입니다.https://github.com/youngkiu/cjs-vs-esm-size
CommonJS, esModule 번들링 결과 비교하기
타입스크립트와 웹팩을 이용하여 CommonJS와 esModule의 차이점을 비교하려고 합니다. 그전에 자바스크립트가 지원하는 모듈이 정확히 무엇인지 모르시다면 링크를 봐주시기 바랍니다. 이 포스트를 쓰게 된 이유는 문든 tsconfig.json에서 module을 수정하다가 CommonJS, ES2015, ... , ESNext 등 종류가 많은데 무엇을 사용...
자바스크립트 module
안녕하세요. tsconfig와 webpack에서 commonJS와 esModule의 컴파일 결과를 정리하는 도중, 기본적인 지식을 먼저 익혀야 된다고 생각이 들었습니다(이는 추후에 새로운 글로 소개 드리겠습니다). 바로 자바스크립트에서 module이 어떻게 동작하는지
[에러] Heroku 배포 후 Internal Server Error
문제 Express 앱에서, ES6를 ES5로 바꾸는 방법에는 babel src -d build && node build/index.js 말고도 nodemon --exec node_modules/.bin/babel-node src/index.js 가 있다는 것을 알
모듈 시스템과 Webpack(1)
리액트를 공부하고, 리액트 프로젝트를 진행하며 모듈 시스템을 이용해 컴포넌트 주도 개발을 할 때 Webpack과 같은 번들러의 역할이 중요하다는 것을 알게 되었다. 이 글을 통해서 리액트 개발 시 웹팩이 필요한 이유와 웹팩 설정 방법을 정리해본다...
import from vs const require
개발을 하다보면 모듈을 불러올 때 이 두가지를 마주하는 경우가 많다.뭔가 다른 것 같고, 또 실제로 혼용하거나 잘못 사용하면 에러가 나는 경우가 다반사이다.하지만 뭔지도 모르고 그냥 지나쳐서 사용했던 이 두 친구들을 정리해보려 한다.더 최신 스펙인 ES6 모듈 시스템을
webpack + babel
모듈단위의 js들을 모아서 하나의 app.js로 번들링해주는 기능 크로스브라우징을 위해 es6문법으로 작성된 js를 es5로 변환해주는 기능루트폴더에 npm init을 해준다.\*이때 폴더에 package.json파일이 생겨남웹팩과 바벨을 설치해준다 \*웹팩 바벨은 개
DEEP DIVE 한 장 요약 (모듈)
모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다.일반적으로 모듈은 기능을 기준으로 파일 단위로 분리한다. 이때 모듈이 성립하려면 모듈은 자신만의 파일 스코프(모듈 스코프)를 가질 수 있어야 한다.자신만의 파일 스코프를 갖
CommonJS 이해하기
exports는 변수나 함수의 이름을 그대로 사용해서 내보낸다. NamedExports라고 일컫는다.module.exports와 exports는 같은 객체를 참조한다. 같은 문법이다.보통 하나의 객체에 모아서 내보낸다.babel이 없는 환경에서 ES모듈을 사용한다면 i
MYSTAGRAM 제작기 5
이번에는 개발에 도움이 되는 tool에 관하여 작성할 것이다. > prisma studio 데이터 베이스를 시각화해서 보여준다. 검색에 용이하고 수정도 가능하다. 위의 명령어로 실행할 수 있다. > graphql-tools graphql-tools은 스키마와 re
[node.js] 모듈 사용하기 (Common JS)
브라우저와 다르게 node.js의 특징 중 하나는, 다양한 내장 모듈이 존재한다는 것입니다. 따라서, 이를 가져다 쓸 수 있는 방법을 배워야 합니다. 브라우저에서는 다른 스크립트 파일을 불러올 때에, HTML의 태그를 이용했습니다. 반면에 node.js 에서는 HTM
TIL_210407
화살표 함수모듈화CommonJS화살표 함수는 function 키워드를 화살표로 축약해서 표시하는 방법이다. ES6부터 새로 도입되었다.위와 같이 작성된 것을 화살표 함수라고 부르는데, 함수 표현식과 비교하면 한 눈에 확인할 수 있다.함수 표현식화살표 함수화살표 함수는
(Daily / TIL 02.24) commonJS 모듈
🤜 오늘 배운것들 npm, package.json 화살표 함수 CommonJS > package.json npm 모듈을 활용하기 위해 해당 모듈에 대한 정보를 담은 파일 즉, 프로젝트 전반에 관한 정보가 담겨있다. npm : node.js 생태계의 패키지 매니저
TIL_021_210225
CommonJS란 무엇인가?=> 브라우저 환경 밖인 Node.js에서 모듈 생태계를 구축하기 위해 만든 규칙들 이라고 말할 수 있다.모듈 생태계를 만들기 위해 어떤 것들이 필수적으로 요구되는 가?=> require 함수로 모듈을 불러와서 사용 (ex. require('
[TIL] 2021.02.24
이머시브 과정 3일차 되는 날이다.오늘은 최신 자바스크립트의 문법에 대해서 첫 발걸음을 떼는 날이었다. 배운것들을 바탕으로 블로깅을 하면서 다시한번 되짚어 보는 시간을 가져보자 !node.js vs 브라우저package.jsonCommonJS화살표 함수저번 시간에 no
CommonJS
CommonJS ? 간단하게 자바스크립트 모듈화를 위한 프로젝트 중 하나라고 한다. 사용 방법 저장되어 있는 모듈을 불러올 때 다른 스크립트를 불러올 때 아직 이개념은 이해가 안된다. 정리가 되면 수정하겠다. 모듈로 노출시킬 때 module.exports 와
