vue8 Vue Router 에서 해시태그로 앵커 위치로 이동하기 html 코드로 작성할때 a tag id값만 가져와서 url 끝에 #id 붙여주면 화면에서 해당 엘리먼트 위치로 바로 이동되게 하는 것을 vue에서는 어떻게 처리를 할까?? scrollBehavior: (to) => { if (to.hash) { // if has a hash... console.log(to.hash); return { selector: to.hash, offset: { y: 200 } }; // scroll to the element } return { x: 0, y: 0 }; }, Vue Router 객체 안의 scrollBehavior에서 hash가 있는 지 확인후 있다면 그 위치로 이동시킨다. 나같은 경우에 header navigation이 차지하는 영역이 있어서 그대로 위치로 이.. 2022. 1. 19. [Vue] Vue의 반응형 시스템 Vue에서 data가 변경될 때 어떻게 그때 그때 반응하고 업데이트해서 DOM을 rerender할까요? 1. getter와 setter는 속성에 접근(get)하거나 수정(set)할 때, Vue가 종속성 추적 또는 변경 알림을 수행할수 있습니다. 2. 모든 컴포넌트 인스턴스에 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링 되는 동안 수정된 모든 것을 기록합니다. 3. 나중에 종속적인 setter가 트리거가 되면 watcher에 전달하고 컴포넌트가 리렌더링 됩니다. Vue는 DOM 업데이트를 비동기적으로 처리하는데요, 1. 데이터 변경 발견 -> 큐에 이벤트루프에서 생기는 모든 데이터 변경을 버퍼에 담음 2. 같은 Watcher가 여러번 발생 시 대기열에서 한 번만 푸시됨.. 2021. 5. 7. [quasar] 정말 유용한 q-table 컴포넌트 저는 요즘 quasar로 요즘 관리자 페이지를 개발하고 있는데요. 관리자페이지는 서비스의 여러가지 데이터를 CRUD해야하는 페이지들이 많기 때문에 대부분의 페이지에서 스크롤압박이 느껴지게 하는 목록형태가 빠짐없이 등장하곤합니다. 이러한 여러 필드가 있는 데이터들을 그려줄 때 quasar의 q-table 컴포넌트를 정말 유용하게 사용하고 있어요. q-table 컴포넌트는 기본적으로 이렇게 생겼는데요. 객체배열형태로 칼럼과 칼럼에 들어갈 필드를 지정해주고 데이터를 붙여주면 이렇게 유용한 테이블을 알아서 그려줍니다. 이런 식으로 script 안에 데이터와 칼럼을 지정해주면 됩니다. 일일이 머스태쉬 안에 프로퍼티를 집어넣는 노가다를 할 필요없이 자동으로 테이블을 그려주니 정말 편하지요? 또한 칼럼에 속성을 지정.. 2021. 4. 29. [Vue] Computed의 다양한 사용법 1. 언제 computed를 사용하나? 어떤 data를 {{ }} 템플릿 안에 표현식으로 가공해서 표현해야할 때 연산이 너무 길어지거나 복잡해지면 유지보수하기가 힘들고 가독성도 떨어지게 됩니다. 그런 복잡한 식이 될 경우 computed 속성을 사용하면 간결하게 표현할 수 있는데요. 예시를 한번 보겠습니다. 만약 예를들어 데이터로 ㎡ 단위의 숫자를 받아서 평수로 계산해서 보여줘야한다면 평수 계산식을 computed 안에서 사용해서 보여주는 편이 좋습니다. data: function () { return { size: 3323 } }, computed: { squareSize: function () { if (!this.size) return 0 return `${Math.round(this.size / .. 2021. 4. 28. [quasar] quasar config에서 경로 alias 설정하기 quasar 프로젝트, 아니 굳이 quasar가 아니더라도 프론트엔드 프로젝트를 진행하다보면 만들어놓은 컴포넌트와 애셋들을 불러올때 저렇게 지저분하게 ../../ 이런 경로를 써야할 때가 있는데요. 저런 길다란 경로들은 보기에 좋지 않을 뿐더러 개발할 때 헷갈리기 쉽습니다. 그래서 보통 그럴 때 경로 alias를 사용해서 import할 시 축약되어 간결한 방법으로 컴포넌트를 불러올 수 있는데요. quasar에서 프로젝트 전반적인 설정은 quasar.conf.js에서 할수 있는데 이 alias도 마찬가지입니다. quasar.conf.js에서는 전역으로 주입할 js파일 설정하기 css 파일 설정 quasar에서 지원하는 roboto 폰트, material icon, fontawesome icon을 추가하기 .. 2021. 4. 21. [quasar] quasar의 input 컴포넌트 Quasar는 Vue기반 프레임워크입니다. 쉽고 빠른 프론트엔드 개발을 위해 미리 갖추어진게 많은 프레임워크인데 저는 회사에서 프론트엔드 개발을 Quasar를 이용해 진행하고 있습니다. 프론트엔드 개발을 하면 form 양식을 만들어야할 때가 굉장히 많은데요. form요소들은 만들 때 고려해야할 몇가지 까다로운 것들이 있습니다. 사용자에게 받아와야할 데이터의 종류에 따라 form의 형태, 플레이스홀더, 유효성 검증등을 그때마다 다르게 해야하는데 Quasar의 input 요소를 이용하면 매우 쉽고 빠르게 form요소 작성이 가능합니다. 1. Input의 스타일 Outline, filled 등 다양한 스타일을 적용할 수 있고 icon옵션을 사용하면 구글 material icon에 있는 icon을 적용할 수 있.. 2021. 4. 20. 이전 1 2 다음
