2027년에 출시되는 새로운 자바스크립트 기능 4가지

BBetter Stack
컴퓨터/소프트웨어

스크립트

00:00:00자바스크립트를 잘 아신다고 생각한다면, 이 질문들에 답해 보세요.
00:00:02문자열 “0”을 넣고 새로운 날짜를 만들면 어떤 결과가 나올까요?
00:00:07유닉스 에포크 시간일 거라고 생각하셨나요?
00:00:09틀렸습니다. 자바스크립트는 왠지 모르게 문자열 “0”을 서기 2000년으로 보거든요.
00:00:14좋습니다, 그렇다면 숫자 0을 넣으면 어떻게 될까요?
00:00:19적어도 이건 말이 되네요. 1970년 1월 1일이 나오니까요.
00:00:22이를 바탕으로, 이 두 개의 0에 date.parse를 각각 사용해 보면
00:00:25둘이 같지 않다는 걸 아니까 비교했을 때 false가 나와야 정상입니다.
00:00:28하지만 틀렸죠.
00:00:30Date.parse는 문자열에만 작동하므로 숫자 0을 문자열로 강제 변환합니다.
00:00:34그래서 둘 다 다시 2000년이 됩니다.
00:00:36이 퀴즈의 28개 질문 중 겨우 3번인데 벌써부터 짜증이 납니다.
00:00:40다행히도 Temporal이 이걸 해결하려고 나왔습니다.
00:00:42이는 자바스크립트 2027의 확정된 4가지 기능 중 하나일 뿐이며,
00:00:45확정에 가까운 몇 가지 정말 흥미로운 제안들도 포함되어 있습니다.
00:00:48모든 프레임워크의 작동 방식을 바꿀 수 있는 기능까지 말이죠.
00:00:56가장 큰 기능인 Temporal부터 시작하겠습니다.
00:00:57이것은 무려 9년 동안 준비된 새로운 날짜 API입니다.
00:01:01하지만 3월에 드디어 Stage 4에 도달하여 출시 준비를 마쳤습니다.
00:01:04이것이 모든 자바스크립트 개발자를 기쁘게 하는 이유를 모르시겠다면
00:01:07꼭 저 퀴즈를 풀어보시길 권합니다.
00:01:08대부분의 사람들이 Moment, Luxon, Date-fns 같은 라이브러리를 쓰는 건 당연합니다.
00:01:12저도 이전 영상에서 Temporal을 이미 다룬 적이 있으니
00:01:15이런 정보를 계속 받아보시려면 구독해 주세요.
00:01:18Temporal을 한마디로 요약하자면, 모든 작업을 대충 처리하던 지저분한 날짜 객체 하나 대신
00:01:22각각 한 가지 역할을 제대로 수행하는 독립된 타입들을 제공합니다.
00:01:24PlainDate는 시간이나 시간대 걱정 없이 사용할 수 있는 순수한 달력 날짜입니다.
00:01:28PlainTime은 날짜 걱정 없이 사용하는 벽시계 시간입니다.
00:01:31Instant는 시간대나 달력 시스템 없이 유닉스 에포크 이후의 나노초를 나타내는 고유한 시점입니다.
00:01:36시간대나 달력 시스템 없이 말이죠.
00:01:38ZonedDateTime은 실제 시간대의 완전한 날짜이며
00:01:40일광 절약 시간도 이해합니다.
00:01:42그리고 실제 날짜 계산을 지원하는 Duration이 있어서
00:01:44코드베이스 곳곳에 밀리초를 더하거나 무작위 계산을 흩뿌려둘 필요가 없어집니다.
00:01:48이 모든 것들이 함께 작동하는 예시로,
00:01:5010월 24일 일요일 뉴욕 시간으로 밤 8시에 출발하는 뉴욕발 런던행 비행기가 있고
00:01:55비행 시간이 7시간이라고 해봅시다.
00:01:57런던은 5시간 빠르니까, 오후 8시에 7시간 비행하면 뉴욕 시간으로 오전 3시가 되고,
00:02:01그렇다면 런던에 아침 8시에 도착해야 할 것입니다.
00:02:03하지만 여기 Temporal은 오전 7시라고 말하며, 그것이 정답입니다.
00:02:07이 비행기는 실제로 런던에서 시계가 뒤로 조정되는 날밤에 이루어지며
00:02:09Temporal은 그걸 알고 알아서 처리해 줍니다.
00:02:12비행 중에 시간이 바뀐다는 걸 믿지 못하시겠다면
00:02:14짐작할 필요도 없이
00:02:15getTimezoneTransition를 사용하기만 하면 됩니다.
00:02:17변경 시점이 런던 시간으로 새벽 1시였다는 것을 알려주니까요.
00:02:19또 다른 예로, 오전 11시 회의를 하루 뒤로 미루고 싶은데
00:02:23밤사이 시간이 변경되었다고 해서
00:02:24갑자기 회의가 오전 10시로 바뀌기를 원치 않으실 겁니다.
00:02:26Temporal을 쓰면 그럴 일도 없습니다.
00:02:28시간이 아니라 '일(day)' 단위로 작업하고 있음을 알고 있으니까요.
00:02:31Temporal의 또 다른 큰 장점은 모든 것이 이제 불변(immutable)이라는 점입니다.
00:02:34모든 작업이 완전히 새로운 객체를 반환하기 때문에
00:02:36코드 어딘가에서 원본 날짜가 변경되었을까 봐 더 이상 추측할 필요가 없습니다.
00:02:40이 모든 것만으로도 충분히 좋지 않다면,
00:02:41날짜 정렬도 더 쉬워지고,
00:02:43남은 일수를 계산하는 것도 더 쉬워지며,
00:02:45날짜 반올림도 가능하고
00:02:45월(month)도 0부터 시작합니다.
00:02:47정말 획기적인 기능들이죠.
00:02:49기존 자바스크립트 날짜 객체보다 훨씬 뛰어납니다.
00:02:51다행히 이걸 사용해보기 위해 오래 기다릴 필요도 없습니다.
00:02:53파이어폭스, 크롬, 노드js, 데노에는 이미 탑재되어 있고
00:02:56번(Bun)도 곧 지원될 예정이며,
00:02:57사파리만 분발하면 됩니다.
00:02:58두 번째 기능으로 넘어가서,
00:03:00명시적 리소스 관리 기능인
00:03:01using 키워드가 있습니다.
00:03:03이 기능은 5월에 Stage 4가 되었습니다.
00:03:05파일 핸들, 데이터베이스 연결, 스트림처럼
00:03:06정리가 필요한 무언가를 가져올 때마다
00:03:09작업이 끝나면 해제해 주어야 합니다.
00:03:10보통은 사방에 try...finally 블록을 도배해야 했고
00:03:13그러다 깜빡하기 일쑤여서
00:03:14결국 리소스 누수가 발생하곤 했습니다.
00:03:16하지만 이제는
00:03:16using 키워드를 사용하면 변수가 스코프를 벗어날 때,
00:03:19그게 블록의 끝이든, 조기 반환이든,
00:03:20혹은 예외 발생이든 관계없이
00:03:21상관없이 말이죠.
00:03:22자바스크립트가 객체의 Symbol.dispose 메서드를 자동으로 호출해 줍니다.
00:03:25게다가
00:03:26asyncDispose를 이용한 비동기 정리를 지원하는 방식도 있으며,
00:03:29여러 리소스를 조합하기 위한 DisposableStack도 있어서
00:03:32역순으로 안전하게 해제됩니다.
00:03:33이건 try...finally 블록들로 가득한 코드를 정리하는 데
00:03:35정말 유용한 도우미 기능 중 하나입니다.
00:03:38다행히도
00:03:39파이어폭스, 크롬, 노드, 번, 데노에 이미 꽤 오래전에 도입되었기 때문에
00:03:42이미 써보신 분들도 많을 겁니다.
00:03:43다음으로,
00:03:44세 번째 기능은
00:03:44조금 더 마이너한 기능인
00:03:45결합 반복(joint iteration),
00:03:47즉 Iterator.zip입니다.
00:03:48이름, 나이, 도시라는 세 개의 배열이 있고
00:03:50이것들을 하나로 합치고 싶다고 해봅시다.
00:03:51이때 Iterator.zip을 사용하면 됩니다.
00:03:52여러 이터러블을 병렬로 순회할 수 있게 해 주며,
00:03:54각 입력의 다음 값을 담은 배열을 반환해 주거든요.
00:03:56배열 대신 이름이 지정된 객체를 반환하는 zipKey드 기능도 있습니다.
00:04:00정확히 같은 기능을 하는 zip keyed도 있죠.
00:04:02이름이 지정된 객체로 반환해 줍니다.
00:04:03두 기능 모두 입력된 이터러블들의 길이가 다를 때 어떻게 처리할지 설정하는 옵션도 제공합니다.
00:04:07모드를 shortest로 지정하면
00:04:08가장 짧은 이터러블이 끝나는 즉시 멈추게 됩니다.
00:04:11이것이 기본값입니다.
00:04:12longest는 가장 긴 이터러블이 끝날 때까지 계속 진행하고,
00:04:15strict는 입력된 이터러블들의 길이가 다르면 타입 에러를 발생시킵니다.
00:04:17또한 longest 모드에서는
00:04:18항목이 누락되었을 때 채워 넣을 패딩 값을 지정할 수도 있습니다.
00:04:21이 기능들은 최근 몇 년간 이터레이터에 대해 진행되어 온 작업의 연장선처럼 느껴집니다.
00:04:26ES 2025에서는 map, filter, take, drop 같은 헬퍼들을 제공했고
00:04:29현재 iterator chunking, iterator includes, iterator join 같은 Stage 3 제안들이 있습니다.
00:04:32iterator includes, iterator join 같은 기능들이죠.
00:04:34결국 Lodash의 필요성을 없애주는 기능들이 점점 더 많이 추가되는 셈입니다.
00:04:37현재는 파이어폭스에서만 zip을 실제로 사용할 수 있지만
00:04:39다른 브라우저들도 곧 따라오기를 바랍니다.
00:04:40네 번째 확정 기능으로 넘어가겠습니다.
00:04:42이것은 꽤 로우레벨의 기능인데요,
00:04:43Atomics.pause입니다.
00:04:45공유 배열 버퍼(SharedArrayBuffer)를 사용하는 멀티스레드 코드를 작성하는 게 아니라면
00:04:47접할 일이 거의 없을 테니
00:04:49이건 빠르게 넘어가겠습니다.
00:04:50스레드나 워커 간에 공유할 수 있는 4바이트의 메모리를 생성한 다음
00:04:53그 바이트들을 단일 정수 락으로 사용한다고 해봅시다.
00:04:56그 후 while 루프 안에서 Atomics.compareExchange를 사용하여
00:04:58이 값이 잠금 해제 상태라면 잠그고,
00:05:01값이 잠겨 있다면
00:05:02다른 누군가가 사용 중이므로 계속 루프를 돌며
00:05:04그들이 끝날 때까지 기다리는 식입니다.
00:05:06이를 스피닝(spinning) 또는 바쁜 대기(busy-waiting)라고 부르는데,
00:05:08문제는 이런 꽉 찬 루프가 CPU를 혹사시킬 수 있다는 점입니다.
00:05:11그래서 Atomics.pause를 사용하여 런타임이나 CPU에게
00:05:14의도적으로 스핀 중이며
00:05:16무언가가 바뀌기를 기다리고 있다고 알려주면
00:05:17CPU가 이 스핀 루프를 훨씬 더 효율적으로 처리할 수 있게 됩니다.
00:05:20보시다시피 매우 로우레벨의 기능이므로
00:05:22주로 라이브러리 제작자나 성능에 민감한 코드에서 사용하며
00:05:25대부분의 브라우저에서 지원됩니다.
00:05:27Bun, 데노,
00:05:28그리고 MDN에서는 안 된다고 했지만
00:05:29노드에서도 제 경우에는 정상 작동했습니다.
00:05:30이렇게 하여 확정된 4가지 기능은
00:05:32모두 Stage 4이며 ES 2027에 포함될 것으로 예상됩니다.
00:05:36하지만 이제 스테이지 3에 대해 이야기해 보겠습니다.
00:05:37이 중 일부는 지금도 사용할 수 있기 때문이죠.
00:05:39첫째로, import defer가 있습니다.
00:05:40import에 이 기능을 사용하면,
00:05:41모듈이 로드되기는 하지만
00:05:42실제로 코드가 실행되는 것은 처음 사용할 때까지 지연됩니다.
00:05:46즉, 지연 실행을 얻게 되는 것이죠.
00:05:47이것은 동적 import가 제공하는 기능과는 다릅니다.
00:05:49동적 import는 지연 로딩을 제공하므로,
00:05:51모듈 다운로드는 기다려 주지만,
00:05:52일단 가져온 후 최상위 수준의 코드가 실행되는 것을 막지는 못합니다.
00:05:55이 기능은 의존성 그래프가 매우 큰 앱의
00:05:57시작 시간을 단축하는 데 도움이 될 것입니다.
00:05:59둘째로, promise.all keyed가 있습니다.
00:06:01promise.all이 위치를 기준으로 구조 분해하는
00:06:03배열을 넘겨주는 대신,
00:06:04객체를 전달하고 이름이 지정된 결과를 받아올 수 있습니다.
00:06:06이 기능은 비교적 작은 기능이지만,
00:06:08발표되었을 때 많은 사람들을 매우 기쁘게 만들었습니다.
00:06:11다음은 데코레이터입니다.
00:06:12이 기능은 2022년부터 스테이지 3에 머물러 있었지만,
00:06:14Bun은 2월에 표준 데코레이터를 탑재했으며,
00:06:16과연 언제쯤 스테이지 4에 도달할지 궁금해집니다.
00:06:19마지막으로, 정말 흥미롭다고 생각되는 제안이 하나 있습니다.
00:06:21다만 아직 스테이지 1이므로,
00:06:22등장하는 데 다소 시간이 걸릴 수 있습니다.
00:06:24바로 시그널입니다.
00:06:25이 기능은 자바스크립트에 내장 반응형 상태 프리미티브를 추가하여
00:06:27쓰기 가능한 값과,
00:06:29연산된 값,
00:06:29그리고 자동 의존성 추적을 제공합니다.
00:06:31목표는 Angular, Vue, Svelte, Solid 같은 프레임워크에
00:06:33Vue, Svelte, Solid
00:06:33해당 반응성에 대한 공통의 저수준 기반을 제공하는 것입니다.
00:06:36따라서 각자의 독립적인 구현을 사용하는 대신
00:06:38모두 표준화된 코어를 함께 사용할 수 있게 됩니다.
00:06:40이렇습니다.
00:06:41이것이 바로 TC39가 ES2027에서 우리에게 제공할 것으로 기대되는 내용입니다.
00:06:44여러분이 가장 좋아하는 기능은 무엇이며,
00:06:45이미 사용해 보셨나요?
00:06:47아래 댓글로 알려주세요.
00:06:48김에 구독도 해주시고,
00:06:49늘 그렇듯 다음 영상에서 뵙겠습니다.
00:06:50다음에 또 뵙겠습니다.

