Frontend/Vue3 Vue2 vs Nuxt2: element 변동시 Scroll 동작 비교 (feat. anchor) 이슈 및 원인컴포넌트 리스트가 있는 페이지에서 중간 요소를 삭제할 때, Vue2와 Nuxt2 프로젝트 간 스크롤 동작의 차이가 발생했다.Vue2에서는 삭제된 요소 아래의 컴포넌트가 위로 올라오며 시야가 바뀌는 현상이 발생Nuxt2에서는 현재 보고 있던 시야가 유지되고, 삭제된 위치에 위쪽 요소가 내려오거나 아래 요소가 자연스럽게 채워지는 형태로 동작해당 차이는 overflow-anchor의 작동 방식이 DOM 구조에 따라 다르게 체감되는 데에서 기인하는 것으로 판단한다.Vue2와 Nuxt2 모두 기본적으로 overflow-anchor: auto 상태이지만, 실제 스크롤 시 컴포넌트 삭제 등의 레이아웃 변화에 따라 체감되는 스크롤 보정 동작은 완전히 다르게 나타난다. 비교항목Vue2Nuxt2overflow.. 2025. 4. 11. [Vue3] 실행관련 build 없이 빠르게 실행하고 싶을때https://vuejs.org/guide/quick-start 2024. 11. 3. [Vue3] Vue3 Basic with composition api 반복문 key를 고유값으로 해주는게 좋다. 그래야 VueRK 리랜더링할 구역을 쉽게 찾아. 최적화됨값 동적 바인딩을 위해 :key 로 사용({값}, index) 형태로 사용 가능key에 index 넣는건 디폴트이기때문에 딱히 의미없음. 다른 고유값넣기Array, Object 지원.데이터 반응형으로 Array에 값이 추가되거나 삭제시에도 반영됨{{ index, name }} Formv-model modifier 은 커스텀이 가능하다.참고 : https://vuejs.org/guide/components/v-model같은 데이터에 여러 input이 바인딩되면, 각각 업데이트되는대로 데이터가 변경된다.{{ data }} // clickA : A / clickB : Bmodel 여러개와 modifier 쓰기.. 2024. 11. 3. 이전 1 다음
