Firebase Firestore 사용법 – 구조 개념부터 CRUD 흐름까지 정리
주요 포인트 한눈에 보기 이 글은 Firebase를 처음 사용하는 개발자를 위해 firebase/firestore가 어떤 역할을 담당하는지, 그리고 Firestore를 사용할 때 반드시 이해해야 할 최소한의 구조와 흐름을 정리합니다. CRUD 전체를 나열…
더 읽기 →BlogFlow | 블로그
프론트엔드 개발과 IT 기술을 중심으로 실무 경험과 학습을 기록합니다.
프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
TanStack Query에서 queryFn 이해하기 – 데이터 요청 로직의 책임 경계
주요 포인트 한눈에 보기 TanStack Query에서 queryFn은 단순히 데이터를 가져오는 함수가 아니라, 캐시 계층과 서버 요청 사이를 연결하는 유일한 계약 지점입니다. 이 글에서는…
더 읽기 →
TanStack Query에서 queryKey 이해하기 – 배열로 설계하는 이유
주요 포인트 한눈에 보기 TanStack Query에서 queryKey는 단순한 캐시 이름이 아니라, 서버 데이터를 계층적으로 분류하기 위한 구조적 기준입니다. 이 글에서는 queryKey를 배열로 설계해야 하는 이유를 사용법이 아닌 구조·설계 관점에서 정리합니…
더 읽기 →
[STYNA] Next 커스텀 훅(Custom Hooks) 설계로 완성한 프론트엔드 상태 관리 아키텍처 정리
프로젝트 개요 이 프로젝트는 실제 서비스 운영을 전제로 설계된 개인 포트폴리오이며, 인증, 사용자 데이터, 장바구니, 포인트, 대시보드, 공통 유틸, 입력 처리 등 반복적으로 사용되는 로직을 모두 Custom Hook으로 분리하…
더 읽기 →
Would you like to delete these indexes? Selecting no will continue the rest of the deployment. 안전한 판단법
주요 포인트 한눈에 보기 Firebase 배포 중 출력되는 Would you like to delete these indexes? 메시지는 Firestore 인덱스 설정 파일과 실제 서버 상태가 서로 달라졌을 …
더 읽기 →
jQuery 4.0.0 변경 사항 총정리 – IE 지원 종료부터 Slim 빌드까지
주요 포인트 한눈에 보기 jQuery 4.0.0은 약 10년 만에 공개된 메이저 버전이며, jQuery 출시 20주년을 기념해 내부 구조를 크게 정리한 버전입니다. 새로운 기능이 대거 추가…
더 읽기 →
Firebase에서 .firebaseignore 깔끔하게 작성 하는 방법
주요 포인트 한눈에 보기 Firebase 배포 과정에서 불필요한 파일이 함께 업로드되는 것을 방지하기 위해 .firebaseignore 파일을 사용합니다. 불필요한 파일을 배포에 포함시키는 것은 단순히 정리가 …
더 읽기 →
[STYNA] Firebase 보안 규칙 설계 – Firestore·Storage 실전 적용
주요 포인트 한눈에 보기 이 문서는 GPT를 활용해 Firebase 보안 규칙을 학습하고 실제 프로젝트에 적용하는 과정을 정리합니다. Firestore Database와 Firebase Storage 규칙을 중…
더 읽기 →
Firebase Admin Custom Claims로 관리자 권한 설정하는 방법
주요 포인트 한눈에 보기 이 문서는 Firebase 관리자 권한(Custom Claims)을 설정할 수 있도록, 실제 프로젝트에서 필요한 정보만 남기고 보안상 민감한 값은 모두 예시 값으로 대체하여 정리한 가이…
더 읽기 →
[JS 코딩테스트] 쇠막대기 문제 풀이 – 스택으로 레이저 절단 구조 완전 이해
주요 포인트 한눈에 보기 이 글은 한국정보올림피아드(KOI) 기출 문제인 쇠막대기 문제를 바탕으로, 괄호 문자열을 이용해 레이저와 쇠막대기의 배치를 해석하고, 스택(Stack)을 활용해 잘려진 쇠막대기 …
더 읽기 →