# CommonJS
Tree Shaking 관점에서의 CommonJS와 ES Module
요즘에 제가 부족하다고 생각되는 부분을 찾아서 공부하고 있는데 그 중 한가지가 모듈 시스템입니다. CommonJS와 ES Module(ESM)에 대한 대략적인 부분은 알고 있지만 제대로 알고 있다고 말하기는 힘들거 같습니다. 이번 시간에는 모듈 시스템을 알아보겠습니다.
CommonJS? ESM?
Common JS 는 Node.js 의 첫 번째 내장 모듈 시스템이다.크게 두가지 주요개념은 이렇게 두 가지 이다.가져오는 코드는이렇게 작성 될 수 있고export 되는 코드는이렇게 두가지 방법으로 정의 할 수 있다.중요한건 CommonJS 에서 모듈을 로드 하는 방식
JavaScript와 모듈 시스템
최근 프로젝트를 진행하면서 번들러로 Vite를 사용했다. 늘 CRA만 사용했기 때문에 모듈 시스템과 번들러에 대한 이해가 부족했었는데 이번 기회에 해당 부분들에 대해 좀 더 공부해볼 수 있었다. 이번 포스팅에서는 그 중 JavaScript의 모듈 시스템에 대해 공부한
CommonJS
Node.js환경에서 자바스크립트 모듈을 사용하기 위해 만들어진 모듈 시스템.변수나 함수를 '속성'으로 내보내는 기능.한 모듈에서 여러 번 작성 가능.하나의 객체로 묶어서 내보내는 기능.불러올 때는 require로 불러옴.
Webpack5 설정 무작정 해보며, 자바스크립트의 역사에 대해 알아보기
프론트엔드라면 언젠가는 거쳐야 할 번들러에 대한 공부를 시작했다. 가장 널리 알려진 webpack5 를 기반으로 무작정 실습해 봤다. 연말에 우연찮게 재택근무를 하게되어, 퇴근 후 시간이 조금 넉넉해졌기에 조금 여유롭게 공부했고, 이해한 대로 한번 기술해 보고자 한다.
JavaScript Modules
✅ index.html , index.js 와 같이 파일명과 확장자가 표시된 코드는 실제로 실행 가능하며, 파일명 그대로 복사하셔서 생성 후, 코드를 복사해서 붙여넣기 하시면 실행이 가능합니다.✅ \*표시가 있는 단어는 🤔 궁금해요! 앞에 있는 화살표를 클릭하시면
commonjs 방식 과 ESM 방식, AMD
nodejs가 채택하고 있는 방식이 commonjs이다.모듈을 호출하는 방식은 require이다.동기적으로 작동한다.내보내는 방식이 module.exports이다.조금 더 익숙한 import, export방식이다.node 12부터 esm방식을 공식 지원함.비동기적으로
BE_intro_2. Node.js의 기능_10.25
모듈 = LEGO 블록LEGO 블록: 독립적 존재, 사용자의 조립방법과 블록 종류에 따라 여러 결과물될 수 있음모듈: 코드의 조각, 여러 모듈을 모아 하나의 소프트웨어가 됨코드의 모듈화가 중요한 이유? 유지보수가 쉬운 구조 만들기 위해!=비용 감소, 생산성 증대but
FEConf 2022 후기 (feat. 내 import문이 그렇게 이상했나요?)
FEConf 2022를 다녀왔다.https://2022.feconf.kr/티켓팅은 정말.. 아이돌 콘서트를 방불케 할 정도였다.회사 동료들과 네 명이서 도전했는데 두 명만 성공했다..! 그 중 한 명이 나라니 감사합니다 ㅠ\_ㅠ세션도 정말 알차서 고민이 되었지
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파일이 생겨남웹팩과 바벨을 설치해준다 \*웹팩 바벨은 개