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