[STYNA] Next 커스텀 훅(Custom Hooks) 설계로 완성한 프론트엔드 상태 관리 아키텍처 정리
프로젝트 개요 이 프로젝트는 실제 서비스 운영을 전제로 설계된 개인 포트폴리오이며, 인증, 사용자 데이터, 장바구니, 포인트, 대시보드, 공통 유틸, 입력 처리 등 반복적으로 사용되는 로직을 모두 Custom Hook으로 분리하여 관리합니다. 각 훅은 단일 책임 원칙을 …
더 읽기 →BlogFlow | 블로그
프론트엔드 개발과 IT 기술을 중심으로 실무 경험과 학습을 기록합니다.
포트폴리오 분석
실제 프로젝트와 작업물을 기반으로 구조, 코드 설계, UI/UX, 성능, 유지보수 관점에서 분석한 글을 모아둔 카테고리입니다.
포트폴리오 분석
실제 프로젝트와 작업물을 기반으로 구조, 코드 설계, UI/UX, 성능, 유지보수 관점에서 분석한 글을 모아둔 카테고리입니다.
[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 초기화…
더 읽기 →