2022년 B4 감상문

B4 내 import 문이 그렇게 이상했나요?

팀 : toss

발표자님 : 박서진

 

발표의 전체적인 내용

개발을 하면서 ‘더 좋은 코드 작성법이 없을까?’, ‘더 나은 라이브러리 사용법은 없을까?’ 것은 의심을 해본적은 있지만, ‘내가 import문을 제대로 사용하고 있나?’에 대한 질문을 해본적은 없는 것 같습니다.

그렇기에 무엇을 설명하는 발표인지 궁금했고, 들어본 결과 약간의 충격?도 받은 것 같습니다.

 

한 번쯤은 마주쳤던 오류들

개발을 하면서 한 번쯤은 봤을 법한 ERR_REQUIRE_ESM이나 Unexpected token import와 같은 오류들의 근본적인 원인에 대해 알 수 있었습니다. 지금까지 우리가 외부 패키지나 다른 js파일의 모듈을 가져올 때 사용했던 import를 잘 못 사용했기 때문입니다.

 

잘못된 import문의 원인

import문에 대한 잘못된 사용법은 CommonJS와 ECMAScript modules와 관련되어 있습니다. CommonJS에서 가지고 있는 문제

점들과 CJS와 ESM의 호환성 문제 때문에도 문제가 생기고 있습니다.

위와 같은 문제점을 해결하기 위해서는 완벽한 ESM 방식을 채택하는 것이 좋지,,,만! 아직까지는 모든 패키지를 완벽하게 CJS를 ESM으로 마이그레이션하는 방법은 존재하지 않다고 합니다.

 

위 발표에서 현재 마이그레이션이 가능한 패키지의 내용들도 알려주고 있는데, 해당 내용에 포함되는 CJS패키지는 ESM으로 마이그레이션 해보는 것도 좋을 것 같습니다. 가능하지 않은 패키지나, 아직 이슈가 있는 것들에 대해서도 알려주므로 발표를 한 번 유심히 들어보는 것도 좋을 것 같습니다.

 

마지막으로

끝으로 발표를 들으면서 느낀점은 현재 내가 사용하고 있는 import문은 완벽하지 않았다는 것과, 여러 라이브러리들이 의존하고 있는 모듈 시스템이 무엇인지 그리고 그것에 따른 현재의 이슈들은 무엇이 있는지 알아볼 수 있는 좋은 기회였습니다.

알게 된 점

• CommonJS
  • require함수는 말 그대로 함수이기 때문에 안에 조건문과 같은 형식이 들어갈 수 있으므로 컴파일단계에서 어떤 모듈을 require할 지 알 수 없다. → 정적 분석이 어렵다.
  • 비동기 모듈을 정의하기 어렵다.
  • require함수를 재정의할 수 있다. require가 monkey fetching되어 이상하게 동작할 수 있다.(jest,yarn Pnp 등이 require를 재정의하고 있다.)
• ECMAScript Modules
  • 조건적으로 모듈을 import할 수 없기 때문에 정적 분석이 가능하다.
    • 자바스크립트 파일의 크기를 줄이는 것이 좋은 환경에서 사용하면 좋다.
  • import export가 키워드이기 때문에 함부로 재정의할 수 없다.
  • 비동기 모듈 정의가 쉽다. (Top-level await)
  • ESM은 언어 표준이다. ← js언어의 일부분으로 node.js 뿐만이 아니라 브라우저, Deno와 같은 다양한 런타임에서 사용할 수 있다.
• ESM방식으로 CJS 모듈은 import 가능하다.(비동기에서는 동기를 호출할 수 있다.)
• CJS방식으로 ESM 모듈은 require 불가능하다.(동기에서는 비동기를 호출할 수 없다.)
• ESM으로 만드는 방법 package.json에 type: “module”을 작성하면 된다.
• CommonJS패키지 안에서는 CommonJS방식을 채택하고 ESM패키지 안에서는 ESM 방식을 채택한다.
  • 항상 CommonJS 방식을 사용하고 싶을 때는 .cjs 확장자를 항상 ESM 방식을 사용하고 싶을 때는 .mjs 확장자를 사용하면 된다.
• import문의 정확한 표기 방법은 파일확장자까지 명시하는 것이다.

const { Component } = require('./MyComponent');

 

• Node.js에서 require를 사용할 때 파일 확장자를 넣어주지 않으면 알아서 찾아주기 위해 파일시스템을 계속 돌아다니게 된다.위의 MyComponent 파일을 알아서 찾아주기 위해 찾는 파일들
  • ./MyComponent
  • ./MyComponent.js
  • ./MyComponent.node
  • ./Mycomponent/index.js
  • …
• 위의 파일들을 찾는 순회 동작을 하게 된다.
• →웹팩의 번들링 속도가 늦어지고 node.js의 성능이 나빠지는 대표적인 원인이 된다.