FEConf 2022 후기
나는 평소 다른 개발자들의 이야기와, 다른 개발자들은 어떻게 사고하는지, 특정 기술에 어떻게 접근하는지 등을 가까이서 듣고 싶었다.
그렇기에 커뮤니티에 참여하는 것과 컨퍼런스에 참여하는 것에 관심이 많다.
마침, 프론트엔드 분야의 큰 컨퍼런스인 FEConf 2022 (opens in a new tab)가 3년만에 오프라인으로 열린다고 했지만, 티켓팅에 실패했다.(10분도 안 돼서 매진됐다는...)
하지만 감사하게도 오거나이저인 지인의 초대를 받아 운 좋게 참석할 수 있게 되었다.
이번 FEConf 2022는 잠실 롯데 스카이 타워 31층에서 진행됐다. 오늘의집, 토스, 패스트캠퍼스 등의 기업들이 스폰서로 참여했다.
이번 FEConf 2022의 세션은 A Track과 B Track 2개로 나누어져 있어 세션 시간 별로 관심 있는 Track에 가서 해당 세션에 참여할 수 있었는데, 나는 B Track에 관심이 가서 B Track 세션에 풀참하게 되었다.
(진행된 세션은 아래 사진 참고)
내가 들었던 B 세션들은 모두 의미 있고, 좋은 발표들이었지만 가장 기억에 남는 건 박서진님의 "내 import 문이 그렇게 이상했나요?" 세션이다.
해당 세션에서는 CommonJS Module System과 ECMAScript Modules(ESM)에 대한 이야기를 다루었는데, 약간 충격적?이었던 건 기존에 내가 일반적으로 개발하면서 사용한 import 문이 사실은 CommonJS Module System을 사용한다는 이야기였다.
import React from 'react';
가 사실은
const React = require('react');
였던 것인데,
import
문을 사용하고 있는 것처럼 보이지만 트랜스파일되면 실제로는 require()
문을 사용한다는 사실이 "내가 지금까지 속으면서 개발한 것 같다" 는 생각이 들었다.
관련해서 더 나아가 CommonJS Module System의 문제점을 알게 되었다.
- 언어의 표준이 아니기 때문에 CommonJS를 지원하는 런타임에서만 한정적으로 사용할 수 있다.
- 정적 분석의 어려움이 존재한다.
- require의 대상이 삼항연산자를 쓰면서 가져오는 모듈의 대상이 변하는 등의 동작이 가능해진다.
const package = requrie(condition ? 'A' : 'B');
처럼. - 이렇게 특정 조건에 따라 가져오는 모듈의 대상이 달라지게 되면, 어떤 모듈 및 코드를 참조하게 되는지 컴파일 타임에 분석하는 것이 어려워진다.
- 비동기 모듈 정의가 불가능하다.
- 기본적으로 CommonJS Module System은 동기적으로 동작하기 때문에 비동기 모듈의 정의가 불가능하다.
- requrie 함수를 재정의할 수 있다.
- require 문은 함수이기 때문에 이 코드처럼 마음대로 동작을 바꿀 수 있다.
global.requrie = () => { ... }
- 그렇기 때문에 require 함수가 몽키패칭되어 이상하게 동작하는 현상이 발생할 수 있다.
반면, ESM의 경우
- 정적 분석이 쉽다.
- 조건적으로 모듈을 가져올 수 없다.
- 어떤 모듈을 참조하는지 파악하기 쉽다.
import
,export
문은 키워드이기 때문에 재정의가 불가능하다.- 비동기 모듈 정의가 쉽다. (Top-Level await)
- 기본적으로 비동기적으로 동작하기 때문에 모듈에 await 키워드를 사용할 수 있다.
- 언어 표준이다.
- Node.js 뿐만 아니라 브라우저, Deno 등 다양한 런타임에서도 쉽게 사용할 수 있다.
등의 장점들이 있다는 것을 알게 되었다.
자세한 내용은 FEConf 2022 Youtube B Track 전체 영상 (opens in a new tab)을 보면 알 수 있는데, 아직 세션 별로 영상이 올라와 있지 않아서 B Track 영상 전체를 첨부한다.
영상 설명에 표시된 시간은 현장에서 진행한 세션 시간이라서 관련 내용을 보고 싶다면 3:22:35
부터 보면 된다.
처음으로 큰 행사에 오프라인으로 참여를 해서 스티커, 티셔츠 등등의 굿즈도 많이 받고 좋은 세션들도 들어 의미 있는 지식도 늘어난 것 같아 좋았고, 재밌었다.
2023 © nimuseel