UI개발에서 프론트앤드개발로 전환되면서 마침 UI개발을 내가 한 프로젝트를 또 내가 리액트에서 작업하고 있는 경험을 하고 있는데 리액트를 실무로 접해보지 않고 구성한 레이아웃이 문제가 된 걸 발견했다.

.header + .contents {
    padding-top: 5rem;
}

대표적으로 이런건데, 이 프로젝트 헤더가 픽스드된 형태이다보니 나름 UI개발 짬밥이 있다고 컨텐츠 영역에 여백은 픽스드된 헤더가 있을 때만 주게끔 해놓았는데 SPA에서는 페이지 변화시 페이지 전체 변경이 아니라 변경된 부분만 바뀌다보니 헤더가 있고 없고 하거나 헤더내에서 변화가 있는 경우 (지금 보면 당연히) padding-top이 있다 없다 하여 들썩 들썩 거리는 현상이 발생한다.

나름 SPA에 대한 이해를 갖고(있다고 생각하고) 프론트앤드 개발에 대응을 해준다고 작업 했던 거였는데 무심코 습관적으로 했던 코드들이 SPA에선 문제가 되는 케이스였다.

이런 사항들이 또 발생하면 이 포스트에 업데이트 할 예정.