JavaScript
9개의 글
9개의 글
지난 8월 24일 TypeScript 5.2가 출시했습니다. 주요 변경사항은 using 키워드 지원, 데코레이터에 메타데이터 추가, 배열 복사 메서드 추가 등이 있습니다. using 키워드 추가 지난 게시글에서 소개한 자원 관리를 위한 키워드 using 이 추가되었습니다. let, const 대신 사용하는 변수 선언 키워드로, Symbol.dispose, Symbol.asyncDispose 로 된 속성 값이 있는 객체를 대상으로 사용할 수 있습니다. tc39에 제안된 내용이며, 다음 ECMAScript에서 볼 수도 있는 Stage 3 후보 상태입니다. 물론 후보 상태이므로, tsconfig.json 에서 compilerOptions.lib 배열에 esnext 혹은 esnext.disposable 을 추가해야지만 사용가능합니다. 데코레이터에 메타데이터 추가 지난 5.0에서 tc39 제안 내용에 맞춰 데코레이터가 새롭게 만들어 졌습니다. 이에 대한 후속 제안으로 메타데이터가 추가되었습니다. 데코레이터의 두번째 파라미터인 context 에서 metadata 라는 빈 객체가 할당되어 있으며, 이는 자유롭게 속성에 할당이 가능하고, 외부에서의 접근은 Symbol.metadata 를 통해 하실 수 있습니다. 데코레이터 메타데이터 예제 익명, 이름을 가진 튜플 혼합 지원
2023-08-28#개발#JavaScript#TypeScript
자바스크립트는 객체지향 프로그래밍과 함수형 프로그래밍을 지원하는 멀티 패러다임 언어입니다. 이로 인해 prototype, class를 통한 객체지향의 코드가 만들어지기도 하며, encodeURIComponent, Math.max 같이 함수형 프로그래밍의 코드가 만들어지기도 합니다. 이 두가지 모두 현재까지 사용되는 패러다임이며, 실제로 두가지를 혼용해가며 사용할 때도 있습니다. 그렇기 때문에 코드를 보다보면 어떤게 함수형이고, 어떤게 객체지향인지 혼동될 때도 있으니 이 두가지를 잘 알아두어야 합니다. 이번 글에서는 많이 알려진 객체지향 보다는 다소 생소한 함수형 프로그래밍을 정리해보려합니다. 함수형 프로그래밍 함수형 프로그래밍은 선언형 프로그래밍의 한 갈래입니다. 따라서 상태를 바꾸는 형태인 명령형과는 다르게 식과 선언으로 이루어진 선언형의 특징을 띄고 있습니다. 그리고 함수형은 다음과 같은 특징이 더 있습니다. 함수를 변수 처럼 다룰 수 있도록 1급 객체로 취급해야한다. 함수는 순수 함수가 되어야 한다. 대입을 하지 않는다. (불변의 값을 사용한다) 이러한 특징들을 지키며 만들다 보면, 변수를 쉽게 예측할 수 있고, 함수의 이름으로만 그 기능을 확실히 알 수 있다는 장점이 있어요. 그럼에 따라 함수를 읽을 때 좀더 빠르게 이해할 수 있는 쉬운 코드 모양이 나타나게 되는거죠. 함수는 1급 객체 (First-class citizens) 1급 객체(First-class citizens)라는 말을 처음 들어 보실 겁니다. 변수에 저장하고, 함수의 매개 변수나 반환 값으로서 사용할 수 있는 Entity를 이야기 합니다. 어려운 말일지 모르겠지만, 여러분이 자주 사용하던 Array.prototype.map, Array.prototype.sort처럼 매개 변수로 함수를 받고, React의 useCallback 처럼 함수를 반환하고, 변수에 저장하는 것을 의미합니다.
2023-08-28#개발#JavaScript
Javascript는 일급 함수, 프로토타입 기반 언어입니다. 이 때문에 this 키워드는 함수 실행 상황에 따라 바뀌게 됩니다. 전역 문맥과 함수 문맥으로 크게 나뉘고, 함수, 객체 메서드, 화살표 함수, 엄격모드 모두 다르게 작동 되므로, 이 모든 내용은 알아 두셔야합니다. 전역 문맥 전역 문맥의 this는 실행환경 별로 다르게 작동합니다. 브라우저에서는 전역 객체인 window를, Node.js와 Bun은 빈 객체 {}를, Deno는 undefined 로 할당되어 있습니다. 각기 다른 글로벌 객체를 다루기 위해 ES2020에서는 globalThis 라는 키워드가 추가되어있습니다. 런타임의 글로벌 객체는 Deno, global 등 다양하기 때문에 때문에 브라우저에서 전역 문맥의 this 가 globalThis 와 같다 할 수 있지만, 런타임 계열(Node.js, Bun)에서는 그렇지 않다는걸 유의하셔야 합니다. 전역 문맥의 this 함수 문맥 일반 함수 기본 함수의 this는 전역 문맥과 동일하게 동작합니다. 일반 함수 예제 문맥을 다른 문맥으로 넘기려면 Function.prototype.call, Function.prototype.apply 메서드를 사용하시면 됩니다. 매개변수 전달 방식의 차이만 있을 뿐 두개의 사용법과 기능은 거의 동일합니다.
2023-07-25#개발#JavaScript
타입스크립트는 현재 5.1 입니다. 그리고 준비중인 다음 버전인 5.2에서 using 이라는 새로운 키워드가 지원될 예정입니다. 이 키워드는 tc39에 제안된 내용이고, 현재 Stage 3 단계로 다음 ECMAScript에서도 볼 수 있는 후보 상태입니다. 새로운 키워드는 기존 let, const 변수 선언 키워드에 기능이 추가된 형태이며, 이 키워드를 이용해 선언한 변수는 블록 스코프를 벗어날 때 자동으로 자원을 해제해 주는 새로운 기능입니다. 일반적인 자원 해제 코드 패턴 위 예제처럼 스트림, 버퍼 등 다양한 자원의 수명관리와 관련된 소프트웨어 개발 패턴이 존재하고, 다음과 같이 각 상황에 맞게 자원을 해제하는 메서드 호출이 필요합니다. ECMAScript의 Iterator: iterator.return() WHATWG의 Stream Reader: reader.releaseLock() NodeJS의 파일 핸들러: handle.close() Emscripten C++의 객체 핸들: Module.\_free(ptr), obj.delete(), Module.destroy(obj) 또한 throw 를 대응하기 위해 try { ... } finally { ...release }로 오류를 검사하는 것이 일반적입니다. 이는 코드가 길어지고, 반복적인 패턴이고, 개발자가 자원을 해제하지 못할 경우 메모리 누수로도 이어지는 좋지 않은 패턴이기도 합니다. 여러개의 자원을 다루는 코드
2023-06-30#개발#JavaScript#TypeScript#ECMAScript
지난 5월 30일 TypeScript 5.1이 출시했습니다. 주요 변경사항은 Node.js 최소 지원 버전, JSX 타입 작동 변경, Getter, Setter 타입 불일치 허용, undefined 를 함수 리턴 타입으로 허용 등이 있습니다. 최소 지원 버전 변경 ES2020 스펙으로 업데이트됨에 따라, Node.js의 최소 지원 버전 또한 14.17로 올라가게 되었습니다. 구 버전에서 TypeScript 5.1을 사용할 시 npm, yarn에서는 엔진 버전 경고, tsserver에서는 nullish 키워드(??) 미지원 오류 등이 발생하게 됩니다. npm 설치시 미지원 엔진 경고 함수 리턴 타입에 undefined 지원 사실 이 말만 봤을 때는 무슨 말이냐 하겠지만, 사실 지금까지의 TypeScript의 함수는 undefined만 리턴하게 될 때 void 혹은 any 라는 타입만 가능했습니다. 이제 함수의 리턴타입이 undefined 로 지정이 가능합니다. 함수 리턴타입 undefined 지원 Getter와 Setter의 타입이 달라도 됩니다 Getter와 Setter는 속성 접근에 매우 유용한 기능중 하나입니다. 5.1 이전 까지의 Getter와 Setter는 같은 타입을 강제로 했으나, 이제부터는 다른 타입이 허용됩니다. 이는 지금까지 문제되었던 DOM의 style 이라는 속성의 쓰기 타입을 해결하게 되었습니다.
2023-06-02#개발#JavaScript#TypeScript
작년 22년 6월에 Node.js 블로그에 한 글이 올라왔습니다. 바로 Node.js 16의 지원 종료일을 24년 4월이 아닌 23년 9월로 무려 7개월을 앞당긴다는 내용입니다. (현재 시점으로는 3개월 남았습니다.) 이 내용에 따르면 OpenSSL 1.1.1의 지원이 9월 11일에 종료가 되면서 해당 버전을 사용하고 있는 16 LTS 버전 또한 같은 날을 기점으로 지원을 종료한다고 발표했습니다. OpenSSL 3.0은 21년에 출시가 되었는데 16에 적용을 못한 이유는 16의 공개 시기와 맞물리면서 업그레이드를 못한채 배포되었다고 합니다. 이 때문에 다음 버전인 17에서 OpenSSL 3.0을 적용했다는 기록이 있습니다. OpenSSL OpenSSL은 TLS와 SSL을 구현한 라이브러리입니다. 두 프로토콜은 https를 사용할때 사용되는 보안 레이어로써, 보안 기능을 담당하는 중요한 역할입니다. https 통신을 살펴보면 다음과 같습니다. https\:// 주소를 사용해 웹 사이트 방문 브라우저가 서버에 SSL 인증서를 요청 서버는 퍼블릭 키가 포함된 SSL 인증서 전송 브라우저가 받아온 인증서를 CA(Certificate Authority)를 통해 신뢰성 검사 브라우저가 비밀 세션 키를 포함한 메시지를 퍼블릭 키를 이용해 암호화하여 전송
2023-06-02#개발#JavaScript#Node.js
올해 확정된 ECMA 2023은 총 4가지 제안이 수락되어 적용되었고, 배열에 대한 제안 2가지, 해시뱅, WeakMap 으로 프론트엔드 개발자가 알아두면 좋은 제안은 총 3가지 입니다. 전체 내용을 정리하면서 어떤 기능들이 추가됐는지 확인해봅시다. 마지막 기준 배열 찾기 배열과 형식화 배열(Typed Array)에 새로운 찾기 메서드가 추가되었습니다. Array.prototype.findLast, Array.prototype.findLastIndex 두가지로, 배열의 마지막부터 시작해 찾게되는 메서드입니다. 기존에 있던 find, findIndex 메서드는 모두 함수를 받고 있어 이 스펙을 직접 구현하는건 가능했지만, 함수의 명확한 명명 및 사용을 위해 이같은 제안이 생겼다고 합니다. Array.prototype.findLastIndex 예제 Array.prototype.findLast 예제 복사하여 배열 변경 기존 JS에는 배열에 대한 다양한 메서드가 존재합니다. sort, map, concat, splice 등 사용되는 메서드가 많은데 이들에겐 문제점이 존재합니다. 각 메서드는 리턴되는 값이 다르고, 원본 배열을 수정하는 메서드도 존재합니다. 이는 불규칙적이며, 혼란을 야기하기도 합니다. 원본 배열을 수정하는 메서드들을 수정하지 않고, 새로운 배열을 이용해 메서드를 사용할 수 있도록 새로운 매서드가 추가되었습니다. Array.prototype.toReversed 이 메서드는 기존에 있던 Array.prototype.reverse 라는 메서드의 복사 메서드입니다. 사용 방법을 기존과 동일합니다.
2023-05-30#개발#JavaScript#ECMAScript
TypeScript가 5.0으로 큰 변화를 맞이 했습니다. 이번 주요 변경사항은 Decorator, 파라미터 const 타입, Enum을 Union 타입과 호환 등 여러가지 큰 변화를 맞이 했는데 주요 변경점을 살펴보겠습니다. Decorator Nest.js를 사용하신 분이라면 아주 익숙한 문법이 보일겁니다. 바로 Decorator 기능인데요, 해당 기능은 지금까지 실험적(experimental) 기능이었습니다. 이번 5.0으로 올라오면서 실험적 기능이 해제되었고, 구현 방법 자체가 변경되었습니다. 이에 따라 기존 실험적 기능으로 구현된 Decorator는 호환이 불가능해졌습니다. 다행히도 기존 실험적 기능은 여전히 사용가능하도록 조치를 취해줬다고합니다. (Nest.js 팀은 현재 모든 Decorator를 재작성중이며, 당분간은 실험적 기능 옵션 —experimentalDecorators 를 켜서 사용할 것을 권고한 상태입니다.) 이번 변경된 구현법은 TC39에서 제안된 내용으로 변경되었고, 해당 제안은 스테이지 3에 해당하고 있어 추가적으로 큰 변경 사항 없이 적용될 가능성이 큽니다. 이 때문에 Microsoft는 TypeScript 5.0으로 올리면서 해당 내용을 공식 기능으로 변경된것으로 보입니다. 공식 지원으로 확인된 Decorator의 사용처는 class method getter setter field accessor 으로 총 6개입니다. 이 외의 실험적 기능에서 지원했던 사용처인 parameter 에 대한 지원이 삭제되었으며, 실험적 기능으로 지원되던 Decorator와는 완전히 다른 호환성을 지니게됩니다. 새로운 Decorator 기능을 보여주는 예제 Decorator 타입 지원 위에서 설명했다 싶이 실험적 기능이었던 Decorator 기능은 타입이 제대로 지원되지 않았습니다. 이로 인해 Decorator를 작성할 때는 항상 any 혹은 unknown 으로 만들어진 구현체를 사용해야 했고, TypeScript가 아닌 JavaScript에서 사용하던 방식처럼 직접 변수에 대해 validation을 맞춰서 사용해야하는 불편함이 있었습니다. 이번 5.0에서는 관련 타입 추가, decorator 사용시 타입 확인이 추가되어 보다 안전한 타입 사용이 가능해졌습니다. 새로운 Decorator를 타입까지 써서 확인하는 예제 const 파라미터
2023-05-08#개발#JavaScript#TypeScript
지난 22년 6월에 ECMA 스크립트의 13번째 표준안인 ES2022가 발표되었습니다. (링크) 이번 버전에서는 클래스 인스턴스 필드, static 필드, #name 형식의 private 필드, private 필드에 대한 in 키워드 지원 등 클래스의 필드에 대한 지원이 추가되었고, Error 내장 클래스의 cause 옵션 지원, RegExp의 d 옵션 지원 등 많은 부분이 추가되었습니다. 이번 포스트를 통해 다양한 변경 사항을 확인해보시면 좋겠습니다. Class 필드 지원 ES6에서 추가되었던 클래스에서는 \*\*“필드”\*\*라는 개념이 없고 기존 prototype 방식의 “속성” 밖에 없었습니다. 이 때문에 표준으로 작성하게 되면 이런 클래스가 만들어지게 됩니다. ES6 표준안대로 만든 클래스 이번에 추가된 필드에서는 다른 언어에서 사용하던 방식처럼 메서드를 작성한 클래스 블록에서 필드를 선언 할 수 있습니다. name = '철수'; 를 작성함으로 이 클래스의 인스턴스에는 name 이라는 필드가 생기게되고, 결과적으로 constructor를 생략하는게 가능해졌습니다! ES2022 표준안으로 재작성한 Person 클래스 Class static 지원
2022-11-30#개발#JavaScript