TwentyTwentyOne

✅ 42 School OAuth Provider 개요42 School은 OAuth 2.0 기반 인증을 제공합니다.개발자 포털에서 애플리케이션을 등록하고 클라이언트 ID와 클라이언트 시크릿을 발급받아야 합니다.🛠️ 설정 예시 (pages/api/auth/[...nextauth].ts)import NextAuth from "next-auth"import FortyTwoProvider from "next-auth/providers/42-school"export default NextAuth({ providers: [ FortyTwoProvider({ clientId: process.env.FORTYTWO_CLIENT_ID, clientSecret: process.env.FORTYTW..

갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편6 – 예약 알림 구현하기 (정해진 시간에 푸시 보내기)지난 글에서 Firebase Cloud Messaging(FCM) 을 이용해실시간 알림을 구현했죠?이번에는 예약 알림을 구현하여,정해진 시간에 푸시 알림을 보낼 수 있도록 만들어보겠습니다. 🔔⏰✅ 1. 예약 알림이 필요한 이유리마인더 앱: 사용자가 설정한 시간에 할 일을 알림기념일 알림: 특정 날짜에 맞춰 축하 메시지예약 작업 알림: 주기적으로 반복되는 작업 알림✅ 2. 예약 알림 구현 흐름단계 설명1. 권한 요청푸시 알림 권한을 먼저 받아야 함2. 예약 설정사용자가 원하는 시간에 알림 예약3. 알림 트리거예약 시간이 되면 푸시 알림 표시✅ 3. 필요 라이브러리 설치FCM과 더불어..

✅ Prisma + PostgreSQL 통합 가이드 – 타입 안전한 데이터베이스 접근법"SQL 직접 안 써도 된다? Prisma와 PostgreSQL 조합으로 완벽한 ORM 환경 구축."PostgreSQL의 강력함에 Prisma의 간결함을 더한 최적의 데이터 처리 방식입니다.🎯 Prisma와 PostgreSQL: 왜 이 조합이 좋은가?💪 강력한 이유 3가지PostgreSQL의 풍부한 데이터 타입 지원JSON, Array, Geospatial 등 다양한 타입을 Prisma가 완벽 지원강력한 성능과 안정성Rust 기반 Prisma 엔진과 PostgreSQL의 퍼포먼스 조합타입 안전성과 자동완성Prisma Client를 사용하여 SQL 직접 작성 없이 안정적 쿼리📦 1. 프로젝트 세팅💻 기본 설정mkd..

✅ Prisma는 ORM일까? – 개념부터 차별점까지 완전 해설"Prisma는 ORM이라고 불리지만, 기존 ORM과는 완전히 다릅니다."단순한 ORM을 넘어선 타입 중심 데이터 레이어, Prisma의 정체를 파헤쳐봅니다.🧠 먼저: ORM이란?**ORM(Object Relational Mapping)**이란객체지향 언어로 관계형 데이터베이스를 추상화하여 다룰 수 있게 해주는 도구입니다.예를 들어, user.name = '훈창' 같은 코드로 실제 SQL 쿼리 없이 DB 값을 수정하는 방식이죠.🧩 Prisma는 “ORM”인가?✅ 네, Prisma는 ORM입니다.그러나 단순한 ORM을 넘어서 현대적인 ORM이라 불릴 수 있습니다.Prisma는 전통적인 ORM처럼 객체와 DB를 연결하지만,그 접근 방식은 완전..

갓난애기도 배울 수 있는 React Native 가이드 ⏺️ 보너스편5 – Firebase Cloud Messaging으로 Push 알림 붙이기 (FCM 완전 정복)To-Do 앱의 마지막 마무리는?바로 알림 기능입니다.할 일을 등록했는데 까먹는다면 의미가 없겠죠?이제부터는 Firebase Cloud Messaging(FCM)을 이용해앱 외부에서도 사용자에게 알림을 보내는 기능을 만들어봅시다. 🔔✅ 1. FCM이란?Firebase에서 제공하는 푸시 알림 서비스iOS/Android 모두 지원React Native 앱에 쉽게 연동 가능사용 예:할 일 리마인더마케팅 메시지실시간 알림 등✅ 2. 설치 및 준비npm install @react-native-firebase/messagingnpx pod-instal..

🔄 NestJS Dynamic Modules – 유연한 모듈 설정의 끝판왕NestJS에서 **Dynamic Module(동적 모듈)**은 런타임에 모듈을 유연하게 구성할 수 있는 강력한 기능입니다.이번 글은 NestJS 공식 문서 Dynamic Modules를 기반으로한글 번역 + 실무 중심의 해설을 제공합니다.다양한 설정 값, 외부 API 키, 커스텀 기능을 모듈로 재사용하려면 Dynamic Module을 제대로 이해해야 합니다.✅ Dynamic Module이란?정적인 모듈은 @Module({ ... }) 안에 고정된 Provider와 Controller를 가집니다.Dynamic Module은 런타임에 옵션을 받아 모듈 내부 구성(Provider, Import 등)을 유연하게 정의할 수 있습니다.1️..

✅ Next.js에서 NextAuth.js 통합 설정 가이드 요약📁 폴더 구조별 대응1. pages 라우터 방식/pages/api/auth/[...nextauth].ts 또는 .js에서 NextAuth() 초기화기본적인 방법으로, 대부분의 예제 및 공식 가이드에서 사용// pages/api/auth/[...nextauth].tsexport default NextAuth({ providers: [ /* ... */ ], callbacks: { /* ... */ },})2. App Router (app/ 디렉토리, Next.js 13+)Route Handlers 방식 사용 (app/api/auth/[...nextauth]/route.ts)export const GET, POST를 명시적으로 선언해야 함..

🔐 Next.js App Router 인증 구현 가이드Next.js App Router 기반 애플리케이션에서 인증(Authentication) 기능을 구현하는 방법을 정리했습니다.NextAuth.js, 미들웨어, 세션 관리 등 실전에서 바로 사용할 수 있는 전략 위주로 구성되어 있습니다.✅ 1. 인증의 핵심 개념Authentication: 사용자의 신원을 확인 (로그인)Authorization: 권한 부여 (접근 제어)Session Management: 로그인 상태 유지 (쿠키, JWT 등)✅ 2. NextAuth.js로 인증 구현하기설치npm install next-auth환경변수 설정 (.env)NEXTAUTH_URL=http://localhost:3000NEXTAUTH_SECRET=long-ran..

📊 Next.js App Router 웹 애널리틱스 설정 완벽 가이드Next.js App Router를 사용하는 프로젝트에서 성능 모니터링, 사용자 분석, 오픈텔레메트리 관측까지 설정하는 방법을 정리합니다.실제 운영 환경을 고려해 실용적인 구성만 다룹니다.✅ 1. Web Vitals 성능 데이터 수집Next.js는 기본적으로 웹 퍼포먼스 지표(Core Web Vitals)를 수집할 수 있는 useReportWebVitals 훅을 제공합니다.사용법// app/_components/WebVitals.tsx'use client';import { useReportWebVitals } from 'next/web-vitals';export function WebVitals() { useReportWebVital..

📌 NestJS + Kubernetes & 마이크로서비스 배포: 실전 가이드21. NestJS OpenID Connect SSO 통합하기기업용 SaaS, 내부 시스템, 포털 서비스에서는 여러 서비스를 하나의 인증으로 접근할 수 있도록 SSO(Single Sign-On) 기능이 필수가 되었습니다.특히, OpenID Connect (OIDC) 기반 SSO는 OAuth 2.0을 확장하여 ID 토큰과 인증 정보를 통합할 수 있도록 해줍니다.이번 글에서는 NestJS에 OpenID Connect 기반 SSO를 통합하고, OAuth2 인증 서버와 연결하는 방법을 소개합니다. 🔐✅ 1. OpenID Connect(OIDC)란?OAuth 2.0 위에서 사용자 인증 기능을 추가한 프로토콜사용자 인증(로그인) + 사용..