AI 기능을 웹 앱에 붙이는 일이 요즘 정말 흔해졌습니다. 채팅 인터페이스를 만들거나, LLM에게 도구를 쥐여주거나, 스트리밍 응답을 화면에 뿌리거나. 그런데 막상 시작하면 고민이 생깁니다. OpenAI를 쓸지 Anthropic을 쓸지, React인지 Vue인지, Next.js인지 다른 프레임워크인지에 따라 코드가 전부 달라지거든요. TanStack Query와 TanStack Router로 유명한 TanStack 생태계에서 이 문제를 해결하려고 나온 게 바로 TanStack AI입니다. 스스로를 "AI 도구의 스위스"라고 소개할
웹 서비스를 운영하다 보면 이미지를 다뤄야 하는 일이 참 많은데요. 사용자가 올린 프로필 사진을 썸네일로 줄이거나, 상품 이미지를 WebP로 변환하거나, 여러 이미지를 하나로 합쳐야 할 때가 있죠. 이런 작업을 브라우저가 아닌 서버 쪽에서 처리하려면 어떻게 해야 할까요? Sharp는 Node.js에서 가장 널리 쓰이는 이미지 처리 라이브러리입니다. 내부적으로 C 기반의 libvips 엔진을 사용하기 때문에 ImageMagick보다 4~5배 빠르고, 메모리 사용량도 적습니다. JPEG, PNG, WebP, AVIF, GIF, TIFF
React로 폼을 만들어 본 적이 있다면 알 겁니다. 처음엔 useState()로 간단하게 시작하지만, 필드가 늘어나고 유효성 검사가 복잡해지면서 코드가 걷잡을 수 없이 커지는 경험 말이에요. React Hook Form이 이 문제를 꽤 잘 해결해줬지만, TypeScript와 궁합이 아쉬운 경우가 종종 있었습니다. TanStack Query로 서버 상태 관리를 혁신한 TanStack 팀이 이번엔 폼 관리에 도전장을 내밀었는데요. TanStack Form은 처음부터 TypeScript로 설계되어 필드 이름 하나까지 타입으로 잡아주고,
지난 포스팅에서 Node.js의 worker_threads 모듈을 통해 이제 자바스크립트에서도 멀티 쓰레딩이 가능하다는 것을 배웠는데요. 이번 포스팅에서는 워커 스레드 풀링(pooling)을 도와주는 라이브러리인 Piscina에 대해서 알아보겠습니다. Piscina란? 상용 애플리케이션을 개발할 때는 Node.js의 worker_threads 모듈을 그대로 쓰기는 곤란한 경우가 많은데요. 필요할 때 마다 매번 새로운 워커 스레드를 생성하면 서버에 부하를 주어 오히려 성능을 떨어뜨릴 수도 있죠. 그래서 스레드 풀(pool)을 사용하여
React 앱을 만들다 보면 라우팅은 빠질 수 없는 주제입니다. 대부분 React Router를 쓰고 있을 텐데요. 잘 동작하긴 하지만, 경로를 오타 내도 런타임까지 가야 알 수 있고, URL 검색 파라미터를 다루려면 직접 파싱하고 타입을 붙여야 하는 번거로움이 있죠. TanStack Router는 이런 불편함을 정면으로 해결하려는 라이브러리입니다. TanStack Query와 TanStack Form으로 유명한 TanStack 생태계의 라우팅 솔루션인데요. 라우트 경로, 파라미터, 검색 파라미터, 로더 데이터까지 전부 TypeSc
이번 포스팅에서는 차세대 번들러인 Vite 사용하여 React 프로젝트를 생성하고 설정하는 방법에 대해서 알아보겠습니다. Vite에 대한 기초적인 내용에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고하세요. CRA 🆚 Next.js 🆚 Vite 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었습니다. State of JS 2023 설문 결과를 보시면 Create React App을 사용해봤다는 응답자가 90%가 넘을 정도로 CRA는 오랫동안 React 생태계에서 프로젝트를
Vite가 Webpack이나 Parcel과 같은 기존 번들러(bundler)를 제치고 자바스크립트 생태계의 표준 빌드 도구로 자리 잡았습니다. Vue.js의 창시자인 Evan You가 만든 Vite는 2026년 3월 Vite 8 출시와 함께 Rust 기반의 Rolldown을 도입하면서 성능이 한층 빨라졌는데요. 이번 포스팅에서는 Vite를 처음 사용하시는 분들을 위해서 Vite로 웹 프로젝트를 시작하는 아주 기초적인 방법을 알려드리겠습니다. Vite란? Vite는 기존 자바스크립트 번들러의 만성적인 성능 문제를 해결하고 개발자 경험
타입스크립트 프로젝트에서 @types/로 시작하는 수 많은 패키지가 개발 의존성으로 설치되어 있는 것을 보신 적이 있으신가요? 이번 포스팅에서는 이러한 패키지들이 도대체 왜 필요하며 어디서 오는 것인지에 대해서 간단히 알아보려고 합니다. Definitely Typed란? 자바스크립트는 생겨난지 30년이 다 되가는 프로그래밍 언어이지만 타입스크립트는 이제 겨우 탄생한지 10년이 조금 넘었습니다. 최근에 만들어진 자바스크립트 패키지는 대부분은 타입 선언(type definitions)이 내장되어 있지만, 타입스크립트가 등장하기 이전에
올인원(All-in-one) 테스팅 프레임워크 Vitest를 사용하면 다른 라이브러리 설치 없이 바로 mocking과 spying 기능을 쓸 수 있는데요. 그런데 여기서 mocking과 spying을 한국어로 뭐라고 번역해야 모르겠네요. 😅 주변에서 보면 "모킹"과 "스파잉"으로 그냥 영어를 차용해서 쓰고 있는 것 같습니다. Mocking 이란? 먼저 mocking이 생소하신 분들을 위해서 mocking 대한 기본 개념부터 잡고 들어가는 게 좋을 것 같습니다. mocking은 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을
테스트를 작성하다 보면 여러 테스트에 걸쳐서 반복되는 로직이 생기기 마련인데요. 이러한 공통 로직을 모든 테스트마다 중복해서 작성하면 개발 생산성이 떨이지고 유지보수가 힘들어집니다. 이번 포스팅에서는 Vitest를 이용해서 테스트 전이나 후에 항상 실행되야 하는 로직을 효과적으로 실행하는 방법에 대해서 알아보겠습니다. 테스트 대상 코드 데이터베이스에 접근하는 애플리케이션에 대한 테스트를 작성한다는 가정 하에 예제 코드를 작성해보겠습니다. 최대한 간단한 예제를 위해서 자바스크립트 배열로 데이터베이스를 대신하도록 할께요. 사용자 데이터
길고 복잡한 코드에 대한 테스트를 작성하다보면 테스트 코드의 양도 비례해서 늘어나게 되기 마련지요? 하나의 파일 안에 테스트 코드가 많아지면 도대체 어느 테스트가 어떤 기능을 위한 것인지 빠르게 파악하기가 어려워집니다. 게다가 디버깅을 하다보면 특정 테스트만 실행하거나 특정 테스트만 제외하고 테스트를 해야하는 경우도 생기죠. 이번 포스팅에서는 이러한 상황을 효과적으로 대처하기 위해서 Vitest로 어떻게 테스트를 깔끔하게 묶어서 관리하고 테스트 별로 실행 제어를 할 수 있는지 알아보려고 합니다. 테스트 케이스와 스위트 테스트를 그룹
테스트를 작성하시다보면 어떤 함수나 호출한 후 예상 결과가 실제과 동일한지 검증하는 작업을 많이 하는데요. Vitest는 테스트를 작성할 때 효과적인 결과값 매칭이 가능하도록 Jest의 API와 호환되는 다양한 매처 함수를 제공하고 있습니다. 이번 포스팅는 실전 테스팅에서 많이 사용되는 Vitest의 매처 함수를 하나씩 살펴보면서 언제 어떻게 활용하는지 알아보겠습니다. 차세대 테스팅 프레임워크로 각광받고 있는 Vitest에서 생소하시다면 먼저 소개 포스팅을 읽어 보시고 돌아오시기를 추천드립니다. 검증 (Assertion) 테스트라는
ES6에서 클래스(class)가 도입되고 타입스크립트가 대중화되면서 이제 클래스를 사용하는 자바스크립트 코드를 흔하게 볼 수 있게 되었습니다. 뿐만 아니라 Angular나 NestJS처럼 클래스를 기반으로 동작하는 라이브러리나 프레임워크도 점점 늘어나고 있지요. 하지만 아직 클래스를 모킹하거나 테스팅하시는데 어려움을 겪는 개발자 분들이 많은 것 같습니다. 이번 포스팅에서는 자바스크립트의 대표적인 테스팅 프레임워크인 Jest를 사용하여 클래스를 모킹(mocking)하고 테스트 코드를 작성해보겠습니다. 본 포스팅을 이해하시려면 jest
자바스크립트 생태계에서 Vite가 번들러의 왕으로 등극하면서, 덩달아 자매 제품인 Vitest도 인기도 높아지고 있는데요. State of JS 2024 설문 결과를 보면 오랫동안 테스팅 프레임워크의 강자였던 Jest까지 위협하는 모습입니다. 이번 포스팅에서는 차세대 테스팅 프레임워크로 각광받고 있는 Vitest에 대해서 살펴보는 시간을 가져보겠습니다. Vitest란? Vitest는 Vite를 기반으로 작동하는 테스팅 프레임워크입니다. 이전에 나왔던 Jest처럼 테스트 실행뿐만 아니라 모킹(mocking)과 스냅샷(snapshot)
테스트를 작성하다보면 날짜와 시간이 골칫거리가 되는 경우가 많습니다. 날짜와 시간은 다른 데이터와 다르게 항상 변하기 때문인데요. 이번 포스팅에서는 Jest를 이용하여 날짜와 시간을 효과적으로 모킹(mocking)하는 방법에 대해서 알아보겠습니다. 테스팅 프레임워크인 Jest에 생소하신 분들은 먼저 관련 포스팅를 읽어 보시고 돌아오시기를 추천드립니다. 예제 코드 자바스크립트의 Intl API를 사용하여 현재 날짜를 주어진 언어에 따라 문자열로 변환해주는 간단한 함수를 작성해보겠습니다. 이 함수는 Date() 생성자를 통해서 현재 날
제가 몇 년 전에 블로그에서 npm 패키지 저장소에 faker라는 이름으로 등록되어 있는 라이브러리를 소개해 드린 적이 있는데요. 안타깝게도 2022년에 faker를 유지보수하던 개발자가 불미스러운 일을 저질러 더 이상 사용하면 안 되는 라이브러리가 되었습니다. (오픈 소스 커뮤니티에 시사하는 바가 컸던 사건이므로 관심있으신 분은 관련 기사를 참고하시기 바랍니다.) 현재는 npm 패키지 저장소에 @faker-js/faker라는 패키지 이름으로 등록된 새로운 라이브러리가 예전에 faker 라이브러리를 대신하고 있는데요. 과거의 실수를
최근에 웹 개발에 대해서 얘기할 때 메타 프레임워크(Meta Framework)라는 용어를 한 번쯤 써보셨거나 적어도 들어보셨을텐데요. 하지만 자주 쓰이는 용어임에도 불구하고 막상 메타 프레임워크가 뭔지 설명해보려고 하면 쉽지 않은 것 같죠? 이번 글에서는 요즘 유행하는 메타 프레임워크가 전통적인 프레임워크와 어떻게 다르며 왜 필요한지에 대해서 알아보았습니다. 그리고 현재 시장에 어떤 메타 프레임워크가 주목받고 있는지도 간단히 살펴보겠습니다. 메타 프레임워크의 특징 우리가 기존에 프레임워크를 생각할 때는 보통 어떤 프로그래밍 언어를
웹사이트 개발을 하다보면 여러가지 이유로 내가 작성하지 않은 서드파티(3rd-party) 스크립트를 불러와야 하는 경우가 있습니다. 대표적인 예로 Google Analytics와 같은 통계용 스크립트와 Google AdSense와 같은 광고용 스크립트를 들 수 있는데요. 이번 글에서는 웹 워커(Web Worker)라는 기술을 사용하여 이러한 서드파티 스크립트를 매우 빠르게 로딩해주는 혁신적인 라이브러리인 Partytown을 소개해드리겠습니다. 기존 스크립트 로딩 방식의 문제점 Partytown에 대해서 이야기하기 전에 기존에 웹에서
ChatGPT와 같은 LLM(Large Language Model, 대형 언어 모델)이 등장하면서 웹에서 텍스트를 스트리밍하는 사례가 점점 늘어나고 있는데요. 그에 따라 별다른 라이브러리없이도 웹에서 스트림을 쓰고 읽을 수 있는 자바스크립트의 Streams API가 다시 주목받고 있는 것 같습니다. 이번 포스팅에서는 자바스크립트의 Streams API을 사용하여 스트림을 생성하고 데이터를 읽는 방법에 대해서 알아보겠습니다. 읽을 수 있는 스트림 생성 자바스크립트에서 데이터를 읽을 수 있는 스트림을 만들 때는 ReadableStrea
지난 포스팅에서 Zod로 스키마를 정의하는 다양한 방법에 대해서 알아보았는데요. Zod의 부가적인 기능이지만 알아두면 굉장히 유용한 입출력 간 데이터 변환에 대해서 알아보겠습니다. 내장 트랜스포머 Zod는 입출력 간 문자열 변환을 돕기 위해서 트랜스포머(transformer)를 내장하고 있는데요. 대표적으로 .trim(), .toLowerCase(), .toUpperCase()를 들 수 있습니다. 그럼 이 3가지 내장 트랜스포머를 모두 사용해서 스키마를 하나 정의한 후에 데이터 변환을 해보겠습니다. 결과를 출력해보면 입력된 문자열이