쵸코쿠키의 연습장

TanStack Start란 무엇인가? Next.js와 차이점, Server Function, SSR까지 한 번에 정리 (2026 최신 가이드)

TanStack Start: 복잡함을 덜어내고 본질에 집중한 DX 중심 Full-Stack React Framework (2026) “Type-safe하고, server-first이며, highly performant한 React framework를, 무거운 abstraction 없이 만들 수는 없을까?” 이 질문은 생각보다 묵직하다. Framework가 복잡해질수록 개발자는 기능을 잃는 게 아니라, 방향 감각을 잃는다. TanStack Start는 바로 그 지점을 건드린다. TanStack Start란 무엇인가?먼저 한 줄 요약부터 하자.TanStack Start는 DX(Developer Experience)에 초점을 둔 Full-Stack React framework다. 기본적으로 다음을 제공한..

JavaScript 프로젝트 폴더를 열어본 순간, 이유 없이 한숨부터 나온 적 있지 않나요? 커피가 부족해서라기보다는… 뭔가 더 근본적인 피로감. 여기저기 널린 node_modules, 서로 싸우는 config 파일들, Webpack은 Babel이랑 말이 안 통하고 Jest는 조용히 실패 로그만 남기고.예전에 새벽까지 Discord에서 다른 개발자들이랑 떠들던 기억이 나요. 모니터 불빛만 번쩍이고, 노트북 팬은 비행기 이륙 직전처럼 돌아가고, 누군가 툭 던지듯 말했죠. “이거 말고 다른 방법 없나?”그 질문, 반쯤 농담이고 반쯤 절규였던 그 한마디가—사실상 Bun.js의 출발점입니다. Bun이 왜 등장했을까JavaScript가 이렇게까지 복잡해질 줄은… 아무도 예상 못 했죠.1995년, 처음엔 그냥 브..

“JavaScript world”가 진짜로 shell-shocked… React2Shell 이야기요즘 JavaScript world 쪽 소식 좀 본 사람이라면, 솔직히 한 번쯤은 “어… 이거 진짠가?” 싶었을 거예요. 갑자기 10.0 maximum pwnage급, 그러니까 사실상 “끝판왕” 수준의 critical vulnerability가 발견됐다는 얘기가 터졌거든요.문제의 중심은 ReactJS framework—그중에서도 server components의 Flight protocol 코드 쪽입니다.이게 왜 더 무섭냐면요. 흔히 보는 “누가 쓰는지 알 수도 없는 플러그인 하나”가 아니라는 점이에요. 이건 이미 millions of modern React apps에 깊게 섞여 있고, Next.js 같은 대..

Ripple: Compiler‑Driven TypeScript UI Framework (한국어 리뷰·해설, 2025) TL;DRRipple은 TypeScript‑first 철학의 compiler‑driven view library로, JSX Superset을 기반으로 합니다.전체적인 인상은 React × Svelte에 SolidJS의 느낌을 더한 조합. 템플릿에서 expression뿐 아니라 statement(if, for)를 바로 쓰고, **track() + @**로 reactivity를 단순하게 표현합니다.fine‑grained DOM updates, component‑local scoped CSS, Prettier/ESLint/VS Code/TypeScript 등 day‑zero DX가 준비되어 있..

React Comp 2025: 이번엔 진짜 고쳤나? 지난주, 1년에 한 번 찾아오는 제 최애 의식이 돌아왔습니다. 빚으로 레버리지 잔뜩 올린 crypto 트레이더들이 margin call 맛보는 구경? 그거 말고요. 저는 매년 React Comp를 “독하게 몰아보기” 합니다. 스펠트 Snuggy를 칭칭 두르고, “올해도 새로운 API로 지난 API 문제 다 해결했다”는 발표를 조용히 지켜보죠.올해는 의외였습니다. 말뿐이 아니라 손에 잡히는 변화가 보였거든요. 그래서 오늘은—요즘 이 채널이 AI 얘기가 많다는 거 알지만—React의 골치 아픈 지점들을 다시 짚어 보며, React Comp 발표가 실제 개발 현장에 변화를 가져올지 차분히 따져봅니다. 날짜는 2025년 10월 17일. 방금 막 업데이트된 Co..

Ambient Audio Mixer — Vanilla JavaScript로 만드는 오디오 믹서 완전 가이드 (Tailwind, Presets, Timer, Vercel 배포까지)이 글은 YouTube에 공개된 전체 프로젝트 흐름을 토대로, Vanilla JavaScript + HTML5 Audio API로 Ambient 오디오 믹서를 처음부터 끝까지 만드는 과정을 한국어 감성으로 풀어쓴 실전 가이드입니다. React / Next.js로만 달려오다 잠깐 숨 고르듯, DOM과 class 기반 OOP, 모듈 구조의 기본기를 탄탄히 다져보죠. 실습용 template와 final 구조, 그리고 Vercel 배포까지 한 번에 정리합니다. 왜 이 프로젝트인가?최근엔 framework 중심 개발이 보편화되어, sta..

