JavaScript82 ESM(ECMAScript Module)과 CJS(CommonJS)의 차이점 1) 요약ESM: 표준 모듈 시스템. import/export, 정적 분석 가능, 트리 셰이킹 유리, Top-Level await 가능, 브라우저/Node 공통 표준.CJS: Node 전통 모듈. require/module.exports, 런타임 로딩(동적), 간편하지만 정적 분석·트리 셰이킹에 불리.실무적으로:새 프로젝트·프론트엔드·라이브러리는 ESM 권장.레거시 Node 코드나 간단한 스크립트는 CJS가 편할 수 있음.2) 문법 비교ESM// math.js (또는 .mjs / ESM 프로젝트면 .js도 가능)export const add = (a, b) => a + b;export default function mul(a, b) { return a * b; }// 사용처import mul, { add.. 2025. 9. 25. VIBE clone(3) 15 Theme1) 테마 컬러 교체 (globals.css)app/globals.css의 CSS 변수 블록만 갈아끼우면 전체 테마가 바뀝니다. 아래 예시는 노란/오렌지 톤(클로드풍). 마음에 드는 팔레트가 있다면 값만 바꿔 쓰세요./* === Theme tokens === */:root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; /* primary: warm yellow/orange */ --primary: 40 96% 50%; .. 2025. 9. 16. VIBE clone(2) 05 AI Jobs — AI 백그라운드 잡AI 제공자 선택(권장: OpenAI)과 요금/레이트리밋 특성 이해API 키 발급 → .env 설정Inngest Agent Kit 설치 및 AI 에이전트(Agent) 생성프론트 입력값 → tRPC mutation → Inngest 함수 → 에이전트 실행 흐름간단한 요약 에이전트와 코드 생성 에이전트 예제로 동작 확인1) 모델/프로바이더 선택 가이드(튜토리얼 관점)OpenAI(권장)장점: 안정성, 합리적인 레이트리밋(짧은 리셋), 코딩 성능 우수튜토리얼에서는 GPT-4.1을 주력으로 사용Anthropic(Claude 3.5/4)장점: 코딩 품질 매우 우수단점: 레이트리밋이 매우 엄격, 리셋까지 오래 걸려 학습/데모에 비적합xAI(Grok)지원은 되지만 경험이 적음(.. 2025. 9. 16. VIBE clone(1) 소개 & 데모단 한 문장만으로 다음 스타트업을 만든다고 상상해 보세요. Vibe는 그걸 가능하게 하는 AI 기반 앱 빌더입니다. 이 강의에서 여러분은 이걸 직접 만드는 법을 배우게 됩니다. 간단한 프롬프트를 입력하고 제출해 보죠.곧 보게 될 결과는 보통 Lovable, Replit, Bolt 같은 고급 툴에서 기대하는 수준입니다. 하지만 이 튜토리얼에서는 직접 구현하는 방법을 배웁니다. 결과물은 완전히 동작하는 Netflix 스타일의 홈 화면이며, 전적으로 AI가 생성합니다. 프리뷰에서 바로 전체 앱을 탐색할 수 있고, 레이아웃, 인터랙션, 모달 및 즐겨찾기까지 모두 정상 동작합니다. 단지 ‘Netflix처럼 보이는’ 수준이 아니라, 정말 그렇게 동작합니다.프리뷰 상단에는 라이브 URL이 있어 새 탭에서.. 2025. 9. 16. Prisma Next.js와 PrismaPart I: Prisma의 정의와 Next.js와의 시너지1.1. Prisma 정의: 차세대 ORM(Next-generation ORM)Prisma는 Node.js 및 TypeScript 애플리케이션을 위해 데이터베이스와의 상호작용을 근본적으로 단순화하도록 설계된 차세대 ORM(Object-Relational Mapper)입니다. 기존의 전통적인 ORM들이 직면했던 고질적인 문제, 즉 "객체-관계 임피던스 불일치(object-relational impedance mismatch)"를 해결하는 데 중점을 둡니다. 이 문제는 애플리케이션 개발자가 데이터를 객체(Object)의 형태로 사고하는 반면, 관계형 데이터베이스는 데이터를 테이블과 행의 형태로 저장하는 근본적인 차이에서 발.. 2025. 9. 13. tRPC, Next.js, TanStack Query 설정 가이드 tRPC, Next.js, TanStack Query를 활용한 타입-세이프 풀스택 애플리케이션 설정 가이드파트 I: tRPC 패러다임 - API 개발의 새로운 시대현대 웹 개발에서 타입스크립트는 프론트엔드와 백엔드 모두에서 표준으로 자리 잡았습니다. 그러나 이 두 세계가 만나는 API 경계에서는 종종 타입 안전성이 무너지는 '틈'이 발생합니다. 본 가이드는 이 문제를 해결하기 위해 등장한 tRPC(TypeScript Remote Procedure Call)의 개념을 심도 있게 분석하고, 이를 Next.js 및 TanStack Query와 결합하여 실제 프로덕션 환경에서 견고하고 확장 가능한 풀스택 애플리케이션을 구축하는 방법을 아주 상세하게 안내합니다.섹션 1: tRPC 소개: 타입-세이프의 간극을 해결.. 2025. 9. 11. JavaScript 컬렉션 (Array, Object, Set, Map) JavaScript 컬렉션자바스크립트에서 올바른 데이터 구조를 선택하는 것은 효율적이고 가독성 높은 코드를 작성하는 핵심입니다. 이 가이드는 네 가지 주요 컬렉션 자료형(Array, Object, Set, Map)의 특징과 주요 메서드를 정리하고, 실제 시나리오에 맞는 최적의 자료형을 선택하는 방법을 안내합니다.1. Array: 순서가 있는 데이터 목록배열은 순서가 있는 값의 목록을 저장하는 데 가장 기본적인 자료형입니다. 강력한 내장 메서드를 통해 데이터 목록을 순회하고 변환하는 데 최적화되어 있습니다.✔ 언제 사용해야 할까요?리스트 처리: API 응답으로 받은 데이터 목록처럼 순서가 중요한 데이터를 다룰 때정렬 및 필터링: sort(), filter() 등 강력한 메서드를 활용해 데이터를 가공해야 할.. 2025. 9. 11. email.js로 backend 없이 메시지 전달 받기 email js 사용하기 Send email directly from your code | EmailJSNo server side code required. Add static or dynamic attachments, dynamic parameters, captcha code and more. Start with our free tier!www.emailjs.com접속 후 회원가입 Add New Service 선택원하는 이메일 선택 후 작성.Service ID 메모장에 복사 후,Connect Account 하면, 연결됨. (연결이 안 되면 다시 시도하면 됨.)연결 후 연결한 이메일에서 인증.사이드 탭에서 Templates 선택 후 Create New TemplateTo Email에 자신의 이메일 적고 .. 2025. 9. 9. Node.js 입력/출력 정리 1. 입력 방식(A) readline 모듈 (줄 단위 이벤트 방식)표준 입력을 줄 단위로 처리할 수 있음한 줄씩 들어오는 입력을 배열에 모아 두고, close 이벤트에서 처리const readline = require('readline');const rl = readline.createInterface({ input: process.stdin, output: process.stdout,});let input = [];rl.on('line', function (line) { // 한 줄 입력 처리 input.push(line.trim());}).on('close', function () { // 입력이 끝났을 때 실행 console.log(input); process.exit(0); // 종료.. 2025. 8. 24. 이전 1 2 3 4 ··· 10 다음