핵심 요약

자바스크립트 2027은 Stage 4에 도달한 Temporal과 using 키워드를 비롯해 개발 편의성과 성능을 높이는 4가지 확정 기능을 제공한다.

하이라이트

  • Temporal은 9년의 준비 기간을 거쳐 Stage 4에 도달한 새로운 날짜 및 시간 API이다.

  • using 키워드는 변수가 스코프를 벗어날 때 Symbol.dispose 메서드를 자동으로 호출하여 리소스 누수를 방지한다.

  • Iterator.zip은 여러 이터러블을 병렬로 순회하며shortest, longest, strict 모드를 제공한다.

  • Atomics.pause는 스피닝 루프 중인 CPU나 런타임에 대기 상태임을 알려 성능을 최적화한다.

  • import defer는 모듈 로드는 수행하되 최상위 수준 코드 실행을 첫 사용 시까지 지연시킨다.

타임라인

새로운 날짜 API Temporal

  • Temporal은 기존 Date 객체의 결함을 해결하기 위해 9년 만에 Stage 4에 도달했다.
  • PlainDate, PlainTime, Instant, ZonedDateTime 등 독립된 타입을 제공한다.
  • 모든 작업이 불변 객체를 반환하며 일광 절약 시간 전환을 자동으로 처리한다.

