스크립트
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다음에 또 뵙겠습니다.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기