Javascript

Webpack, Babel, TypeScript를 한 프로젝트에서 함께 쓰다 보면 역할이 겹쳐 보인다. Webpack도 코드를 변환하고, Babel도 자바스크립트를 출력하며, tsc 역시 타입스크립트를 자바스크립트로 바꾼다. 설정 파일만 보면 같은 일을 세 번 하는 것 같고, 그래서 하…

예전에 Proxy를 이용해 브라켓 문법을 DSL로 확장하는 실험을 한 적이 있다. obj[WHERE](predicate)[VALUES]()처럼, 자바스크립트의 기본 문법은 그대로 두되 그 해석만 바꿔 작은 쿼리 엔진처럼 동작하게 만드는 글이었다. 그때는 "문법은 고정되어 있지만 해석은…

async function에서 Promise를 반환하면 조금 이상한 일이 일어난다. 아래의 코드를 보면 async function은 원래 Promise를 반환하고, 그 안에서 다시 Promise.resolve(1)을 반환했으니 결과가 Promise<Promise<number>>처럼 남아…

문자열 데이터를 다룰 때 단순히 “이 단어가 있나?”만으로는 부족한 순간이 있다. 자동 완성처럼 특정 접두사로 시작하는 후보를 모아야 할 때도 있고, 어떤 키에 값을 두고 빠르게 찾고 싶을 때도 있다. 이럴 때 가장 자연스럽게 떠올릴 수 있는 자료구조가 바로 Trie이다. Trie는 무…

느린 네트워크에서 큰 이미지를 열면 가끔 화면이 위에서 아래로 채워진다. 마치 누군가 아주 성실하게 롤러로 이미지를 칠하는 것처럼 보인다. 물론 브라우저 안에 그런 직원은 없다. 있다면 우리보다 야근을 더 많이 하고 있을 것이다. 이 현상은 단순한 시각 효과가 아니라 네트워크 전송, 브…

다운로드 화면에서 진행 막대가 조금씩 차오르면 이상하게 안심된다. 반대로 스피너만 계속 돌면 파일이 오는 중인지, 서버가 고민 중인지, 내 인생이 잠깐 멈춘 건지 알 수 없다. 사용자는 둘 다 “다운로드 중”이라고 느끼지만, 내부적으로는 꽤 다른 상황일 수 있다. 진행률 계산 자체는 복…

Streams API를 공부하다 보면 묘한 기시감이 온다. JavaScript에서 ReadableStream, WritableStream, TransformStream을 보고 있는데, Java의 InputStream, Go의 io.Reader, Rust의 Read와 Write가 멀리서…

앞선 글에서 stream의 손잡이와 의미론을 잡았다면, 이제는 조금 더 현실적인 질문이 남는다. 그래서 이걸 어디에 쓰는가. 표준 문서를 읽고 메서드를 아는 것만으로는 실전 감각이 생기지 않는다. 운동 기구 설명서를 읽었다고 근육이 생기지 않는 것과 비슷하다. 억울하지만 대체로 사실이다…

스트림 예제는 처음 보면 꽤 얌전하다. getReader()로 읽고, getWriter()로 쓰고, pipeTo()로 연결하면 데모가 움직인다. 여기까지만 보면 API가 친절한 편이라고 착각하기 쉽다. 물론 데모는 늘 친절하다. 실무에 데려가는 순간부터 성격이 나온다. 스트림 코드를 실…

비동기를 처음 배울 때 나는 대개 Promise와 async, await부터 붙잡았다. 한 번의 결과를 기다리는 문제에는 이 조합이 아주 강력하다. 버튼을 누르고, 요청을 보내고, 응답을 받은 뒤 다음 줄로 넘어간다. 세상도 그렇게 한 번에 답을 주면 좋겠지만, 네트워크와 파일 시스템은…

파일이 작고 네트워크가 친절하다면 우리는 굳이 stream을 의식하지 않아도 된다. 응답을 통째로 받고, 문자열을 통째로 만들고, 메모리에 올린 다음 “됐네” 하고 넘어가면 된다. 문제는 현실이 그렇게 예의 바르지 않다는 데 있다. 데이터는 조금씩 오고, UI는 기다리지 않으며, 사용자…

이 포스트는 node.js의 코어 컨트리뷰트이며 Cloudflare Workers 팀 소속 개발자 James M Snell이 cloudflare 블로그에 올린 We deserve a better streams API for JavaScript 게시글을 번역한 것이다. 번역하는 과정에서…

화면 전환은 늘 애매한 영역이었다. 기능 명세에는 잘 안 들어가지만, 막상 없으면 서비스가 묘하게 둔하게 느껴진다. 목록에서 상세로 들어갈 때, 필터를 바꿨을 때, 카드가 확장될 때 화면이 자연스럽게 이어지면 사용자는 “빠르다”고 느낀다. 반대로 데이터는 이미 바뀌었는데 화면만 툭 끊기…

자바스크립트에서 obj[key]는 가장 기본적인 문법이다. 우리는 이를 단순한 프로퍼티 조회로 받아들인다. 특정 key를 넣으면 그에 해당하는 값을 반환하는, 가장 직관적인 접근 방식이다. 그러나 Proxy를 사용하면 이 동작을 가로채고 전혀 다른 의미로 재정의할 수 있다. 문법은 그대…

새로운 기능 개발을 마친 뒤, 여기저기 흩어져 있던 데이터와 유틸리티 로직을 하나의 클래스로 정리하는 리팩터링을 진행했다. 로직을 쪼개거나 책임을 재설계하는 작업은 아니었고, 단순히 구조를 정돈하는 수준이었기 때문에 큰 문제가 생길 것이라 예상하지 않았다. 그러나 dev 환경에서 확인한…

최근 Grunfeld를 사용해본 지인으로부터 다소 기묘한 버그 리포트를 전달받았다. 모달의 기본 동작을 전역적으로 설정할 수 있도록 제공한 GrunfeldProvider의 options 프로퍼티가, 특정 상황에서 기대와 전혀 다른 방식으로 동작한다는 내용이었다. 사용자는 단순히 defa…

기존 자바스크립트 사용자들은 객체의 속성 접근을 감지하거나 동작을 변경하기 위해 Object.defineProperty() 같은 저수준 API를 활용해 왔다. 이 방식은 특정 프로퍼티의 getter나 setter를 재정의하는 데에는 유용했지만, 동적으로 추가되는 속성이나 함수 호출, 삭…

Iteration Protocol 이터레이션 프로토콜은 자바스크립트에서 데이터를 순회하기 위한 표준화된 규약으로, 컬렉션(배열, 문자열 등)을 순회 가능한 형태로 정의한다. 이 프로토콜은 두 가지로 나뉘며, 하나는 이터러블 프로토콜(Iterable Protocol), 다른 하나는 **이…

이 글의 제목은 ‘자바스크립트에서의 멀티패러다임 프로그래밍’이지만, 우선은 영어에 대해 이야기해보자. 다소 뜬금없다고 느낄 수도 있겠지만, 다 이유가 있다. 아주 오래전, 국제 외교의 언어는 프랑스어였다. 왕실 간의 외교문서와 고위 외교관의 대화는 프랑스어로 쓰이는 것이 관례였다. 하지…

렉시컬 스코프라는 용어를 처음 접했을 때, 나는 이것을 별다른 의심 없이 ‘렉시컬 환경에 따른 스코프 체인’ 정도로 이해했다. 두 개념이 밀접하게 연결되어 있다는 인상 때문이었을 것이다. 그 결과, 모 회사의 면접에서 렉시컬 스코프를 설명해 보라는 질문을 받았을 때 스코프 체인에 대한…