코드의 바다에서 항해하기

1. 문제 상황최근 프로젝트에서 탭 콘텐츠가 서버에서 받아온 값으로 동적으로 렌더링되는 구조였습니다. 그런데 상품 상세페이지로 이동했다가 뒤로가기를 하면 탭 상태와 스크롤 위치가 초기화되는 문제가 있었습니다.사용자는 뒤로가기를 했을 때, 자신이 마지막으로 보고 있던 탭과 위치로 자연스럽게 돌아가길 기대합니다. 하지만, 페이지가 새로 로드되면서 처음 탭으로 돌아가고, 스크롤도 맨 위로 이동해버리는 사용자경험 측면에서 불편한 점이 발생했습니다. 그래서 이를 해결하기 위해 bfcache에 대해서 알게되었습니다.2. bfcache(Back-Forward Cache)란?이 문제를 해결하는 과정에서 bfcache(Back-Forward Cache)라는 개념을 알게 되었습니다.브라우저는 뒤로 가기 또는 앞으로 가기를..

객체 값의 전달 방식 참조에 의한 전달 예제 const person = { name: 'Max' }; const secondPerson = person; // 참조 값을 복사(얕은 복사) console.log(secondPerson); 결과 [object Object] { name: "Max" } 객체를 가리키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라고 한다. 객체 person은 메모리에 저장되어있고, 상수 person에는 메모리에 있는 주소를 가리키는 포인터를 저장한다. 위 그림처럼 Person을 사본 SecondPerson에 할당하면 원본 person의 참조 값을 복사해서 SecondPerson에 저장한다. ..