Render Props는 리액트에서 컴포넌트 간에 코드 재사용을 쉽게 하기 위한 패턴이다. 주로 함수형 컴포넌트에서 사용되며, 컴포넌트의 props로 함수를 전달받아 렌더링 동작을 동적으로 정의할 수 있다.  Render Props 기본 예제 function DataFetcher({ render }) { const data = { name: 'Alice', age: 25 }; // 가상의 데이터 return {render(data)};}function App() { return ( Name: {data.name}, Age: {data.age}} /> );}DataFetcher 컴포넌트는 render라는 prop으로 함수를 받는다.이 함수는 데이터를 렌더링할..

iron-session과 next-auth는 Next.js에서 사용자 인증을 구현하기 위해 사용할 수 있는 두 가지 라이브러리다. 하지만 각각의 목적과 사용 방식이 다르다. iron-session목적세션 기반 인증 및 데이터 저장주요 기능암호화된 세션 쿠키를 사용해 사용자 데이터를 안전하게 저장커스텀 인증 로직을 구현해야 함인증 플로우가 간단한 애플리케이션에 적합next-auth목적OAuth와 같은 다양한 인증 방법을 쉽게 통합주요 기능Google, Facebook, GitHub, Twitter 등의 소셜 로그인 지원데이터베이스 연동을 통한 사용자 정보 저장 및 관리서버 및 클라이언트에서 인증 상태를 쉽게 관리 가능복잡한 인증 요구사항이 있는 애플리케이션에 적합

pseudo class (:pseudo-class)  특정 상태의 요소를 선택할 때 사용한다. 요소 자체는 변하지 않지만, 조건에 따라 스타일을 적용한다. 사용 예:hover사용자가 마우스를 올렸을 때:nth-child(n)특정 위치의 자식을 선택:focus요소가 포커스를 받을 때 a:hover { color: red;}링크에 마우스를 올렸을 때 텍스트 색이 빨간색으로 바뀐다. pseudo element (::pseudo-element) HTML 요소의 특정 부분을 선택하거나 가상의 요소를 만들어 스타일링할 때 사용한다. 실제 DOM 요소에 영향을 주지 않고 특정 부분만 스타일 적용한다. 사용 예::before요소의 시작 부분에 가상의 콘텐츠 추가::after요소의 끝부분에 가상의 콘텐츠 추가::fir..

IntersectionObserver는 자바스크립트 API로, DOM 요소가 뷰포트나 특정 부모 요소와 교차(intersect)하는 시점을 비동기적으로 관찰할 수 있게 해준다. 따라서 주로 lazy loading, 무한 스크롤, 요소 노출 감지 등에 활용된다. 주요 특징 성능 최적화 : 스크롤 이벤트를 직접 사용하는 방식보다 효율적이며, 브라우저 성능에 미치는 영향을 최소화한다.비동기적 처리 : 교차 상태를 감지하는 콜백이 비동기로 실행된다.다양한 관찰 옵션 : threshold, root, rootMargin 등 다양한 조건을 설정할 수 있다. 구성 1. IntersectionObserver 생성const observer = new IntersectionObserver(callback, options)..

1. 인증 API 관리 클래스 설계class ApiClient { constructor(baseURL) { this.baseURL = baseURL; } // 기본 API 요청 메서드 async request(endpoint, options = {}) { const url = `${this.baseURL}${endpoint}`; const response = await fetch(url, { ...options, credentials: 'include', // 쿠키 포함 }); if (response.status === 401) { // AccessToken 만료: RefreshToken으로 갱신 시도 const refreshed = ..

특징as 단언 (assertion)satisfies 연산자초과 프로퍼티 검사무시함검사함타입 강제성강제로 타입을 변경하며, 이는 개발자가 책임짐애초에 타입에 엄격하게 부합해야 함런타임 영향없음주요 용도임시적으로 타입 단언이 필요할 때정밀한 타입 체크 및 코드 안정성 확보 예를 들어, 아래 코드는 validPerson이라는 객체가 Person 타입을 만족하는지 검사하는 용도로 쓰인다.type Person = { name: string; age: number };const validPerson = { name: "철수", age: 30, job: "Developer",} satisfies Person; // 에러 - 'job'은 타입에 정의되지 않은 속성 satisfies가 없었다면(4.9버전 미만), ..