자바스크립트 세상에 닥친 최악의 하루: npm이 털린 날어제, 전 세계 자바스크립트 개발자들이 동시에 라떼를 뿜을 뻔한 사건이 벌어졌습니다. 웹 생태계를 지탱하는 핵심 도구인 npm이 역사상 가장 큰 규모의 공급망 공격을 당한 거죠. 매주 수십억 번 다운로드되는 수많은 패키지가 갑자기 hello world 대신 낯선 사람의 crypto wallet에 인사를 하고 있었습니다. 농담처럼 들리지만, 어제는 현실이었습니다.도대체 무슨 일이 일어난 걸까요? Chalk이 무너지자 도미노가 쓰러졌다사건의 중심엔 Chalk이 있었습니다. 사실 하는 일은 단순합니다. CLI 출력에 예쁜 색을 입히는 유틸리티일 뿐이죠. 하지만 다운로드 수는 수억 회, 의존성으로 끼어 있는 곳은 수도 없이 많습니다. debug, ansi..

누가 JavaScript를 소유할까?—2025년, 외면해온 언어 전쟁 풀스토리TL;DR: **“JavaScript”**라는 단어는 현재 Oracle의 trademark다. 반면 언어 자체는 Ecma International 산하 TC39가 표준화한 ECMAScript로 발전한다. Ryan Dahl(Node.js 창시자, Deno 설립자)은 2022년부터 공개적으로 trademark 반환을 요구했고, 무시되자 2024년 11월 USPTO/TTAB에 등록 취소를 청구했다. 2025년 현재 discovery 단계로 들어갔고, 2026년 여름 심리—2027년 1월 전후 최종 결정이 전망된다. 그 사이 우리는 계속 코드를 쓴다. 단어 하나가 거는 그림자를 의식한다.한 줄 정리: “JavaScript는 모두의 언어..

리액트 전쟁 한복판에서 살아남기: 지금 프론트엔드에 무슨 일이?요즘 AI가 사람들 일자리 하나씩 빼앗고 있는 거, 체감 되시죠? 그런데 정작 리액트 개발자들은 그 사실조차 제대로 인식 못 하고 있어요. 왜냐고요? 자기들끼리 지금 아주 진지하게 싸우느라 바쁘거든요. “리액트는 원래 이래야 해!” vs “아니, 지금 시대엔 이게 맞아!”… 서로 목소리 높이며 말이죠. 옛날 리액트는 참 순수했지초창기 리액트는 상태만 관리하면 UI를 자동으로 업데이트해주는 단순하고 직관적인 라이브러리였어요.DOM을 직접 다루지 않아도 되니 개발자 입장에선 참 편했죠.지금은 기능이 늘어났지만, 동시에 복잡함도 따라왔어요. 리액트를 처음 만났을 땐 진짜 감동이었어요. “어, 이거면 UI 개발 할만 하네?” 상태(state)만 잘..

Next.js 보안 구멍 사건: 나만 멘붕인가요, 아니면 다 같이 놀란 건가요?진짜 솔직히 말하면, 지난 금요일은 그냥 '그날'이었습니다. 아무 생각 없이 평소처럼 코드 푸시하고 배포했는데, 갑자기 트위터가 난리 나고, 슬랙에도 경고가 쏟아지기 시작했죠. "Next.js에서 심각한 보안 취약점 발견!" 진짜요? 금요일인데요?배포하고 집 가는 길에 치맥 생각하면서 룰루랄라했는데, 알고 보니 내 앱이 뚫릴 수도 있는 상황이었다니. 진짜 웃프죠.  도대체 무슨 일이 있었던 거야?Next.js에서 심각도 9.1 수준의 보안 취약점이 발견됨공격자가 인증 없이 앱에 접근할 수 있는 구조적 결함이었음단순한 요청 헤더 조작만으로 프리미엄 기능을 사용할 수 있었음개발자 입장에서 심리적 충격이 컸던 사건임 정리하자면, 이..

