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 등의 소셜 로그인 지원데이터베이스 연동을 통한 사용자 정보 저장 및 관리서버 및 클라이언트에서 인증 상태를 쉽게 관리 가능복잡한 인증 요구사항이 있는 애플리케이션에 적합

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버전 미만), ..

import React, { useRef, useState } from 'react';export const useTimer = () => { const [time, setTime] = useState(0); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(); const startTimer = () => { if (!isRunning) { setIsRunning(true); intervalRef.current = setInterval(() => { setTime(prevTime => prevTime + 1); }, 1000); } }; const..

useEffect()는 componentWillUnMount, componentDidMount, componentDidUpdate의 속성을 모두 가지고 있다 component가 처음 렌더링되면 useEffect()의 첫번째 인자로 들어가는 함수가 didMount에 해당하여 바로 실행된다 useEffect()의 두번째 인자에는 의존성이 들어가는데, 의존성은 처음 페이지가 렌더링 된 후 상태가 변화하는 값을 의미하며 배열 형태로 입력한다 의존성이 있다면, 해당 상태가 변화할 때마다 useEffect()의 첫번째 인자가 didUpdate로서 실행되고, 의존성이 빈배열이라면 첫번째 인자는 다시 실행되지 않는다 두번째 인자가 아예 비어 있다면 첫번째 인자는 매번 업데이트 된다(따라서 빈배열이라도 꼭 넣을 것) 마..