JavaScript/Next15 Drizzle ORM Drizzle ORM(https://orm.drizzle.team/)이란? Drizzle ORM - next gen TypeScript ORM.Drizzle ORM is a lightweight and performant TypeScript ORM with developer experience in mind.orm.drizzle.team **TypeScript 기반의 초경량 SQL ORM(Object-Relational Mapping)**이야.👉 Prisma, TypeORM보다 가볍고 빠르면서, TypeScript 타입 안정성이 뛰어남!👉 Next.js, Neon, PlanetScale 등 서버리스 환경과 궁합이 좋음. 초경량 ORM → Prisma보다 가볍고 빠름TypeScript 기반 → 완벽한 .. 2025. 2. 12. Neon Neon(https://neon.tech/)이란? Neon Serverless Postgres — Ship fasterThe database you love, on a serverless platform designed to help you build reliable and scalable applications faster.neon.techNeon은 서버리스 PostgreSQL 데이터베이스 서비스.Vercel, Next.js, Edge Functions와 완벽한 조합으로 빠르고 자동 확장 가능한 PostgreSQL을 제공. 서버리스 PostgreSQL → 자동 확장 & 비용 절감 (사용량이 없으면 리소스 차단)Branching 지원 → Git 브랜치처럼 DB를 분기(branch)해서 테스트 가능초고속 .. 2025. 2. 12. Clerk Clerk이란?Next.js, React, Vue 등에서 간편하게 인증(Authentication) 기능을 추가할 수 있는 서비스Firebase Auth, Supabase Auth 같은 인증 솔루션과 비슷하지만, Next.js와의 강력한 통합 기능을 제공Next.js와 완벽하게 연동 가능 (App Router & Pages Router 지원)소셜 로그인 지원 (Google, GitHub, Facebook, Discord 등)비밀번호 없는 로그인 (Magic Link, OTP 지원)2FA (Two-Factor Authentication) 지원백엔드 없이도 작동 (완전한 BaaS - Backend as a Service)RBAC (Role-Based Access Control) 지원 → 관리자/유저 역할 설.. 2025. 2. 12. ShadCN/UI & Lucide React 사용하기 ShadCN/UI(https://ui.shadcn.com/docs/installation/next)란? Next.jsInstall and configure Next.js.ui.shadcn.comShadCN/UI는 Next.js와 React에서 최신 UI 컴포넌트를 쉽게 사용할 수 있도록 도와주는 Tailwind CSS 기반의 UI 라이브러리 Next.js + Tailwind CSS에 최적화됨.Radix UI 기반 → 접근성과 모던한 디자인 제공.컴포넌트가 설치형 → 필요한 컴포넌트만 직접 추가 가능.완전한 커스터마이징 가능 → 코드가 내 프로젝트 내부에 포함됨.TypeScript 지원.설치하기npx shadcn-ui@latest init // npm을 사용 중이라면bunx --bun shadcn@late.. 2025. 2. 12. [Next] next 시작하기(폴더 구조, use client와 server) Next 시작하기(https://nextjs.org/) Next.js by Vercel - The React FrameworkNext.js by Vercel is the full-stack React framework for the web.nextjs.org// 최신 버전 확인하기bunx create-next-app@latest --version// 최신 버전 설치하기bunx create-next-app@latestnext 폴더 기본 구조my-next-app/├── app/│ ├── layout.tsx # 공통 레이아웃│ ├── page.tsx # 홈 페이지│ ├── features/ # 기능별 폴더│ │ ├── auth/ # 인증 관련 폴더│ │ │.. 2025. 2. 12. [Next/SpringBoot] Next와 Spring 연동하기 CORS(Cross-Origin Resource Sharing)란?교차 출처 리소스 공유를 의미한다. 브라우저가 다른 출처의 리소스를 로딩할 수 있도록 서버가 허가하는 HTTP 헤더 기반의 메커니즘이다.먼저 spring boot에 configuration을 만들어준다.package com.findMyBook.backend.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Confi.. 2025. 1. 24. 이전 1 2 다음