Next.js + FastAPI 프로젝트에 Mantine UI 적용하는 방법

이번 글에서는 Next.js 기반 프론트엔드에 UI 컴포넌트 라이브러리인 Mantine UI를 적용하는 방법과 저의 프로젝트에 적용 과정에서 발생한 SSR(Server Side Rendering) 관련 오류 해결 방법까지 다루겠습니다. 🧩 개발환경 1. Mantine UI란? Mantine UI는 React 기반의 오픈소스 UI 컴포넌트 라이브러리입니다.TypeScript와 SSR을 지원하며, 다크 모드, 스타일 시스템, 접근성(ARIA) 기능이 내장되어 있습니다. 주요 특징 Next.js와 궁합이 좋고, 다양한 UI … 더 읽기

PostgreSQL에서 DateTime을 한국 시간(KST) 기준으로 다루는 방법

Next.js + FastAPI + PostgreSQL 환경에서 안전하게 한국 시간(KST)을 다루는 법 🔍 들어가며 애플리케이션을 개발하다보면 모든 데이터의 기준 시간을 어떻게 관리하는 게 좋을지 고민이 생깁니다.이번 글에서는 PostgreSQL의 2가지 데이터 타입에 대해서 알아보고, 한국에서만 운영되는 서비스의 경우와 글로벌 서비스를 고려한 DateTime을 다루는 방법을 다뤄보겠습니다. 🧩 기본 모델 구조 위 예시처럼 created_at, updated_at, deposit_date 등 datetime 필드가 … 더 읽기

개발 초기 더미 데이터(dummy data) 만드는 법

개발 초기에는 CRUD API를 검증하거나 UI 화면을 테스트하기 위해 더미 데이터(dummy data)가 필요합니다.특히 FastAPI + PostgreSQL + Docker 환경에서는 백엔드와 데이터베이스가 별도로 구동되기 때문에 테스트용 초기 데이터를 자동으로 세팅해주는 스크립트가 있으면 훨씬 효율적입니다.이번 글에서는 다양한 더미 데이터는 생성 방법과 각각의 장단점을 정리했습니다. 🧭 왜 테스트 데이터 초기화가 필요할까? 개발 초기에는 UI나 API 기능 검증을 위해 … 더 읽기

FastAPI에서 모델(Model)과 스키마(Schema)의 분리

유지보수성 향상, 데이터 검증 및 보안강화를 위해 FastAPI와 SQLModel을 함께 사용하면 데이터베이스 테이블 정의(모델)와 API 요청/응답 검증(스키마)을 분리할 수 있습니다.이번 포스팅에서는 FastAPI + SQLModel + PostgreSQL(Docker) 환경을 기반으로, 스키마(Schema)에서 받은 데이터를 안전하게 모델(Model)로 변환하여 저장하는 방법을 구체적인 코드 예시와 함께 살펴보겠습니다. 🧭 개발 환경 📂 프로젝트 구조 위 구조는 FastAPI 백엔드에서 모델과 스키마를 완전히 분리하는 … 더 읽기

AI와 함께하는 풀스택 개발 | Next.js + FastAPI + PostgreSQL 기반의 자산 관리 앱 개발기

🧭 프로젝트 개요 안녕하세요. 이 블로그는 개발자로서 한 단계 더 성장하기 위한 저만의 기록을 담고 있습니다.이번 프로젝트는 단순한 결과물보다 과정 중심의 학습에 초점을 맞추고 있으며, AI와 함께하는 개발(Vibe Coding) 방식을 통해 스스로 성장해 나가는 여정을 기록하고자 합니다. 저는 해당 기술 스택(Next.js, FastAPI, PostgreSQL 등)에 대해 처음 배우는 단계로, ChatGPT, Github Copilot과 같은 AI 도구를 적극 … 더 읽기