JS

자바스크립트에서 비동기 로직을 다루다 보면 await이나 then 메서드로 값을 처리하는 경우가 많다. 보통 우리는 이런 값을 Promise라고 부르지만, 사실 자바스크립트 엔진은 어떤 값이 진짜 Promise인지 여부보다 then 메서드를 가지고 있는지를 먼저 확인한다. 이렇게 then 메서드를 가진 객체를 thenable이라 부르며, await이나 then 메서드 호출 시 핵심적인 역할을 한다.thenable은 Promise와 유사하게 동작할 수 있는 객체를 의미한다. ECMAScript 명세에 따르면, await와 then 메서드 호출은 내부적으로 동화(assimilation) 과정을 거쳐 모든 thenable을 표준 Promise로 감싸 처리한다. 즉, Promise가 아니더라도 then 메서드만..

기존 자바스크립트 사용자들은 객체의 속성 접근을 감지하거나 동작을 변경하기 위해 Object.defineProperty() 같은 방법을 사용했다. 그러나 여기에는 동적 속성 추가나 함수 호출과 같은 동작을 탐지하는 데 어려움이 있었다. 이를 해결하기 위해 자바스크립트에 Proxy 처리기가 도입되었다. 이 클래스는 get, set, apply 등 다양한 트랩(trap)을 제공하여 객체의 속성 접근, 값 변경, 삭제, 함수 호출 등의 동작을 자유롭게 제어할 수 있도록 한다. 아마도 이것이 Proxy 처리기에 대한 일반적인 인식일 것이다. 나도 큰 틀에서는 이러한 인식에 동의한다. 사소한 문제가 하나 있다면, 나는 '객체의 속성 접근을 감지하거나 동작을 변경'해야할 필요를 느끼지 못했다는 것이다. 더 자세히 ..

싱글턴 패턴(Singleton Pattern)은 소프트웨어 디자인 패턴 중 하나로, 애플리케이션 내에서 특정 클래스의 인스턴스가 오직 하나만 존재하도록 보장하는 패턴이다. 주로 전역 상태를 관리하거나 공통된 자원을 효율적으로 활용해야 하는 경우에 사용된다. 이 패턴은 인스턴스의 생성과 접근을 중앙에서 제어함으로써 불필요한 메모리 낭비를 방지하고, 일관된 상태를 유지할 수 있는 장점을 가진다. 일반적으로 클래스 내부에 자신의 인스턴스를 정적(static)으로 보관하고, 외부에서는 해당 인스턴스에 접근할 수 있는 메서드(예: getInstance())를 통해 객체를 반환하는 방식으로 구현한다. 이러한 특성 덕분에 싱글턴 패턴은 설정 관리, 로깅, 캐시 처리, 데이터베이스 연결 등 다양한 분야에서 널리 활용된..

자바스크립트는 프로토타입 기반(prototype-based) 언어로, 객체 지향 프로그래밍에서 클래스를 사용하는 대신 프로토타입을 활용해 객체를 상속한다. 모든 객체는 __proto__라는 숨겨진 프로퍼티를 통해 프로토타입 객체에 정의된 프로퍼티와 메서드를 상속받을 수 있다. 또한, 자바스크립트에서는 number, string, boolean 같은 원시 값도 객체처럼 동작하는데, 이는 자바스크립트 엔진이 자동으로 해당 값을 감싸는 래퍼 객체(Wrapper Object)를 생성하기 때문이다. 덕분에 원시 값도 String.prototype.toUpperCase() 같은 메서드를 사용할 수 있으며, 메서드 호출 후 래퍼 객체는 즉시 사라져 원시 값의 특성을 유지한다.클래스 문법이 등장한 이후로도 프로토타입은..

프로토타입 오버라이드는 JavaScript에서 객체 지향 프로그래밍을 할 때 객체의 동작을 커스터마이징하거나 확장하기 위해 사용하는 기법 중 하나다. JavaScript의 모든 객체는 프로토타입 체인을 통해 부모 객체의 속성과 메서드를 상속받는데, 이때 기본 제공되는 객체의 프로토타입에 새로운 메서드를 추가하거나 기존 메서드를 수정하는 것을 프로토타입 오버라이드라고 부른다. 예를 들어, Array나 String 같은 빌트인 객체의 프로토타입에 새로운 메서드를 추가하면, 해당 타입의 모든 인스턴스에서 이를 사용할 수 있는 것이다.프로토타입 오버라이드는 프로젝트 전반에 걸쳐 상당히 강력한 영향력을 행사한다. 올바르게 사용하면 중복 코드를 줄이고 개발 생산성을 높일 수 있지만, 잘못 사용하면 예기치 못한 동작..