타입스크립트 10배 빨라졌대요 — 진짜야? 장난 아냐?요즘 개발자 커뮤니티 좀 둘러보면요, 다들 난리예요. "타입스크립트가 10배나 빨라졌대!"라는 이야기로요. 처음엔 저도 반신반의했죠. 그냥 또 뻔한 홍보 아닌가 싶었거든요. 그런데 알고 보니까... 이거 꽤 괜찮은 변화더라고요. 어떤 분은 농담처럼 "이제 타입스크립트로 에어컨도 만들 수 있겠네?" 하시더라고요. 웃기지만, 은근 공감됐어요.  컴퓨터는 코드 읽는 걸 어떻게 할까?컴퓨터는 0과 1만 이해하기 때문에 우리가 쓴 코드를 바로 실행할 수 없다.그래서 코드를 기계어로 바꾸는 '컴파일' 과정이 필요하다.Rust나 Go는 미리 컴파일해서 실행하고, Python이나 JavaScript는 코드 실행 시 바로 읽으며 작동한다.요즘은 두 방식을 혼합해 쓰는..

마이크로소프트가 또 한 건 했네요: 타입스크립트, 이제 Go로 새로 만든다?2025년 3월 12일 — 어제 아침, 커피 마시다 말고 뉴스를 보고 눈이 휘둥그레졌어요. 마이크로소프트가 우리 모두가 애용하는 **TypeScript(타입스크립트)**를 싹 뜯어고친다네요. 그런데 더 놀라운 건... 새로 쓰는 언어가 C++도 아니고, Rust도 아니고, 바로 구글의 Go라는 사실!진짜 처음엔 장난인 줄 알았어요. 마이크로소프트가 구글 언어를 쓴다니, 무슨 일이야 싶었죠. 그런데 천천히 내용을 읽어보니까, "어라? 이거 좀 괜찮은데?" 싶더라고요.   왜 타입스크립트를 다시 쓰려는 걸까?타입스크립트 컴파일러가 타입스크립트로 작성되어 있어 구조상 성능 한계가 있음저수준 성능 최적화가 어려워 대형 프로젝트에서 느린 ..

새로운 프레임워크 등장! 과연 혁신일까?개발을 하다 보면 “새로운 프레임워크 또 나왔어? 이제 좀 그만하지?”라는 생각이 들 때가 있죠. 근데 그럴 때마다 꼭 누군가 더 빠르고 더 강력하다는 기술을 들고 나타납니다. 이번에는 **ByteDance(바이트댄스)**가 새로운 크로스플랫폼 개발 프레임워크 **Lynx(링스)**를 공개했어요. 이 Lynx, 그냥 그런 기술이 아니라 Rust 기반의 듀얼 스레드 UI 렌더링 엔진까지 탑재해서 성능을 확 끌어올렸다고 합니다.그런데 이게 진짜 React Native나 Flutter를 뛰어넘을 수 있을까요? 괜히 기대만 잔뜩 하게 만든 후 실망을 안겨주는 건 아닌지 직접 파헤쳐 봅시다.   Lynx가 뭐가 특별한데?Lynx는 기본적으로 크로스플랫폼 앱을 만들기 위한 오..

Svelte라는 자바스크립트 프레임워크, 들어본 적 있나요? 요즘 개발자들 사이에서 점점 인기 있는 이유가 있어요. 간단하고 강력한 기능 덕분인데요, 특히 이번에 나온 Svelte 5에서 룬(Runes)이라는 새로운 기능이 추가되면서 큰 변화가 생겼죠. 이제 리액티브 데이터 처리할 때 달러($) 기호를 안 써도 돼요. 이게 무슨 말이냐면, 코드가 훨씬 간단해지고 깔끔해졌다는 거죠. 복잡하게 고민할 필요 없이 더 직관적으로 작업할 수 있게 됐다는 거예요.오늘은 Svelte의 룬이 뭔지, 어떻게 작동하는지, 그리고 왜 이렇게 좋은지 한 번 알아볼게요. Svelte가 왜 이 기능을 도입했는지, 기존 방식과 뭐가 다른지도 함께 이야기해볼까요?  Svelte 5의 룬(Runes)은 뭐야?룬(Runes)은 Svel..

Node.js 개발 환경에서 효율적인 빌드, 테스트, 배포 과정을 구현하기 위해 필수적인 요소 중 하나가 package.json에 정의된 npm 스크립트입니다. 개발자는 반복적인 작업을 자동화하고, 프로젝트 워크플로우를 간소화하며, 작업의 일관성을 유지하기 위해 npm 스크립트를 적극적으로 활용할 수 있습니다. 본 글에서는 npm 스크립트의 기본 개념과 구조, 사용법, 활용 사례에 대해 깊이 있게 알아보고, 이를 통해 개발 프로세스를 어떻게 효율적으로 만들 수 있는지 설명합니다.   1. NPM 스크립트란 무엇인가?npm 스크립트는 Node.js 프로젝트에서 반복적으로 발생하는 다양한 작업을 자동화하기 위해 사용됩니다. package.json 파일의 scripts 필드에 명령어를 정의함으로써, 별도의 빌..

