React와 Next.js 메타데이터 API 완벽 정리
주요 포인트 한눈에 보기 이 문서는 React와 Next.js에서 메타데이터를 다루는 방식의 차이를 철학부터 실제 코드 구조까지 단계적으로 정리한 학습 문서입니다. 단순한 API 사용법이 …
더 읽기 →BlogFlow | 블로그
프론트엔드 개발과 IT 기술을 중심으로 실무 경험과 학습을 기록합니다.
프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
프론트엔드
프론트엔드 카테고리에서는 사용자 화면을 구현하는 데 필요한 핵심 기술과 실무 지식을 정리합니다. HTML, CSS, JavaScript를 비롯해 React, Next.js, UI 컴포넌트 설계, 상태 관리, API 연동, 성능 최적화, 반응형 웹까지 프론트엔드 개발 전반을 다룹니다.
Firebase Functions v2 총정리: 서버리스 개념부터 트리거·배포·Secret까지
주요 포인트 한눈에 보기 ※ 이 문서는 Firebase Functions 2nd gen(v2) 기준으로 설명합니다. Firebase Functions는 프론트엔드에서 처리하면 위험하거나 부적절한 로직을 서버에서 안전하게 실행하기 위한 서버리스(Serverless) 기능…
더 읽기 →
[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 초기화…
더 읽기 →
CSRF와 XSS 완벽 정리 – 프론트엔드 보안 흐름과 방어 전략
주요 포인트 한눈에 보기 CSRF와 XSS를 단순 정의가 아닌 공격 흐름과 책임 위치를 기준으로 정리합니다. CSRF는 인증된 사용자의 요청을 악용하는 공격이고, XSS는 브라우저에서 악성 스크립트가 실…
더 읽기 →
Next.js App Router metadata API 사용법 – 잘못된 meta 예제와 해결 방법
주요 포인트 한눈에 보기 이 문서는 Next.js App Router 환경에서 metadata API를 사용하는 올바른 방법을 단계별로 설명합니다. 먼저 기본적인 메타데이터 설정 방식을 이해한 뒤, 실제 포트폴…
더 읽기 →
[JS 알고리즘] 후위식 연산(postfix) 문제 풀이 – 스택으로 계산 흐름 완벽 이해
주요 포인트 한눈에 보기 후위식(Postfix) 연산은 스택(Stack)을 활용해 연산자 우선순위를 고려하지 않고 계산할 수 있는 대표적인 알고리즘 문제입니다. 이 글에서는 문제 설명부터 내가 푼 풀이, 정답 풀이, 그리고 자주 헷갈리는 포인트를 단계적으…
더 읽기 →
[JS 알고리즘] 크레인 인형뽑기 완벽 풀이 – 카카오 기출 알고리즘
주요 포인트 한눈에 보기 카카오 기출로 자주 등장하는 크레인 인형뽑기 문제를 통해, 단순 구현과 스택 기반 사고의 차이를 정리합니다. 내가 작성한 코드와 정답 코드의 구조를 비교하며, 왜 스택이 핵심 자료구조인지 흐름 중심으로 설명합니다. 문제 설명 내가 푼 풀이 …
더 읽기 →