React
-
IntersectionObserver를 활용한 TOC(Table of Contents / 목차) 구현
개요 IntersectionObserver API를 사용하면 스크롤 이벤트 없이도 효율적으로 요소의 가시성을 감지할 수 있다. 이 특성을 활용하여 문서의 목차(TOC)를 구현하고, 현재 읽고 있는 섹션을 자동으로 하이라이트하는 기능을 만들 수 있다. IntersectionObserver란? IntersectionObserver는 타겟 요소와 상위 요소 또는 뷰포트 사이의 교차 영역 변화를 비동기적으로 관찰하는 API다. 스크롤 이벤트를 직접 다루는 것보다 성능이 우수하며, 코드도 더 간결하게 작성할… Continue reading
-
프론트엔드-백엔드 분리 환경에서 OAuth 로그인 구현하기
프론트엔드와 백엔드가 분리된 환경에서 구글 OAuth 로그인을 구현하는 방법 전체 아키텍처 사용자 → NextAuth (OAuth 처리) → 백엔드 API (사용자 정보 저장 + JWT 발급) → 이후 API 요청 시 JWT 사용 구현 단계 1. NextAuth 설정 프론트엔드에서 NextAuth를 사용해 OAuth를 처리하고, 로그인 성공 시 백엔드에 사용자 정보를 전송 // pages/api/auth/[…nextauth].jsimport NextAuth from ‘next-auth’import GoogleProvider… Continue reading
-
REST API 캐싱과 ETag 가이드
캐시 vs 쿠키 많은 개발자들이 캐시와 쿠키를 혼동하는데, 이 둘은 완전히 다른 개념이다 캐시 (Cache) 저장 위치: 브라우저, CDN, 프록시 서버 등 목적: 성능 최적화 (같은 요청을 빠르게 처리) 저장 주체: 받는 쪽(클라이언트)이 자동으로 저장 데이터 종류: HTTP 응답 전체 (HTML, JSON, 이미지 등) 쿠키 (Cookie) 저장 위치: 브라우저의 쿠키 저장소 목적: 상태 관리 (로그인,… Continue reading
-
React Hooks 정리 (React 18+ 기준)
React Hook, 처음엔 복잡해 보이지만 한번 이해하면 정말 강력함. 기존 클래스 컴포넌트 없이도 상태 관리하고 생명주기 처리할 수 있어서 코드가 훨씬 깔끔해짐. 🎯 Hook? Hook은 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 특별한 함수들임. use로 시작하는 게 특징이고, React가 제공하는 기본 Hook들과 개발자가 만드는 커스텀 Hook이 있음. 🔥 기본 Hook들 마스터하기 1. useState… Continue reading
-
Graphql Client. GraphiQL 사용
GraphiQL Github 주소 https://github.com/graphql/graphiql Example: https://github.com/graphql/graphiql/tree/main/examples 메인 README를 보면 Getting started만 보고서는 환경 별로 사용 방법을 모두 적어서 시작이 어려움 여기에 있는 예제만 가져가 빌드해 사용하면 어렵지 않게 시작 가능 Monaco GraphQL Next.js Example examples의 monaco-graphql-nextjs 복사 npm i –force npm run dev GraphiQL create-react-app Example npm install npm run start 버전 차이로 인해서인지 제대로… Continue reading
St991Cup's Blog 