Javascript

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

같은 서비스를 10개의 탭으로 열었을 때 서버에 소켓 연결도 10개가 생긴다면, 문제는 실시간 기능 자체가 아니라 브라우저 컨텍스트마다 연결을 새로 만드는 구조에 있을 수 있다. 채팅, 알림, 협업 상태처럼 페이지가 열려 있는 동안 유지되는 연결은 탭 수만큼 늘어날 때 서버와 클라이언트…

Worker를 만들 수 있다는 사실보다 더 중요한 것은, Next.js가 서버와 브라우저를 오가는 동안 그 Worker 생성 코드가 언제 평가되는지 통제하는 일이다. Dedicated Worker는 하나의 호출자와 연결되는 구조라서 이미지 처리나 대용량 데이터 변환처럼 특정 화면의 작업…

이미지 하나를 처리했을 뿐인데 버튼 hover가 끊기고 입력창이 늦게 반응한다면, 문제는 React 렌더링보다 자바스크립트가 어디에서 실행되고 있는지에 있을 수 있다. 브라우저 화면은 HTML과 CSS만으로 움직이는 것처럼 보이지만, 사용자의 입력을 받고 레이아웃을 계산하고 JavaSc…

브라우저에서 실행되는 JavaScript가 많아질수록 이상한 순간이 찾아온다. 비동기 처리를 했는데도 화면은 멈추고, 탭을 몇 개 열었을 뿐인데 서버에는 같은 소켓 연결이 여러 개 생기고, Next.js에서는 코드가 서버에서 평가될지 브라우저에서 평가될지 계속 의식해야 한다. Worke…

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

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

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