쵸코쿠키의 연습장

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)란?얕은 복사는 새로운 객체를 생성하지만, 원본 객체와 동일한 메모리 참조를 공유하는 속성을 포함합니다. 즉, 얕은 복사본의 속성을 변경하면 원본 객체의 속성도 변경됩니다. 이는 객체의 최상위 수준에서만 복사..

React는 사용자 인터페이스 구축을 위한 인기 있는 JavaScript 라이브러리입니다. React의 핵심 기능 중 하나는 상태 관리와 효율적인 컴포넌트 재렌더링입니다. 그러나 일부 경우에는 컴포넌트를 재렌더링하는 것이 계산 비용이 많이 들고 사용자 인터페이스를 느리게 만들 수 있습니다. 이 문제를 해결하기 위해 useMemo() 훅이 유용합니다.    useMemo() 훅이란?useMemo() 훅은 React에 내장된 훅으로, 비용이 많이 드는 계산을 메모이제이션하여 React 애플리케이션의 성능을 최적화할 수 있습니다. 메모이제이션은 함수 호출의 결과를 입력 매개변수에 따라 캐싱하는 과정입니다. 즉, 함수의 입력 매개변수가 동일하게 유지되면 함수는 다시 계산하지 않고 동일한 출력을 반환합니다.  u..

React Native는 JavaScript와 React 라이브러리를 사용하여 크로스 플랫폼 모바일 앱을 개발하는 데 널리 사용되는 프레임워크입니다. 이 글에서는 React Native 프로젝트를 위한 CI/CD 파이프라인을 설정하는 방법에 대해 다룹니다. 이를 통해 코드 작성과 사용자에게 제공되는 시간 사이를 줄일 수 있습니다.  CI/CD 파이프라인이란?개요지속적 통합(Continuous Integration)과 지속적 전달/배포(Continuous Delivery/Deployment, CI/CD)는 코드 작성과 배포 사이의 시간을 줄이는 것을 목표로 하는 소프트웨어 개발 방법론입니다. 이 방법론은 코드 변경 사항을 자동으로 빌드, 테스트 및 배포하는 과정을 포함합니다. 이를 통해 개발자는 새로운 기..

React, Angular, Vue.js는 복잡한 싱글 페이지 웹 애플리케이션(SPA)을 구축하는 데 사용되는 세 가지 주요 JavaScript 프레임워크입니다. 이 프레임워크들은 모두 공통적인 목표를 가지고 있지만, 기술적 복잡성, 사용 방법, 기능 등에서 많은 차이를 보입니다. 이 글에서는 React, Angular, Vue.js의 차이를 기술적 복잡성 측면에서 상세히 분석하겠습니다.  React개요React는 Facebook에서 개발한 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다. React는 컴포넌트 기반 아키텍처를 기반으로 하여, 웹 페이지를 작고 재사용 가능한 컴포넌트로 구성합니다. React는 간결함과 유연성으로 유명하며, 배우기 쉽고 사용하기 편리합니다. 기술적 특징가..

이번 글에서는 Angular V15의 새로운 기능과 업데이트에 대해 깊이 있게 다뤄보겠습니다. Angular 팀에서 2022년 11월 16일에 출시한 이 버전은 개발자들에게 많은 기대를 모으고 있습니다. Angular V15는 성능 향상과 개발 경험을 개선하기 위해 다양한 변화를 가져왔습니다. 이제 Angular V15의 주요 기능과 업데이트를 살펴보고, V14에서 V15로 업그레이드하는 방법까지 알아보겠습니다.  Angular V15의 새로운 기능과 업데이트독립형 API (Standalone API)Angular V15의 주요 변화 중 하나는 독립형 API의 도입입니다. 이전에는 NgModules에 의존하여 애플리케이션을 개발했지만, 이제는 독립형 API를 통해 NgModules 없이도 애플리케이션을 ..

JavaScript에서 배열은 데이터를 저장하고 조작하는 데 유용한 방법입니다. 그 중에서도 map() 메서드는 배열의 각 요소를 반복하면서 함수로 처리할 수 있는 내장 함수입니다. 이 메서드는 호출된 배열의 모든 요소에 대해 제공된 함수를 호출한 결과를 포함하는 새 배열을 만듭니다. 이 기사에서는 map() 메서드의 문법, 기능, 사용 사례 등을 탐구할 것입니다.  문법map() 메서드는 배열에서 호출되며 콜백 함수를 인수로 받습니다. 콜백 함수는 처리 중인 현재 요소, 현재 요소의 인덱스 및 map()이 호출된 배열을 매개 변수로 받습니다. map() 메서드의 문법은 다음과 같습니다:array.map(callback(currentValue, index, array)) 여기서 array는 map() 메..