JavaScript
-
IntersectionObserver를 활용한 TOC(Table of Contents / 목차) 구현
개요 IntersectionObserver API를 사용하면 스크롤 이벤트 없이도 효율적으로 요소의 가시성을 감지할 수 있다. 이 특성을 활용하여 문서의 목차(TOC)를 구현하고, 현재 읽고 있는 섹션을 자동으로 하이라이트하는 기능을 만들 수 있다. IntersectionObserver란? IntersectionObserver는 타겟 요소와 상위 요소 또는 뷰포트 사이의 교차 영역 변화를 비동기적으로 관찰하는 API다. 스크롤 이벤트를 직접 다루는 것보다 성능이 우수하며, 코드도 더 간결하게 작성할… Continue reading
-
프론트엔드-백엔드 분리 환경에서 OAuth 로그인 구현하기
프론트엔드와 백엔드가 분리된 환경에서 구글 OAuth 로그인을 구현하는 방법 전체 아키텍처 구현 단계 1. NextAuth 설정 프론트엔드에서 NextAuth를 사용해 OAuth를 처리하고, 로그인 성공 시 백엔드에 사용자 정보를 전송 2. 백엔드 API 구현 백엔드에서는 OAuth 처리 없이 단순히 사용자 정보를 받아 DB에 저장하고 JWT 토큰을 발급 3. 데이터베이스 스키마 사용자 정보와 OAuth 정보를 저장할 스키마 4.… Continue reading
-
REST API 캐싱과 ETag 가이드
캐시 vs 쿠키 많은 개발자들이 캐시와 쿠키를 혼동하는데, 이 둘은 완전히 다른 개념이다 캐시 (Cache) 저장 위치: 브라우저, CDN, 프록시 서버 등 목적: 성능 최적화 (같은 요청을 빠르게 처리) 저장 주체: 받는 쪽(클라이언트)이 자동으로 저장 데이터 종류: HTTP 응답 전체 (HTML, JSON, 이미지 등) 쿠키 (Cookie) 저장 위치: 브라우저의 쿠키 저장소 목적: 상태 관리 (로그인,… Continue reading
-
JavaScript 화살표 함수(Lambda) vs 일반 함수: this 바인딩의 모든 것
🎯 핵심 차이점 JavaScript에서 화살표 함수와 일반 함수의 가장 큰 차이점은 this 바인딩 방식 일반 함수: 호출 시점에 this 결정 (동적 바인딩) 화살표 함수: 정의 시점에 this 결정 (렉시컬 바인딩) 📋 일반 함수의 this 바인딩 특징: 누가 호출하느냐에 따라 this가 달라짐 🏹 화살표 함수의 this 바인딩 특징: 어디서 호출하든 항상 정의된 곳의 this를 사용 🧪… Continue reading
-
React Hooks 정리 (React 18+ 기준)
React Hook, 처음엔 복잡해 보이지만 한번 이해하면 정말 강력함. 기존 클래스 컴포넌트 없이도 상태 관리하고 생명주기 처리할 수 있어서 코드가 훨씬 깔끔해짐. 🎯 Hook? Hook은 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 특별한 함수들임. use로 시작하는 게 특징이고, React가 제공하는 기본 Hook들과 개발자가 만드는 커스텀 Hook이 있음. 🔥 기본 Hook들 마스터하기 1. useState… Continue reading
-
Javascript, Typescript 수열 만들기
JavaScript / TypeScript에서 수열을 생성하는 패턴이다. 1. Array.from 활용 2. Generator / Spread 활용 Continue reading
-
[js, ts] string 값으로 object 멤버 이름으로 사용하기
동적 문자열 값을 객체(Object)의 키/멤버 이름으로 사용하는 방법이다. Computed Property Names 문법 Continue reading
-
Spread
null, undefined 알아서 오류 안 뿜고 스킵 … 뒤에 스페이스 허용 중첩 멤버가 있을 경우 뒤에 나오는 멤버 사용 Continue reading
-
ReferenceError: fetch is not defined
해결 가능한 두 가지 방법 node 버전 18이상 으로 업데이트 npm i node-fetch https://www.npmjs.com/package/node-fetch Continue reading
-
Promise catch 요약
catch 메서드의 반환값 예제 다음은 catch 메서드의 반환값을 활용한 예제입니다: 위의 예제에서 fetchData 함수는 비동기 작업을 수행하는 Promise 객체를 반환합니다. then 메서드를 통해 데이터 처리를 위한 processResult 함수를 등록하고, catch 메서드를 통해 에러 처리를 위한 handleError 함수를 등록합니다. catch 메서드는 에러가 발생했을 때 handleError 함수를 실행하고, then 메서드는 성공적으로 처리된 데이터를 result 변수로 전달하여 최종… Continue reading
