Deno 프론트엔드 개발, 1년 만에 완전히 달라진 이유
Deno가 처음 나왔을 때만 해도 'Node.js의 안전한 대안' 정도의 인식이 강했는데요.
특히 프론트엔드 개발에서는 어딘가 2% 부족하다는 느낌을 지울 수 없었던 게 사실이죠.
하지만 지난 1년 사이, Deno 생태계는 정말 놀라울 정도로 많은 변화를 겪었거든요.
이제 Deno는 프론트엔드 개발에서도 아주 강력한 선택지가 되어가고 있습니다.
오늘은 그동안 어떤 업데이트들이 있었고, 이게 우리 개발자들에게 어떤 의미인지 속 시원하게 한번 풀어보려고 합니다.
다시 돌아온 Deno의 핵심 무기
가장 먼저 이야기하고 싶은 건 바로 Deno 자체의 변화인데요.
특히 프론트엔드 개발과 직결되는 아주 중요한 기능들이 대거 추가되거나 개선되었죠.
deno bundle의 화려한 귀환
혹시 Deno v1 시절의 deno bundle 명령어를 기억하시나요?
하나의 파일로 코드를 묶어주는 기능이었는데, 솔직히 webpack이나 esbuild 같은 전문 번들러를 대체하기엔 역부족이었거든요.
결국 개발자들의 기대와 실제 기능 사이의 간극이 커서 Deno v2가 나오면서 한번 사라졌던 기능이죠.
그런데 최근 이 deno bundle이 완전히 새롭게 태어나서 돌아왔는데요.
단순한 복귀가 아니라, 현존 최강의 번들러 중 하나인 'esbuild'를 기반으로 재탄생한 겁니다.
이제 --platform browser 옵션만 주면 브라우저용 번들을 뚝딱 만들어낼 수 있고요.
--watch 옵션과 함께 사용하면 파일이 변경될 때마다 자동으로 번들링을 다시 해주니, 프론트엔드 개발 환경 구성이 훨씬 간편해졌습니다.
물론 아직 실험적인 기능이긴 하지만, Deno가 직접 프론트엔드 개발 경험을 챙기기 시작했다는 아주 강력한 신호죠.
더 똑똑해진 코드 지킴이 deno lint
Deno의 내장 린터인 deno lint도 프론트엔드 개발자들을 위해 한층 더 업그레이드되었는데요.
이전에는 Deno에서 React나 JSX 코드를 작성할 때, ESLint에서나 잡아주던 세세한 규칙들을 놓치는 경우가 종종 있었거든요.
예를 들면 'map'을 돌릴 때 'key' prop을 빼먹는 실수 같은 것들 말입니다.
하지만 이제는 react-rules-of-hooks 같은 필수적인 규칙들을 포함해 다양한 JSX/React 관련 린팅 룰을 기본적으로 지원합니다.
deno.json 파일에 간단하게 설정만 추가하면 바로 활성화할 수 있죠.
{
"lint": {
"rules": {
"tags": ["react", "recommended"]
}
}
}
이제 Deno 환경에서도 훨씬 더 안정적으로 React 코드를 작성할 수 있게 된 거예요.
게다가 플러그인 시스템까지 도입되어서, 필요하다면 우리 팀만의 커스텀 린트 규칙을 TypeScript로 직접 만들어 쓸 수도 있습니다.
포맷팅은 기본, 이제 언어의 경계를 넘다
deno fmt는 이미 많은 개발자들이 사랑하는 기능인데요.
이제는 자바스크립트와 타입스크립트를 넘어 CSS, HTML, 심지어 Svelte나 Vue 파일까지 포맷팅을 지원하게 됐습니다.
여러 언어를 함께 사용하는 최신 프론트엔드 프로젝트에서 코드 스타일을 일관되게 유지하는 게 얼마나 중요한지 다들 아시죠?
이제는 Deno 하나만으로 이 모든 걸 해결할 수 있게 된 겁니다.
프레임워크의 세대교체 Fresh v2
Deno 자체의 발전도 놀랍지만, 진짜 혁신은 프레임워크 생태계에서 일어나고 있는데요.
그 중심에는 Deno 팀이 직접 만드는 프레임워크, 'Fresh'가 있습니다.
최근 v2 정식 출시를 앞두고 정말 엄청난 기능들이 속속 추가되고 있거든요.
Fresh와 Vite의 만남, 이건 사건이죠
Fresh v2 업데이트의 하이라이트는 단연코 Vite 플러그인 지원인데요.
Vite가 프론트엔드 개발 생태계에서 얼마나 강력한 도구인지는 굳이 설명할 필요가 없죠.
바로 그 Vite를 이제 Fresh 프로젝트에서 공식적으로 쓸 수 있게 된 겁니다.
이게 왜 중요하냐면, Deno의 단순함과 안정성은 그대로 가져가면서 Vite의 광속 HMR(Hot Module Replacement)과 거대한 플러그인 생태계를 모두 누릴 수 있게 되기 때문이거든요.
아직은 초기 단계라 vite.config.ts 같은 설정 파일들을 직접 만들어줘야 하지만, 방향성 자체는 정말 흥미롭습니다.
// vite.config.ts
import { defineConfig } from "vite";
import { fresh } from "@fresh/plugin-vite";
export default defineConfig({
plugins: [
fresh(),
],
});
deno task dev 대신 vite 명령어로 개발 서버를 띄우는 날이 머지않은 거죠.
Deno 프론트엔드 개발의 '게임 체인저'가 될 잠재력을 가진 업데이트임이 분명합니다.
최신 트렌드도 놓치지 않는다, Tailwind CSS v4
요즘 프론트엔드 개발에서 Tailwind CSS는 거의 표준처럼 쓰이고 있는데요.
Fresh는 곧 출시될 Tailwind CSS v4를 발 빠르게 지원하기 시작했습니다.
@fresh/plugin-tailwind 플러그인이 이미 v4를 지원하도록 업데이트되어서, 최신 CSS 기술을 Fresh 프로젝트에 바로 적용해 볼 수 있죠.
이런 빠른 대응은 Fresh가 얼마나 현재 프론트엔드 트렌드에 진심인지를 보여주는 대목입니다.
격변하는 생태계, 새로운 질서의 시작
새로운 스타가 떠오르면 저무는 별도 있는 법인데요.
Deno 프론트엔드 생태계 역시 중요한 변화의 시기를 맞고 있습니다.
선구자의 퇴장, Aleph.js
한때 Deno 기반 프레임워크의 양대 산맥으로 불렸던 Aleph.js가 얼마 전 공식적으로 유지보수 중단을 선언하고 리포지토리를 아카이브했는데요.
Deno 생태계 초창기에 많은 영감을 주었던 프로젝트라 아쉬운 마음이 드는 건 어쩔 수 없죠.
하지만 이건 Deno 생태계가 파편화된 시기를 지나 Fresh를 중심으로 힘을 모으고 있다는 긍정적인 신호이기도 합니다.
Aleph.js 공식 문서에서도 이제는 Fresh로의 전환을 권장하고 있을 정도니까요.
Deno가 직접 만드는 생태계의 기초
최근 Deno 팀의 행보를 보면, 단순히 런타임만 만드는 것을 넘어 생태계의 '기반 공사'에 직접 나서고 있다는 게 느껴지는데요.
@deno/ 스코프로 정말 중요한 패키지들을 쏟아내고 있거든요.
예를 들어 @deno/esbuild-plugin이나 @deno/vite-plugin 같은 패키지들은 esbuild나 Vite 같은 외부 도구들이 Deno의 모듈 해석 방식을 완벽하게 이해하도록 돕는 다리 역할을 합니다.
이런 기반 패키지들이 있으니 Fresh와 Vite의 통합 같은 일들이 훨씬 수월해지는 거죠.
특히 @deno/svelte-adapter의 등장은 정말 반가운 소식인데요.
이제 SvelteKit으로 만든 애플리케이션을 Deno 환경, 특히 Deno Deploy에 배포하는 것이 훨씬 간단하고 안정적이게 됐습니다.
이처럼 Deno가 직접 주요 프레임워크와의 연결고리를 만들어주면서, 개발자들은 이제 '이게 Deno에서 잘 돌아갈까?' 하는 걱정을 덜고 오롯이 개발에만 집중할 수 있게 된 겁니다.
마치며
지난 1년을 돌아보면, Deno는 프론트엔드 개발의 변두리에서 중심으로 성큼 다가왔는데요.
내장 번들러와 린터 강화로 기본기를 다지고, Fresh v2와 Vite의 결합으로 강력한 한 방을 준비하고 있죠.
여기에 Deno가 직접 생태계의 뼈대를 만들어가면서 안정감까지 더하고 있습니다.
만약 지금까지 Deno를 '재미있는 토이 프로젝트용 런타임' 정도로만 생각하셨다면, 이제는 그 생각을 바꿀 때가 온 것 같네요.
Deno가 열어갈 프론트엔드의 새로운 미래, 정말 기대되지 않나요?