FastAPI, Next.js, Docker 그리고 AI와 함께하는 풀스택 개발기
웹 서비스의 사용자는 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에서 페이지를 사용합니다.따라서 하나의 화면이 다양한 디바이스에서 자연스럽게 동작하도록 만드는 반응형 설계는 필수입니다. 이번 글에서는 자산앱 프로젝트의 포트폴리오 상세 화면을 예시로,Mantine UI + Next.js 기반에서 반응형 레이아웃을 어떻게 구성했는지 실제 화면의 캡처와 코드를 중심으로 정리해봤습니다. 🔍 이번 글에서 다룰 내용 1. 반응형이 필요한 이유 포트폴리오 관리 … 더 읽기
이번 글에서는 Next.js 기반 프론트엔드에 UI 컴포넌트 라이브러리인 Mantine UI를 적용하는 방법과 저의 프로젝트에 적용 과정에서 발생한 SSR(Server Side Rendering) 관련 오류 해결 방법까지 다루겠습니다. 🧩 개발환경 1. Mantine UI란? Mantine UI는 React 기반의 오픈소스 UI 컴포넌트 라이브러리입니다.TypeScript와 SSR을 지원하며, 다크 모드, 스타일 시스템, 접근성(ARIA) 기능이 내장되어 있습니다. 주요 특징 Next.js와 궁합이 좋고, 다양한 UI … 더 읽기
개발을 시작하기 전, 로컬 개발환경(Local Development Environment)을 구성하기 위한 가이드 입니다.이번 포스팅에서는 Windows 환경을 기반으로 VS Code, Git, Next.js, FastAPI, PostgreSQL을 Docker 로 연결해 완전한 로컬 개발환경을 구축하는 과정을 단계별로 안내합니다. 🧭 전체 구성 개요 이 모든 환경을 구성하면, 하나의 PC에서 프론트엔드/백엔드/DB를 독립적으로 실행하고, 효율적인 개발 및 테스트가 가능합니다. 프론트엔드와 백엔드를 Docker에 연동하지 않은 이유는 … 더 읽기