TwentyTwentyOne

💡 NestJS Provider 완전 정복 – 의존성 주입과 서비스 아키텍처 설계의 핵심NestJS에서 **Provider(프로바이더)**는 의존성 주입(Dependency Injection, DI)의 핵심 구성 요소입니다.이 글은 NestJS 공식 문서의 Providers를 기반으로 한글로 번역하고, 실무 경험을 녹여 해설한 블로그형 가이드입니다.NestJS 애플리케이션의 80% 이상은 “서비스 로직”을 Providers로 처리합니다.✨ Provider란 무엇인가?NestJS에서 Provider는 값을 주입해주는 객체 또는 클래스입니다.대표적으로 Service 클래스들이 Provider로 작동하며, @Injectable() 데코레이터를 통해 Nest의 DI 컨테이너에 등록됩니다.import { Inj..

🚀 Next.js App Router: 레이아웃과 페이지 구조 완벽 가이드Next.js의 App Router는 React 기반 웹 애플리케이션에서 페이지 구조와 UI 레이아웃을 파일 시스템 기반으로 구성할 수 있게 해줍니다. app/ 디렉토리 내부의 폴더와 파일 이름이 곧 라우팅 경로가 되며, 중첩 라우팅과 레이아웃 공유가 매우 자연스럽고 직관적으로 구현됩니다.📄 페이지(Page)란?page.tsx 또는 page.js 파일은 특정 경로에 표시될 콘텐츠를 담당합니다.예시 1 – 루트 경로// app/page.tsxexport default function Home() { return 홈 페이지;}→ / 경로에 대응됩니다.예시 2 – 서브 경로// app/dashboard/page.tsxexport d..

✅ NextAuth.js – TypeScript에서 안전하게 사용하기NextAuth.js는 자체적인 TypeScript 타입 정의를 제공하여개발자가 IDE에서 자동완성 및 타입 안정성을 확보하면서 코드를 작성할 수 있도록 돕습니다.📦 기본 사용법🔹 어댑터(Adapter) 타입 지정 예시import type { Adapter } from "next-auth/adapters"function MyAdapter(): Adapter { return { // 필수 어댑터 메서드 구현 }}자바스크립트에서도 JSDoc을 통해 타입 힌트를 받을 수 있습니다:/** @return { import("next-auth/adapters").Adapter } */function MyAdapter() { return..

React + React Router로 싱글 페이지 앱(SPA) 만들기React로 웹 앱을 만들다 보면,다른 페이지로 이동하고 싶을 때마다 새로고침되는 문제를 겪게 됩니다.이 문제를 해결해주는 핵심 도구가 바로 React Router입니다.이번 글에서는 React Router v6 기준으로,싱글 페이지 애플리케이션(SPA)을 만드는 기본적인 라우팅 구조와중첩 라우트, 동적 라우트, 레이아웃 구성 방법까지 전부 정리합니다.✅ React Router란?React Router는 SPA 환경에서 클라이언트 사이드 라우팅을 가능하게 해주는 라이브러리입니다.브라우저 주소는 바뀌지만, 페이지 전체가 새로고침되지 않고 컴포넌트만 전환됩니다.🛠 설치 방법npm install react-router-dom🗺 기본 라우..

갓난애기도 배울 수 있는 React Native 가이드 ③ – 버튼, TextInput, 이벤트 핸들링 완전정복드디어 앱과 사용자 사이의 “대화”가 시작됩니다!이번 글에서는 버튼을 누르거나 텍스트를 입력하면 앱이 반응하는 기본 인터랙션을 실습해보겠습니다.이 기능들만 있어도 간단한 계산기, 로그인 창, 메모 앱을 만들 수 있어요.✅ 1. 버튼 만들기 – Button과 TouchableOpacity✅ 가장 기본적인 버튼import { Button } from 'react-native'; alert('버튼이 눌렸습니다!')}/>title: 버튼에 보일 텍스트onPress: 클릭 시 실행할 함수✅ 더 다양한 스타일을 원한다면? TouchableOpacityimport { TouchableOpacity, Text..

🚀 Next.js App Router 기반 프로젝트 구조 완벽 이해Next.js App Router는 단순한 라우팅 방식이 아니라 컴포넌트 기반 아키텍처로 구성된 웹 애플리케이션 구조의 핵심입니다. 이 글에서는 app/ 디렉토리를 중심으로 Next.js 프로젝트의 구조와 구성 전략을 개발자 시각에서 정리합니다.🧱 최상위 디렉토리 구조Next.js 프로젝트는 아래와 같은 디렉토리와 파일들로 구성됩니다.경로 설명app/App Router의 핵심. 페이지, 레이아웃, 로딩, 에러 핸들러, API 핸들러 구성public/정적 파일 (이미지, 아이콘 등)을 넣는 폴더. URL 경로로 직접 접근 가능next.config.jsNext.js 설정 파일package.json의존성 및 스크립트 정의.env.local환..

✅ NextAuth.js REST APINextAuth.js는 /api/auth 경로에 다양한 REST API 엔드포인트를 제공합니다.이 엔드포인트들은 내부적으로 signIn, signOut, useSession 등 클라이언트 기능과 연동되어 동작합니다.🔐 주요 API 목록✅ GET /api/auth/signin기본 제공되는 로그인 페이지를 렌더링합니다.로고나 브랜드 없이 깔끔한 기본 UI 제공✅ POST /api/auth/signin/:provider특정 Provider(GitHub, Google 등)로 로그인 플로우를 시작합니다.제출 시 CSRF 토큰 필요 (/api/auth/csrf에서 가져옴)OAuth인 경우, 인증 서버에 Authorization 요청을 시작합니다.Email Provider 사..

🎯 NestJS Controller 완전 정복 – 요청과 응답의 모든 흐름 이해하기NestJS에서 Controller는 클라이언트의 요청(Request)을 받아 서버의 응답(Response)을 반환하는 역할을 합니다.이 글에서는 NestJS 공식 문서의 Controllers를 한글로 번역하고, 실무 중심의 해석을 덧붙여 설명합니다.NestJS 백엔드 애플리케이션을 설계한다면 Controller는 반드시 정확히 이해하고 넘어가야 할 핵심 요소입니다.✨ Controller란?NestJS에서 Controller는 라우팅(경로 처리)과 요청 매핑을 담당하는 계층입니다.실제로는 @Controller() 데코레이터를 붙여 만든 클래스이며, 여기에 HTTP 메서드(@Get, @Post, 등) 데코레이터를 붙인 메서..

✅ Prisma로 TypeScript + PostgreSQL 프로젝트 처음부터 시작하기"처음부터 TypeScript 프로젝트에 Prisma와 PostgreSQL을 도입한다면?"프론트엔드 또는 백엔드 개발자라면 **ORM(Object Relational Mapping)**의 중요성을 알고 계실 겁니다.그 중에서도 Prisma는 타입 안정성과 개발 편의성을 동시에 제공하는 현대적인 ORM입니다.이 글은 아예 새로운 TypeScript 프로젝트에서 Prisma + PostgreSQL 조합을 구축하는 방법을 다룹니다.완전히 처음 시작하는 분들도 따라올 수 있도록 차근차근 설명드리겠습니다.🧱 1. 새 Node.js 프로젝트 생성mkdir prisma-starter && cd prisma-starternpm in..

갓난애기도 배울 수 있는 React Native 가이드 ② – JSX, 컴포넌트, 스타일링 한 번에 끝내기설치도 끝났고, 앱도 실행했으니 이제 진짜 개발을 시작해볼 차례입니다!이번 글에서는 React Native 앱의 뼈대인 JSX 문법, 컴포넌트 구조, 그리고 스타일링 방법까지기초를 한 번에 정리해보겠습니다. 실습 중심으로 쉽게 따라오세요 😎✅ 1. JSX란 무엇인가?JSX(JavaScript + XML) 는 HTML처럼 보이지만, 사실은 JavaScript입니다.const App = () => { return ( Hello, React Native! );};JSX는 return() 안에서 XML처럼 마크업을 작성하게 해주는 문법입니다.하지만, 모든 JSX는 반드시 하나의 ..