Tagged Template Literal 혹은 태그된 템플릿 리터럴이라 불리는 문법은 ES6부터 지원되는 자바스크립트 기능으로, 템플릿 리터럴을 함수와 함께 사용하여 더 강력하게 값을 조작할 수 있게 한다. 기본 템플릿 리터럴은 문자열을 표현하는 데 쓰이지만, 태그를 사용하면 문자열의 각 부분과 값들을 원하는 대로 가공할 수 있다. 태그 함수는 일반 함수와는 다르게 템플릿 리터럴 바로 앞에 위치해, 해당 함수가 템플릿을 처리하게 된다.기본적으로 태그 함수의 타입은 아래와 같다. 템플릿 리터럴로 무엇이 올지 모른다는 점 때문에 unknown으로 선언했지만, 필요하다면 Array 타입과 같은 방식으로 정해진 타입만을 받을 수도 있다.function myTag(strings: TemplateStringsAr..

상황내가 혼자 개발하고 있는 onef에 댓글 기능을 추가하기로 했다. 우선은 댓글 작성 로직과 작성 컴포넌트를 구현하였다. 이후에 댓글 수정 기능이 필요하다는 걸 깨닫고 보니 댓글 작성 로직에서 post만 put 메소드로 바꿔주면 된다는 사실을 알게되었다. 이를 위해 댓글 작성 컴포넌트에서 해당 로직을 추출하고, 필요한 로직은 Context를 사용해 외부에서 주입하는 방식으로 변경하였다.// CommentMutation.tsexport class CommentMutation extends MutationFn { constructor() { super(); } postComment() { return ({ parentId, value, depth }: { parentId: string; v..

구조 분해 할당은 모던 자바스크립트 문법으로서 변수 선언 시 사용되며, 객체나 배열의 특정 요소를 선택적으로 변수에 할당하여 쉽게 사용할 수 있게 한다. 이를 통해 코드를 더 간결하고 읽기 쉽게 만들 수 있다.어느정도 숙련된 자바스크립트/타입스크립트 사용자라면 숨쉬듯이 사용하는 문법이기도 하다. 그런데 이 문법을 메모리 주소와 연관지어 생각해본 적은 한 번도 없었다. 적어도 오늘 어떤 일이 있기 전까지는.  나는 NestJs로 백엔드 작업을 하며 유저 기능을 위한 커스텀 가드를 만들고 있었다. 아주 간단한 작업이었으며, 나는 별 생각 없이 코드를 마무리지었다. 그리고 코드를 한번 쓱 보는데 뭔가 이상하다는 생각이 들었다. validateRequest 함수 내에서 this.authService.verify..

실행 컨텍스트자바스크립트 엔진(이하 JSE)은 코드를 실행하기에 앞서 코드를 평가하는 과정을 거친다. 이를 '실행 컨텍스트 평가'라고 부르고, 이후 선언문을 제외한 소스코드가 실행된다. 사실 클로저를 지원하는 대부분의 언어에서 이와 유사하거나 동일한 개념이 적용되어있다.실행 컨텍스트 평가 과정을 통해 JSE는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 생성하게 된다. 이 객체가 바로 실행 컨텍스트(이하 컨텍스트)이다. 컨텍스트가 구성되면 JSE는 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드를 하나씩 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.하나의 컨텍스트를 구성할 수 있는 방법으로는 전역 공간, eval 함수, 함수 실행 등이 있다. 자바스크립트 파일..

이 포스트는 Timotius Sitorus가 자신의 dev.to 블로그에 올린 Stop using Array[index], use Array.at() instead 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다. Array.at() 메소드는 ECMAscript2022를 통해 새롭게 추가된 Array 생성자의 프로토타입 메소드입니다. 이 메소드를 통해 우리는 마침내 JS에서 기본적으로 Negative Indexing을 처리할 수 있게 되었습니다. Negative Indexing네거티브 인덱싱이라 함은 음수를 인덱스로 사용하여 배열의 시작이 아닌 끝에서부터 특정 요소에 엑세스하는 기능입니다. 예를 들어 파이썬에서는 배열의 마지막 요소에 접근..

Intersection Observer API는 웹 페이지의 특정 요소가 뷰포트나 다른 요소와 교차하는지를 비동기적으로 감지하는 방법을 제공한다. 이 API는 무한 스크롤, 지연 로딩, 광고 노출 감지 등을 구현하는 데 특히 유용하다.전체적인 구성은 크게 3가지 단계로 구성된다. 1) 노드를 관찰할 새로운 intersectionObserver를 생성하면서 2) 관찰되었을 때 수행할 작업과 관찰 방식을 정의하며 3) observe 메소드를 사용해 관찰할 노드를 등록해주는 것이다. 바닐라JS에서 일반적으로 사용되는 코드의 모습은 아래와 같다.let target = document.querySelector('#target');const observer = new IntersectionObserver(callb..