본문 바로가기

vue.js3

[Nuxt.js & Vue.js] 스크롤 위치 유지하는 방법

개요 무한 스크롤 구현 후, 사용자가 목록을 쭉 내리다가 특정 목록 아이템에 상세 보기 페이지로 진입 후, '뒤로가기'를 했을 때, 사용자가 보던 스크롤 위치를 그대로 보여주기 위한 기능이 필요했다. 스크롤 위치를 보존하는 방법을 소개한다. 컴포넌트 구조 components +- List.vue 👈 destroyed 훅에서 store에 스크롤 위치(scrollY) 저장 +- ListItem.vue pages +- index.vue 👈 저장된 스크롤 위치로 mounted 훅에서 이동 pages/index.vue index.vue가 렌더링된 후에 스크롤 위치 이동 export default { name: 'something', mounted() { setTimeout(() => { window.scrollT.. 2022. 6. 1.

[Chart.js] Vue에서 사용하기.

안녕하세요. 회사에서 외주로 맡겼던 제품코드를 보면서, Chart.js라는 라이브러리를 처음 접하게 되었습니다. 기존에는 apex chart를 제품에 사용하고 있었습니다만, chart.js 또한, 커스텀이 광범위하게 가능하다는 점에서 많이 사용하고 있는 것 같더라구요. 그래서, chart.js를 사용해서 실제 작업 중인 프로젝트에 처음 적용해보면서 공부한 내용을 정리해보고자 합니다. 제가 chart.js로 프로토타입은 만든 결과는 다음과 같습니다. Chart 만들기 Vue 프레임워크에 chart.js를 사용해서 chart를 화면에 그리는 과정을 설명한 글입니다. 일단, 공용으로 여러 컴포넌트에서 재사용할 수 있도록, 파일 구성을 다음처럼 구성했습니다. 📂src | - 📂Modules |- 📂LineCha.. 2021. 7. 26.

[Vue] Virtiual DOM과 Vue 렌더링 원리 알아보기 ✏️

개요 이번 6월에 회사에서 제가 속한 팀을 대상으로 Vue 라이프 사이클에 대한 기술 공유를 제가 맡게 되었었는데요. 단순히, 라이프 사이클에 대한 개념과 사용 방법 공유보다는 라이프 사이클이 어떻게 렌더링으로 작용하는지를 공유하고 싶었습니다. 그 이유는 저와 팀 원들에게 원리와 동작을 충분히 이해하고 프로그래밍을 하자는 메시지를 던지기 위해서였습니다. 공유를 준비하면서 공부한 내용을 총 3개의 시리즈 포스팅으로 작성해봤습니다. ✏️ [웹 렌더링 개념-1] DOM 이해하기 ✏️ [웹 렌더링 개념-2] webkit 렌더링 엔진 작업 순서- 브라우저에 화면이 그려지는 과정 👉 [Vue] Virtual DOM과 Vue 렌더링 원리 알아보기 이번 내용은 Vue가 브라우저에서 렌더링되는 원리를 알아보겠습니다. 그.. 2021. 6. 27.

티스토리툴바