history.go와 history.pushState의 실행 순서(order of history.go and history.pushState)

브라우저의 히스토리가 아래와 같이 쌓여있다고 해보겠습니다.

// ['/', '/post/1', '/post/2']

여기서 함수 foo를 실행하면 어떻게 될까요?

function foo () {
  history.go(-1)  // 1
  history.pushState({}, null, '/post/3')  // 2
}

1이 먼저 실행되고, 2가 실행되면 히스토리는 아래와 같이 구성됩니다.

// ['/', '/post/1', '/post/3']

하지만 실제로는 2가 먼저 실행되고, 1이 실행되어 아래와 같은 히스토리를 갖게됩니다.

// ['/', '/post/1', '/post/2', '/post/3']
//                     ↑현재 포지션

따라서 실제로 1이 동작한 다음 2가 동작하게 하고 싶다면,

function foo () {
  history.go(-1)
  setTimeout(() => {
    history.pushState({}, null, '/post/3')
  })
}

등으로 처리해주어야 합니다.