clientonly
-
[Vue] ClientOnly로 client side / server side 이해하기SPA/Vue.js 2024. 6. 30. 21:23
nuxt에서는 client side로만 렌더링할 수 있도록 ClientOnly라는 컴포넌트를 제공하는데오늘은 과제를 진행하던 중 ClientOnly를 사용하며 알게 된 점을 정리해보았다. 1. ClientOnly가 필요했던 순간teleport를 활용하는 회사 과제를 진행하던 중 특정한 조건이 있었다.바로 body 태그가 닫히는 곳 바로 위에 바텀시트가 뜨도록 하는 것! 그냥 위와 같이 teleport to로 body를 넣어주면 body 안에 바텀시트가 나오긴 하지만언급한 조건은 충족시킬 수 없다.보다시피 바텀시트의 내용인 aside 태그와 body 태그가 닫히는 곳은 저 멀리 떨어져 있기 때문이다. 조건을 충족하고자 처음엔 mount될 때 appendChild로 바텀시트를 body 마지막 자식 요소로 ..