기존 자바스크립트 날짜 객체는 문자열과 숫자를 혼용할 때 예기치 않은 동작을 유발한다. Temporal은 시간대나 달력 시스템별로 세분화된 객체를 제공하여 비행 시간 계산이나 날짜 연산을 안전하게 처리한다. 파이어폭스, 크롬, 노드js, 데노 등에 이미 탑재되어 있다.

명시적 리소스 관리 using 키워드

  • using 키워드는 5월에 Stage 4에 도달한 리소스 자동 정리 기능이다.
  • 변수가 스코프를 벗어날 때 Symbol.dispose를 자동으로 호출한다.
  • DisposableStack을 통해 여러 리소스를 역순으로 안전하게 해제한다.

파일 핸들어나 데이터베이스 연결 같은 리소스는 작업 후 반드시 해제해야 하므로 기존에는 try...finally 블록을 반복해서 사용해야 했다. using 키워드는 블록 종료, 조기 반환, 예외 발생 시 모두 자동으로 리소스를 정리하여 누수를 방지한다.

결합 반복 Iterator.zip

  • Iterator.zip은 여러 이터러블을 병렬로 순회하여 값들의 배열을 반환한다.
  • shortest, longest, strict 모드로 이터러블 길이가 다를 때의 동작을 제어한다.
  • zipKey는 배열 대신 이름이 지정된 객체를 반환한다.

