Vue (4) 썸네일형 리스트형 Vue router 이동 시, 페이지 최상단으로 이동 1. 문제 정의 Vue.js 를 이용하여 프로젝트를 진행하고 있습니다. 이와 같이 모집안내, 지원하기를 클릭 시 vue router를 이용하여 페이지 이동을 진행하고 있는데, 여기서 문제점이 있습니다. 바로 페이지를 이동하면 그 카테고리에 해당하는 최상단을 보여주는 것이 아닌, 현재 스크롤 위치 그대로 페이지를 랜더링 한다는 점입니다. 이번 포스팅에서는 이러한 문제를 해결해보도록 하겠습니다. 2. Scroll Behavior Vue3를 이용한 현재 프로젝트는, 페이지간 이동을 Vue Router를 이용해서 진행하고 있습니다. src/router/index.js 에서 스크롤 설정을 추가해주도록 하겠습니다. import { createRouter, createWebHistory } from 'vue-.. Multi-word component names Error 1. 문제 정의 이름을 축약하지 않는 선에서 간단히 지으면 가독성에 좋다고 생각하여 한 단어로 표현할 수 있으면 한 단어로 표현하려고 하였습니다. 하지만 홈 화면과 같이 Home.vue 로 이름을 지으니 에러가 발생하였습니다. 2. 문제 분석 📖 Rule Details This rule require component names to be always multi-word, except for root App components, and built-in components provided by Vue, such as or . This prevents conflicts with existing and future HTML elements, since all HTML elements are single wor.. Header, Footer 상단 하단 고정 1. 문제 정의 이전 포스팅을 통해 상하좌우에 있는 기본적인 vue 공백을 제거하는데 성공했지만, 여전히 문제가 남아있습니다. 본문의 내용이 짧을 경우 footer가 위로 올라온다는 문제가 있습니다. 이를 다음 코드를 통해 해결해보겠습니다. 2. 문제 해결 다음 코드를 App.vue style 영역에 추가해보겠습니다. 3. 코드 설명 #app # 기호는 css에서 id 선택자를 나타냅니다. Vue.js 프로젝트의 기본 구조에서는 주로 최상위 컴포넌트를 나타냅니다. display : flex Flexbox 모델을 사용하여 #app 내의 자식 요소들을 유연하게 배치합니다. flex-direction : column Flexbox의 주 방향을 수직(column)으로 설정합니다. 기본값은 row로 수평 방향입니.. vue 여백 1. 문제 정의 Vue 프로젝트를 생성해서 헤더와 푸터를 만들어서 화면 테스트를 하는 도중에 문제를 발견했습니다. 사진과 같이 상하좌우 여백이 생기는 것을 볼 수 있습니다. 2. 문제 해결 처음엔 헤더와 푸터에 css 요소를 잘못 적용했다고 판단하여, 헤더 푸터와 관련된 글들을 구글링 해보았습니다. 하지만 저와 같은 현상을 찾아보기 힘들었습니다. Vue의 특성인가 고민이 돼서 다시 찾아보니, Vue 프로젝트는 상하좌우 8px 씩 margin을 두는 것을 알 수 있었습니다. 이를 해결하기 위해 Root 컴포넌트인 App.vue의 style 영역에 다음 코드를 추가해주었습니다. body { margin: 0; } 이를 적용하니 다음과 같이 문제가 해결되었습니다. 이전 1 다음