dev_in 개발 블로그

React의 Error Boundary는 비동기 코드에서 발생한 오류를 잡을 수 없습니다. 그 이유는 비동기 에러는 렌더링 시점의 콜스택이 모두 비워진 후에 발생하기 때문입니다. React는 컴포넌트를 렌더링할 때 하나의 연속된 콜스택 흐름 안에서 작업을 처리하며, Error Boundary도 이 렌더링 흐름 중에 실행됩니다. 따라서 Error Boundary는 동기적인 렌더링 과정 중에 발생한 오류를 감지할 수 있습니다.하지만 Promise, setTimeout과 같은 비동기 작업은 렌더링이 끝난 후, 즉 렌더링 시점의 콜스택이 모두 비워진 후에 수행됩니다. 따라서 Error Boundary는 해당 시점에 발생하는 오류를 잡을 수 없습니다. 이러한 점 때문에, 비동기 에러는 별도로 직접 처리해야 합니다..

스택을 활용하면 브라우저의 뒤로가기/앞으로가기 기능을 효율적으로 구현할 수 있습니다. 이를 위해 다음과 같은 두 가지 스택이 필요합니다.backStack (뒤로가기 스택): 사용자가 방문한 페이지들이 차례대로 쌓이며, 가장 위에 있는(top) 페이지가 현재 페이지에 해당합니다. 이 스택은 뒤로가기 기능을 담당합니다.forwardStack (앞으로가기 스택): 뒤로가기를 한 뒤 다시 앞으로 이동할 수 있도록 이전에 방문했던 페이지들을 보관합니다.이 두 스택을 활용한 동작 흐름은 다음과 같습니다.1. 새로운 페이지 방문 시현재 페이지를 backStack에 push합니다.이전의 forward 경로는 더 이상 유효하지 않으므로 forwardStack은 초기화됩니다.2. 뒤로가기 버튼 클릭 시현재 페이지를 bac..

쿠키와 세션이란? 쿠키와 세션은 클라이언트와 서버 간의 상태를 유지하기 위해 사용하는 대표적인 방식들입니다. 웹은 기본적으로 상태를 저장하지 않는 Stateless한 구조이기 때문에, 사용자의 로그인 정보나 장바구니와 같은 클라이언트 정보를 유지하려면 별도의 상태 관리 방식이 필요합니다. 이때 주로 활용되는 방식이 쿠키와 세션입니다. Stateless 구조란?Stateless 구조란 서버가 클라이언트의 이전 상태 정보를 저장하지 않고, 각 요청을 독립적으로 처리하는 아키텍처 설계 방식으로, 클라이언트가 필요한 모든 정보를 요청에 담아 보내면 서버는 해당 요청만 처리하고 응답하는 방식입니다. 이 구조는 서버 장애 시 다른 서버로 쉽게 전환할 수 있고 확장성이 뛰어나며, HTTP 프로토콜이 기본적으로 Sta..