포트폴리오 분석
실제 프로젝트와 작업물을 기반으로 구조, 코드 설계, UI/UX, 성능, 유지보수 관점에서 분석한 글을 모아둔 카테고리입니다.
[STYNA] Next 커스텀 훅(Custom Hooks) 설계로 완성한 프론트엔드 상태 관리 아키텍처 정리
프로젝트 개요
이 프로젝트는 실제 서비스 운영을 전제로 설계된 개인 포트폴리오이며,
인증, 사용자 데이터, 장바구니, 포인트, 대시보드, 공통 유틸, 입력 처리 등
반복적으로 사용되는 로직을 모두 Custom Hook으로 분리하여 관리합니다.
각 훅은 단일 책임 원칙을 기준으로 설계되었고,
UI… 더 읽기
[STYNA] Firebase 보안 규칙 설계 – Firestore·Storage 실전 적용
주요 포인트 한눈에 보기
이 문서는 GPT를 활용해 Firebase 보안 규칙을 학습하고 실제 프로젝트에 적용하는 과정을 정리합니다.
Firestore Database와 Firebase Storage 규칙을 중심으로,
왜 규칙이 필요한지와 어떻게 설계해야 하는지를 구조적으로 설… 더 읽기
[STYNA] Firebase Auth Context 분석 – 인증·권한·라우팅 관리
주요 포인트 한눈에 보기
이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때
어떤 방식으로 제작되었는지 프로젝트를 분석합니다.
그 중 이번 챕터에서는 Firebase Auth Context를 분석합니다.
포트폴리오: STYNA
… 더 읽기
[STYNA] Firebase Storage 이미지 업로드 구현 가이드 – 상품 이미지 관리 실전 흐름
주요 포인트 한눈에 보기
이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때
어떤 방식으로 제작되었는지 프로젝트를 분석합니다.
그 중 이번 챕터에서는 Firebase Storage 구조를 분석합니다.
포트폴리오: STYN… 더 읽기
[STYNA] Firebase Authentication 코드 분석 – 로그인 유지·로그아웃·비밀번호 재설정 흐름
주요 포인트 한눈에 보기
이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때
어떤 방식으로 제작되었는지 프로젝트를 분석합니다.
그 중 이번 챕터에서는 Firebase Authentication 구조를 분석합니다.
포트폴리오: STY… 더 읽기
[STYNA] Firebase 구조 완전 정리 – firebase.ts 설계와 이유
주요 포인트 한눈에 보기
이 글은 완성된 포트폴리오 코드를 기준으로 Next.js + TypeScript + Firebase를 사용할 때
어떤 방식으로 제작되었는지 프로젝트를 분석합니다.
그 중 이번 챕터에서는 firebase.ts 초기화 구조를 분석합니다.
Auth, Firestore, Storage, Fu… 더 읽기