[STYNA] Next 커스텀 훅(Custom Hooks) 설계로 완성한 프론트엔드 상태 관리 아키텍처 정리
프로젝트 개요 이 프로젝트는 실제 서비스 운영을 전제로 설계된 개인 포트폴리오이며, 인증, 사용자 데이터, 장바구니, 포인트, 대시보드, 공통 유틸, 입력 처리 등 반복적으로 사용되는 로직을 모두 Custom Hook으로 분리하여 관리합니다. 각 훅은 단일 책임 원칙을 …
더 읽기 →BlogFlow | 블로그
프론트엔드 개발과 IT 기술을 중심으로 실무 경험과 학습을 기록합니다.
STYNA
STYNA 쇼핑몰 프로젝트의 개발 과정과 기능 구현을 리뷰하는 카테고리입니다. UI 구성, 상품 데이터 구조 설계, 장바구니 및 결제 흐름, 상태 관리, 성능 개선 등 실제 쇼핑몰을 구축하면서 경험한 기술적 고민과 해결 과정을 기록합니다. React, Next.js, TanStack Query 등 프론트엔드 기술을 중심으로 실제 서비스 구조에 가까운 형태로 설계한 내용을 정리하며, 쇼핑몰 프로젝트를 공부하는 개발자에게 참고가 될 수 있는 실전 개발 기록을 제공합니다.
STYNA
STYNA 쇼핑몰 프로젝트의 개발 과정과 기능 구현을 리뷰하는 카테고리입니다.
UI 구성, 상품 데이터 구조 설계, 장바구니 및 결제 흐름, 상태 관리, 성능 개선 등 실제 쇼핑몰을 구축하면서 경험한 기술적 고민과 해결 과정을 기록합니다.
React, Next.js, TanStack Query 등 프론트엔드 기술을 중심으로 실제 서비스 구조에 가까운 형태로 설계한 내용을 정리하며, 쇼핑몰 프로젝트를 공부하는 개발자에게 참고가 될 수 있는 실전 개발 기록을 제공합니다.
[STYNA] Firebase 보안 규칙 설계 – Firestore·Storage 실전 적용
주요 포인트 한눈에 보기 이 문서는 GPT를 활용해 Firebase 보안 규칙을 학습하고 실제 프로젝트에 적용하는 과정을 정리합니다. Firestore Database와 Firebase Storage 규칙을 중…
더 읽기 →
[STYNA] Firebase Auth Context 분석 – 인증·권한·라우팅 관리
주요 포인트 한눈에 보기 이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때 어떤 방식으로 제작되었는지 프로젝트를 분석합니다. 그 중 이번 챕터에서는 Firebase Auth Conte…
더 읽기 →
[STYNA] Firebase Storage 이미지 업로드 구현 가이드 – 상품 이미지 관리 실전 흐름
주요 포인트 한눈에 보기 이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때 어떤 방식으로 제작되었는지 프로젝트를 분석합니다. 그 중 이번 챕터에서는 Firebase …
더 읽기 →
[STYNA] Firebase Authentication 코드 분석 – 로그인 유지·로그아웃·비밀번호 재설정 흐름
주요 포인트 한눈에 보기 이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때 어떤 방식으로 제작되었는지 프로젝트를 분석합니다. 그 중 이번 챕터에서는 Firebase Authen…
더 읽기 →
[STYNA] Firebase 구조 완전 정리 – firebase.ts 설계와 이유
주요 포인트 한눈에 보기 이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때 어떤 방식으로 제작되었는지 프로젝트를 분석합니다. 그 중 이번 챕터에서는 firebase.ts 초기화…
더 읽기 →