FEConf 2022에 다녀왔다.
티켓팅은 정말.. 아이돌 콘서트를 방불케 할 정도였다.
회사 동료들과 네 명이서 도전했는데 두 명만 성공했다..! 그 중 한 명이 나라니 감사합니다 ㅠ_ㅠ
 |
 |
세션도 정말 알차서 고민이 되었지만, 유투브에 녹화 영상을 모두 올려주어서 놓쳤던 세션도 나중에 볼 수 있었다.
 |
 |
 |
 |
롯데타워 스카이31의 두 컨퍼런스 룸에서 진행되었다.
수용 인원이 많지 않다보니 티켓팅이 빡셀 수 밖에 없었을 것 같다.
 |
 |
 |
그리고 많은 후원사들에서 부스를 설치해 채용 홍보를 진행했다.
토스, 뱅크샐러드, 에이블리, 야놀자, 패스트캠퍼스, 오늘의집 등등 설문에 참여하면 선물도 많이 줘서 돌아갈 때 진짜 양손 무겁게 돌아갔다 ㅋㅋㅋ
패캠 경품 뽑기 1등 상품이 키크론 K3였는데 내가 그걸 뽑아버렸다. 이런 대박사건이....!
너무 기뻐서 소리질렀다 ㅋㅋㅋㅋ 패캠 사랑해요~
정말 역대급 굿즈 양인 것 같다 ㅎㅎ
몇 년 뒤에 이 중 어느 회사로 이직을 하게 될지도..? ㅎ
내 import문이 그렇게 이상했나요?
개인적으로 가장 인상 깊고 재미있게 들었던 세션 하나에 대해서만 기록을 남겨보려고 한다.
토스의 박서진님께서 발표해주신 내 import문이 그렇게 이상했나요? 세션을 정말 재밌게 들었다.
학원계에 진출하셔도 될 정도로 설명을 잘 하시더라... wow
다음은 박서진님의 발표를 나름대로 요약해 본 것이다.
CommonJS의 모듈 시스템
CommonJS의 require 덕분에 파일 단위의 개발, 손쉬운 라이브러리의 재사용 등이 가능해졌다.
타입스크립트나 바벨을 사용하는 경우에 실제로 import문은 CommonJS의 require 함수로 변환된다고 한다.
하지만...
CommonJS 모듈 시스템에는 몇 가지 문제가 있다.
일단, CommonJS는 언어 표준이 아니기 때문에 지원되지 않는 환경에서는 사용이 불가하다! (ex. deno)
그리고 중요한 것은 require는 함수이다. 함수 함수 함수...!
다시 말해, 다음과 같은 형태로 사용이 가능하다.
조건적으로 require를 사용할 수도 있고, 심지어 require 함수 자체를 재정의 할 수도 있다. (jest에서는 mock 함수를 위해 이 점을 활용한다)
이는 require 함수에 대한 추적을 어렵게 만든다.
CommonJS는 기본적으로 동기적으로 동작하고 있기 때문에 비동기 모듈 정의가 어렵다.
JS의 가장 큰 장점이 비동기 프로그래밍과의 궁합이 별로라고 볼 수 있다.
또한 nodeJS의 창시자 Ryan Dahl은 "나는 Node.js require()에서 확장자를 명시하지 않아도 되도록 한 결정을 후회한다." 라고 했다.
require에서는 실제로 확장자를 명시하지 않아도 파일 시스템을 순회하며 알아서 적절한 파일을 찾는다.
이는 번들링 속도가 늦어지고 빌드 성능에 안좋은 영향을 미친다.
ECMAScript Modules (ESM)
결론부터 말하자면 ESM 표준 import를 사용할 수 있으면 사용해야 한다!
"사용할 수 있으면" 이라고 한 이유는 아직 사용하기 어려운 환경도 많기 때문이다. 이에 대해서도 뒤에 언급될 예정이다.
ESM은 언어 표준이기 때문에 nodeJS 외에 deno, 브라우저 환경에서도 사용이 가능하다.
require와 큰 차이점은 ESM의 import는 키워드라는 점이다.
즉, 함수가 아니라 if문 for문과 같은 키워드이기 때문에 조건적으로 사용한다든가, 재정의 한다든가 하는 것이 불가하다.
따라서 쉬운 정적 분석이 가능하다.
최근에 도입된 Top-level await을 사용하면 비동기적으로 모듈을 사용할 수 있다.
ESM은 CommonJS와 달리 기본적으로 비동기적으로 동작하기 때문에 가능한 일이다.
우리를 괴롭혔던 Error들
개발을 하다보면 Error require of xxx module... 과 같은 에러를 본 적이 있을 것이다.
우리가 알고있듯이 비동기 함수에서 동기 함수를 호출하는 것은 전혀 문제가 없지만,
동기 함수에서 비동기 함수를 호출하는 것은 그렇지 않다.
CommonJS는 동기적으로 동작하고 ESM은 비동기적으로 동작한다.
만약 ESM 프로젝트에서 CommonJS 모듈을 import 하면 어떻게 될까?
만약 CommonJS 프로젝트에서 ESM 모듈을 require 하면 어떻게 될까?
그렇다! 전자는 괜찮지만 후자는 에러가 발생한다.
ESM으로 가는 길
현재 프로젝트에서 jest, TSnode, Yarn PnP를 사용하고 있다면 ESM으로의 전환이 어려울 수 있다.
위 라이브러리들의 공통점이 무엇이길래?!
jest, TSnode, Yarn의 Plug'n'Play는 require의 동작을 바꾸는 라이브러리이다.
또한 이 라이브러리들은 CommonJS 모듈 환경에 의존한다.
따라서 현 시점에서는 위 라이브러리들을 사용하고 있다면 ESM으로 옮기는 것이 어렵다.
하지만 개발 시장의 흐름이 ESM으로 흐르고 있기 때문에 내년 정도면 ESM으로 가는 길이 매우 쉬워지지 않을까 싶다!
