Padding, clientWidth, transition

문제사항

• 위와 같은 구조에서 작업중인데 사이드바를 열거나 닫을 수 있다.
• 사이드바가 열려있는 페이지에서 사이드바가 없는 페이지로 이동 시 그리드의 넓이가 깨진 채로 그려지는 문제가 발생했다.
  • 처음 페이지 로딩 시(새로고침 등)에는 사이드바가 있든 없든 깨지지 않음

디버깅

• 그리드의 넓이 지정
  내가 사용중인 그리드는 width를 따로 지정해주지 않으면 width를 자동으로 잡아준다.
  어떤 방식으로 지정하는지 확인해보았다.
  현재 그리드를 감싸고 있는 부모 영역의 client width를 얻어와서 그 width를 그리드의 width로 설정해주고 있었다.
• 그렇다면 그리드를 감싸는 영역의 넓이는?
  페이지 이동 시, 사이드바를 열고 닫을 때 Padding으로 메인 영역의 넓이를 조절하고 있다. (vuetify - navigation bar 이용 중)
• 근데 왜 깨지지?
  (사이드바가 있는곳에서 없는 곳으로 이동 시)
  그리드 넓이를 자동으로 설정해주는 시점에 부모 영역의 client width를 확인해보니 딱 너비에 padding만큼이 더해져있었다.
  단, 그리드가 다 그려지고 나서 다시 부모 영역의 client width를 확인해보면 padding만큼이 다시 빠져있었다. (정상)

해결

• transition: 0.2s
  vuetify main에 기본으로 지정되어 있던 transition.. 0.2s로 설정되어 있었다.
  client width를 계산하는 것이 늦나..? 하고 별 생각을 다했었는데..^^ 결국 transition 때문이었다.
  setTimeout으로 0.2초 후에 그리드가 그려지도록 하면 정상적인 넓이로 잘 그려진다.
  결국 transition 효과로 인해 0.2초 후에 padding을 포함한 clientwidth가 지정되는 것
  그리그 그려지는 시점을 늦춰도 되지만 난 transition 효과는 사이드바를 열고/닫을 때만 설정되게 변경했음. (페이지 이동 시에는 none)

• 처음 페이지 로딩 시에 깨지지 않은 이유는 아마 transition이 처음 로딩 시에는 동작하지 않았기 때문인듯. 로딩 후 router 페이지 이동 시에는 효과가 적용되고. (이 때는 로딩 된 채로 속성만 변경되는 상태니까)