웹 개발에서 DOM(Document Object Model)은 매우 중요한 개념입니다. DOM은 HTML이나 XML 문서의 구조를 정의하며, JavaScript와 같은 프로그래밍 언어가 이 구조와 상호작용하고, 이를 조작할 수 있도록 합니다. DOM을 이해하고 활용하면 웹 페이지의 요소들을 자유자재로 조작할 수 있게 되어, 보다 동적이고 사용자 친화적인 웹 애플리케이션을 개발할 수 있습니다.  DOM이란 무엇인가?DOM은 HTML 및 XML 문서를 트리 구조로 표현하는 인터페이스입니다. DOM을 통해 프로그래밍 언어는 문서의 내용과 구조를 조작할 수 있습니다. 예를 들어, JavaScript를 사용하여 페이지에 새로운 요소를 추가하거나, 특정 요소의 텍스트를 변경하거나, 사용자의 마우스 클릭이나 키보드 ..

현대 AI 애플리케이션의 중요한 흐름 중 하나는 애플리케이션이 AI 서비스를 호출하고 그 결과를 데이터베이스에 저장한 후, SQL, JSON, REST 등을 통해 데이터를 분석하고 처리하는 것입니다. Oracle 데이터베이스 내에서 JavaScript 프로그램을 실행하여 Hugging Face 또는 Cohere AI 모델을 호출하고 그 결과를 데이터베이스에 저장하는 방법을 알아보겠습니다. 이 과정에서 모든 작업은 무료로 이루어지며, SQL, JSON, REST 등을 통해 동일한 데이터를 접근할 수 있는 방법도 제공합니다.  Oracle 데이터베이스에서 AI 호출의 이점Oracle 데이터베이스는 JavaScript 런타임 엔진을 데이터베이스 자체 내에 포함하고 있기 때문에, 데이터베이스에서 직접 AI 서비..

리액티브 프로그래밍은 한때 큰 인기를 끌었지만, SQL 데이터베이스에 접근하는 순간 리액티브 특성이 사라지는 문제로 인해 그 장점을 충분히 활용하지 못하는 상황이 있었습니다. 기존 애플리케이션과 새로운 애플리케이션에서 SQL 데이터베이스가 중요한 역할을 담당하는 만큼, 리액티브 프로그래밍의 전체 이점을 누리기는 어렵고 복잡성이 높아지는 단점이 있었습니다.하지만 최근 몇 년간 상황은 크게 달라졌습니다. PostgreSQL, MySQL, Microsoft SQL Server, Oracle과 같은 인기 있는 데이터베이스에 대해 리액티브 드라이버가 제공되기 시작했으며, 이를 기반으로 다양한 프레임워크에서 리액티브 API를 제공하고 있습니다. 본 글에서는 대표적인 리액티브 데이터베이스 액세스 솔루션인 Hibern..

자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 그러나 언어의 특성상 발생할 수 있는 몇 가지 미묘한 동작들이 있으며, 그 중 하나가 바로 Temporal Dead Zone (TDZ)입니다. TDZ는 변수가 선언된 이후, 초기화되기 전까지의 시점을 가리키며, 이 시점에서 변수를 참조하려고 하면 예기치 않은 오류가 발생할 수 있습니다. 본 글에서는 Temporal Dead Zone이 무엇인지, 왜 발생하는지, 그리고 관련된 일반적인 실수를 피하는 방법을 살펴보겠습니다.    Temporal Dead Zone이란?Temporal Dead Zone은 변수가 선언되었으나 초기화되기 전까지의 구간을 의미합니다. 자바스크립트에서 let이나 const 키워드를 사용하여 변수를 선언하면,..

JavaScript에서 객체를 복사할 때 사용하는 두 가지 주요 방법인 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 자세히 알아보겠습니다. 객체 복사는 코드 작성 시 자주 사용되는 기능으로, 이를 제대로 이해하는 것은 객체 조작과 메모리 관리를 효율적으로 수행하는 데 중요합니다. 이번 글에서는 얕은 복사와 깊은 복사의 차이점을 설명하고, 각각의 장단점 및 사용 사례를 통해 언제 어떤 복사 방법을 사용하는 것이 적절한지 알아보겠습니다.  얕은 복사(Shallow Copy)란?얕은 복사는 새로운 객체를 생성하지만, 원본 객체와 동일한 메모리 참조를 공유하는 속성을 포함합니다. 즉, 얕은 복사본의 속성을 변경하면 원본 객체의 속성도 변경됩니다. 이는 객체의 최상위 수준에서만 복사..