여러 배열을 동시에 순회하고 결합하는 작업을 표준 방식으로 지원한다. 가장 짧은 이터러블 기준으로 멈추거나 가장 긴 쪽까지 패딩과 함께 진행할 수 있으며, Lodash 라이브러리의 필요성을 점진적으로 대체한다.

로우레벨 성능 최적화 Atomics.pause

  • Atomics.pause는 멀티스레드 환경의 바쁜 대기 루프를 위한 로우레벨 기능이다.
  • CPU에 스핀 중임을 알려 루프 처리를 효율적으로 만든다.

공유 메모리를 사용하는 멀티스레드 코드에서 while 루프를 통한 바쁜 대기는 CPU를 과도하게 사용한다. Atomics.pause를 통해 런타임과 CPU가 대기 상태를 인식하고 자원을 효율적으로 소모하도록 제어할 수 있다.

Stage 3 주요 제안들

  • import defer는 모듈 다운로드는 유지하되 첫 사용 시점까지 코드 실행을 지연시킨다.
  • promise.all keyed는 객체를 전달받아 이름이 지정된 결과를 구조 분해 없이 받아온다.
  • 시그널 제안은 자바스크립트 표준 반응형 상태 프리미티브를 목표로 한다.

아직 Stage 3에 머물러 있거나 초기 단계인 제안들은 앱 시작 시간 단축과 프레임워크 간 공통 반응형 코어 제공을 목표로 한다. 대규모 애플리케이션의 성능과 개발자 경험을 향상시킬 가능성을 품고 있다.

커뮤니티 글

아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!

이 영상에 대해 글쓰기