요즘 JavaScript 기술 및 트렌드

✅ 1. JavaScript 런타임 및 빌드 시스템

① Bun 1.0+ 🏎️

• Node.js 대체 가능 (npm, npx, yarn보다 빠름)
• TypeScript, ESM, CommonJS 네이티브 지원
• Web API 지원 (fetch, WebSocket, Blob, FormData 등)
• 사용 예시

bun install
bun run index.ts

② Deno 2.0+ 🔥

• Node.js보다 보안이 강화된 런타임
• npm 패키지 네이티브 지원 (import express from "npm:express")
• TypeScript 기본 지원

---

✅ 2. 프레임워크 최신 트렌드

① Next.js 14+ (App Router 완전 정착)

• React Server Components(RSC) 기본
• Turbopack으로 더 빠른 번들링
• Partial Prerendering(부분적 정적 생성) 지원

② Nuxt 3 (Vue 기반 최신 트렌드)

• Vue 3 + Nitro 엔진으로 서버 성능 극대화
• useAsyncData(), useFetch() 같은 서버 데이터 핸들링 강화
• app.config.ts로 글로벌 설정 가능

③ SvelteKit 2.0+

• Zero-config + 파일 기반 라우팅
• 서버/클라이언트 자동 최적화

---

✅ 3. JavaScript 언어 자체의 최신 기능 (ECMAScript 2024/2025)

① Set 메서드 추가 (ECMAScript 2023)

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

console.log(setA.intersection(setB)); // Set { 3 }
console.log(setA.union(setB)); // Set { 1, 2, 3, 4, 5 }
console.log(setA.difference(setB)); // Set { 1, 2 }

 

② Array.prototype.toSorted(), toSpliced(), toReversed()

const arr = [3, 1, 2];
console.log(arr.toSorted()); // [1, 2, 3]
console.log(arr.toReversed()); // [2, 1, 3]
console.log(arr.toSpliced(1, 1, 9)); // [3, 9, 2]

 

③ Temporal API (날짜 다루기 개선 예정)

const now = Temporal.Now.plainDateTimeISO();
console.log(now.toString()); // 2025-02-18T12:34:56

 

 

---

✅ 4. 서버리스 & 엣지 컴퓨팅 트렌드

① Vercel Edge Functions

• Next.js와 완벽하게 통합
• 지역별 엣지 서버 실행 (fetch 최적화)
• Redis, KV 스토리지 연동

② Cloudflare Workers

• 초고속 글로벌 배포 (fetch 응답 속도 5~10ms)
• Durable Objects로 데이터 저장 가능

---

✅ 5. AI + JavaScript 통합 (LLM & AI 트렌드)

① LangChain.js 🧠

• OpenAI, Hugging Face 모델과 쉽게 연동
• npm i langchain 설치 후 사용 가능
• Next.js + AI 챗봇 개발 가능

import { OpenAI } from "langchain/llms/openai";
const model = new OpenAI({ openAIApiKey: "sk-..." });
const response = await model.call("안녕! 뭐 도와줄까?");
console.log(response);

② WebGPU (브라우저에서 GPU 활용 가능)

• navigator.gpu 사용 가능
• AI 모델 학습을 브라우저에서 실행

---

✅ 6. 최신 데이터베이스 트렌드 (JavaScript 친화적인 DB)

① Drizzle ORM 🌿

• TypeScript 친화적인 SQL ORM
• SQLite, PostgreSQL, MySQL 지원

import { drizzle } from "drizzle-orm/postgres-js";
import { sql } from "drizzle-orm";

const db = drizzle({ connectionString: "postgres://..." });
await db.execute(sql`SELECT * FROM users`);

② Turso (엣지 최적화된 SQLite)

• Vercel, Cloudflare에서 초고속 데이터베이스
• D1, Turso는 Next.js & Edge에서 자주 사용됨

---

✅ 7. 프런트엔드 UI 라이브러리 & CSS 트렌드

① shadcn/ui (Tailwind 기반 컴포넌트)

• Next.js + Tailwind CSS에서 빠르게 UI 구축 가능
• Radix UI 기반으로 접근성 좋음
• 설치 방법

npx shadcn-ui@latest init
npx shadcn-ui@latest add button

 

언제 다 해보지..? ㅋ