2025.11 자산 앱 프로젝트 진행 현황
지난 11월은 자산 앱의 핵심 기능 개발에 집중한 한 달이었습니다. 이번 달 개발 범위는 특히 실시간 자산 시세 데이터 수집 및 화면 반영 안정화에 초점을 맞췄습니다. 국내·해외 주식부터 가상자산까지 실제 금융 시장의 변동 데이터를 끊김 없이 취합하고 화면에 제공하기 위해 전체 데이터 처리 흐름을 재설계하고 구현했습니다. 프로젝트 핵심 요약 구분 주요 진행 사항 실시간 주식/해외주식 … 더 읽기
Next.js
React 취약점: 2025년 최신 보안 이슈 정리
최근 React 에서 치명적인 보안 취약점이 공개되면서, 웹 개발 커뮤니티와 보안 업계가 크게 술렁이고 있습니다. 이 글에서는 지금 화제가 되고 있는 “React 취약점”의 본질과 영향, 대응 방안까지 정리해보겠습니다. 왜 지금 React 취약점이 이슈인가 서버 컴포넌트(RSC)가 보안 구멍이 됐다 React는 그동안 프론트엔드 UI를 구성하는 라이브러리로 널리 사용되어 왔지만, 최근 도입된 서버 컴포넌트(Server Components, RSC) 기능에서 심각한 … 더 읽기
반응형 레이아웃 만들기 — Next.js + Mantine 실전 예제
웹 서비스의 사용자는 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에서 페이지를 사용합니다.따라서 하나의 화면이 다양한 디바이스에서 자연스럽게 동작하도록 만드는 반응형 설계는 필수입니다. 이번 글에서는 자산앱 프로젝트의 포트폴리오 상세 화면을 예시로,Mantine UI + Next.js 기반에서 반응형 레이아웃을 어떻게 구성했는지 실제 화면의 캡처와 코드를 중심으로 정리해봤습니다. 🔍 이번 글에서 다룰 내용 1. 반응형이 필요한 이유 포트폴리오 관리 … 더 읽기
SSR, CSR의 개념과 차이점
이번 글에서는 2가지 렌더링 방식인 SSR(Server Side Rendering)과 CSR(Client Side Rendering)의 개념, 차이점, 동작 방식, 그리고 어떤 상황에서 어떤 방식을 선택해야되는지를 살펴 보겠습니다. 웹 애플리케이션을 개발할 때 SSR(Server Side Rendering) 과 CSR(Client Side Rendering) 은 반드시 이해해야 할 핵심 개념입니다. 특히 Next.js 같은 현대적인 프레임워크는 두 방식을 모두 지원하기 때문에, 각각의 동작 원리와 차이를 명확히 … 더 읽기
Next.js의 동적 페이지 처리
Next.js는 파일 기반 라우팅(file-based routing) 시스템을 제공하는 React 프레임워크입니다. 특히 동적 페이지(dynamic routing) 기능은 실제 서비스에서 매우 자주 사용됩니다.이번 글에서는 포트폴리오 상세 페이지를 구현한 실제 예시 코드를 바탕으로 Next.js의 동적 페이지 처리 방식의 구조와 동작 원리를 자세히 설명하겠습니다. 📁 프로젝트 구조 이 프로젝트에서 핵심은 /pages/portfolio/[portfolioId].tsx 파일입니다.[portfolioId]는 Next.js의 동적 경로(Dynamic Route) 문법으로, URL의 파라미터를 페이지 컴포넌트에 … 더 읽기
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 필드가 … 더 읽기
FastAPI에서 모델(Model)과 스키마(Schema)의 분리
유지보수성 향상, 데이터 검증 및 보안강화를 위해 FastAPI와 SQLModel을 함께 사용하면 데이터베이스 테이블 정의(모델)와 API 요청/응답 검증(스키마)을 분리할 수 있습니다.이번 포스팅에서는 FastAPI + SQLModel + PostgreSQL(Docker) 환경을 기반으로, 스키마(Schema)에서 받은 데이터를 안전하게 모델(Model)로 변환하여 저장하는 방법을 구체적인 코드 예시와 함께 살펴보겠습니다. 🧭 개발 환경 📂 프로젝트 구조 위 구조는 FastAPI 백엔드에서 모델과 스키마를 완전히 분리하는 … 더 읽기
Next.js + FastAPI로 Google 로그인 구현하기 (JWT 검증 포함)
이번 글에서는 Google Auth를 사용해 사용자 로그인 기능을 구현하고, 로그인 후 발급받은 AccessToken을 백엔드(FastAPI)에서 검증 및 사용자 인증의 흐름을 확인할 수 있습니다.소셜 로그인을 적용하면 사용자는 별도의 회원가입 없이 Google 계정만으로 간편하게 로그인할 수 있습니다. 또한 NextAuth를 이용하면 보안성과 확장성을 모두 확보할 수 있습니다. 📚 목차 📂 프로젝트 구조 ☁️ Google Cloud Console 설정 Google OAuth … 더 읽기
📁효율적인 개발을 위한 디렉토리 설계 가이드(FastAPI+Next.js)
이번 포스팅에서는 저의 로컬 환경 기준으로 구성한 프로젝트 구조를 바탕으로 각 디렉토리와 파일의 역할을 상세히 설명하겠습니다. 프로젝트 디렉토리 구조에는 정확한 정답은 없지만 올바른 설계 원칙을 이해하면 개발에 큰 도움이 됩니다. 📑 목차 🛠 프로젝트 디렉토리 구조를 나누는 이유 대규모 애플리케이션일수록 디렉토리 구조를 체계적으로 나누는 것이 필수입니다.주요 이유는 다음과 같습니다. 즉, 디렉토리 구조는 단순히 코드 정리를 … 더 읽기