VUE 썸네일형 리스트형 Vuex -> Pinia migration + 로그인 상태 유지 및 authStore https://pinia.vuejs.org/cookbook/migration-vuex.html Pinia | The intuitive store for Vue.jsIntuitive, type safe, light and flexible Store for Vuepinia.vuejs.org Vue 2버전대 레포를 Vue3 로 버전업을 하였는데요.상태관리라이브러리 역시도 Vue3 와 호환성이 좋은 Pinia 로 마이그레이션을 할려고 합니다. (vue공식 홈에서도 Pinia 사용을 권장하기도 함)Vuex는 Vue.js 애플리케이션에서 상태 관리를 위한 공식 라이브러리로, Vue 2와 함께 널리 사용되었습니다. 그러나 Vue 3가 출시되면서 새로운 상태 관리 라이브러리인 Pinia가 등장했습니다. Pinia는 .. 더보기 [Vue.js] Vue2 탈출기: Vue3 마이그레이션 가이드 이전 글에 이어서 Vue2.7 upgrade + Vite 적용 Vue3로 성공적으로 업그레이드 했습니다..! Vue2 에서 Vue3로 업그레이드하는 거는 금방이지만, 그에 맞춰 종속된 라이브러리들을 Vue3에 맞게 리팩토링하는게 더 오래 걸린 것 같아요.하면서 중간중간 기획개발도 같이 진행하고, QA도 진행하면서 수정개발하니 커밋 기록상 진행 일자는 아래와 같습니다. 🗓️ 처음 시작일 : 2024년 9월 3일 🗓️ 마지막 QA 수정 개발 완료 : 2024년 10월 4일실 md 는 대략 2주정도? 인 것 같네요 이제 앞으로 장기적인 리팩토링을 진행해야 합니다. 틈틈히 진행해야 할 것 같아요 vue3 로 가면서 맞춰가야할 사항 (장기적인 목표)▫️Composition API + SFC 구조 [scri.. 더보기 [Vue.js] Vue2 프로젝트, Webpack에서 Vite로 마이그레이션하기! 현업에서 몇개의 레포들이 Vue2를 사용하고 있는데요. 올해의 목표에서 하나의 레포를 Vue2 → Vue3 로 마이그레이션을 하는 것으로 잡았습니다.Vue2 프로젝트를 진행하면서, 기존의 Webpack 빌드 도구가 무겁고 느리게 느껴지기 시작했습니다. 특히, 대규모 프로젝트에서는 빌드 시간이 길어지고, 개발 서버의 반응 속도가 떨어지는 문제가 발생했습니다.이러한 문제를 해결하기 위해 저는 Vite로의 마이그레이션을 고려하게 되었는데요! Vite는 빠른 개발 서버와 즉각적인 모듈 핫 리로딩을 제공하여 개발 생산성을 크게 향상시킬 수 있는 도구입니다. 또한, Vite는 최신 브라우저의 네이티브 ES 모듈을 활용하여 빌드 속도를 극대화하고, 번들링 과정에서의 불필요한 오버헤드를 줄여줍니다. 이전 회사에서 Vi.. 더보기 [Vue.js] Vue.js 개발을 위한 필수 VSCode 플러그인 추천 Vue.js로 개발할 때, 효율성을 극대화하고 생산성을 높이기 위해서는 적절한 개발 도구와 플러그인을 사용하는 것이 중요합니다.특히, Visual Studio Code(VSCode)는 Vue.js 개발에 최적화된 다양한 플러그인을 제공하여 개발자들이 더 편리하게 작업할 수 있도록 도와주는데요.이 글에서는 Vue.js 개발 환경을 더욱 강력하게 만들어줄 VSCode 플러그인들을 소개하고, 각 플러그인의 주요 기능과 설치 방법을 설명하겠습니다. 이를 통해 여러분의 개발 경험을 한층 더 향상시킬 수 있을 것입니다! VSCode Plugins 설치 HTML/CSS 마크업 (코드 입력) 을 도와주는 확장 프로그램을 설치해보도록 하겠습니다.확장 프로그램들은 우리가 코딩을 할 때, 더 효율적으로 작업 할 수 있.. 더보기 [Vue.js] Vue.js에서 BroadcastChannel 사용법: 실시간 데이터 동기화하기 최근 프로젝트에서 기획자분이 한 사용자가 같은 컴퓨터에서 여러 개의 브라우저 탭을 열어놓고 작업할 때, 'A' 탭에서 데이터를 변경하거나 어떤 처리를 했을 경우, 다른 탭('B' 탭)에 변경 사항이 즉시 반영되지 않는 문제를 해결해달라고 찾아왔다. 이 문제는 사용자 경험에 큰 영향을 미칠 수 있는 상황으로, 웹서비스가 관리자페이지이다보니 실시간 데이터 동기화가 중요한 서비스에서 반드시 해결해야 할 과제였다. 이번 글에서는 문제의 원인을 분석하고, 이를 해결하기 위해 어떤 접근 방식을 사용했는지 공유하고자 한다. 서론ATab, BTab 이 있는 상황에서 ATab이 로그아웃 할 경우 브라우저 내의 토큰을 제거하는 로직이 이미 구현되어 있었다.하지만 이렇게 할 경우 BTab 에선 ATab 에서 일.. 더보기 Mixpanel + vue 연동 데이터팀에서 믹스패널 적용에 대한 요청이 왔다. 믹스패널은 아래에 페이지에 잘 설명되어 있다. https://docs.mixpanel.com/docs/what-is-mixpanel What Is Mixpanel? - Mixpanel Docs docs.mixpanel.com 간단히 얘기해보자면 우리 서비스에서 사용자가 어떻게 행동하는지 분석해주는, 사용자 행동기반의 제품 데이터 분석 툴(Product Data Analystics Tool)이다. 믹스패널은 좀 더 쉬운 의사결정을 위해, 또 사용자의 편의를 위해 기본 리포트인 인사이트, 퍼널, 플로우, 리텐션 리포트 이외에도 대시보드, 코호트 등 다양한 기능을 제공한다. Vue.js 기반 프로젝트에서 믹스패널 연동한 과정 1. package 설치 npm in.. 더보기 실무에서 테스트 환경 적용기 [cypress, vue] 👁️🗨️ 테스트를 도입하게 된 배경 현재 회사에서 개발하고 있는 택시회사 erp 시스템이 규모가 꽤 커졌다. ERP 시스템인 만큼 급여시스템을 다루고 많은 택시회사들을 다루게 되다보니 관리포인트도 커지게 되었다. 분리되어 있는 페이지에서 다른 페이지에 서로 영향이 가는 기능도 많기 때문에 거기에 사용자가 복잡함을 느끼지 않는지, flow 에 방해가 되거나 혼돈을 주지 않는지, 등등을 고려해서 테스트해야한다. 복잡한 비즈니스 로직을 어떻게 하면 빠르고 안정성을 보장할 수 있을까 라는 고민도 커지게 되었고 이슈픽스에 더더욱이나 테스트 환경이 필요하게 되었다. + 팀원들의 PR리뷰하는데 시간도 많이 걸린다... 즉, 테스트하는데 시간을 단축시켜보자! ➿ 왜 E2E? snapshot test, unit tes.. 더보기 [Vue.js] Options API vs Composition API Vue3 에서 애플리케이션을 만들 수 있는 방법은 크게 2가지가 있습니다. 1️⃣ vue2 에서 사용해왔던 Options API 2️⃣ vue3 에서 새롭게 등장한 Composition API Vue2에서는 Options API 의 단점을 보완하기 위해 Composition API 가 등장했으며, Vuu3에서는 Composition API 를 권장하고 있다. Options API vs Composition API 비교 Options API data, methods, mounted 와 같은 옵션을 사용한다. Composition API 반응형 코드를 작성하는 단일 setup 함수가 있다. Compositions API는 옵션(data, methods, mounted ...) 을 선언하는 대신 가져온 함수 .. 더보기 [Vue.js] 컴포넌트에 대해 HTML -> Vue 로 변환해서 컴포넌트의 이점을 알아보자. 컴포넌트란? 컴포넌트를 왜 사용? 컴포넌트는 어떻게 사용? 컴포넌트 정의 ➜ 컴포넌트 등록 ➜ 컴포넌트 사용 컴포넌트 시스템이란? 컴포넌트 (Component) 자바스크립트에서 재사용할 수 있도록 코드를 분리한 파일을 모듈이라고 한다. Vue 에서도 UI(HTML, CSS, JS) 를 재사용할 수 있도록 정의한 것을 컴포넌트라고 한다. 📌 JavaScript 코드를 재사용하는 모듈과 다르게, 컴포넌트는 JavaScript 뿐만 아니라 HTML, CSS 도 함께 캡슐화하여 재사용이 가능하게 한다. 컴포넌트를 사용하는 이유 컴포넌트를 사용하면 UI를 재사용할 수 있다. ➜ 프론트엔드 개발을 하다보면 JavaScript 뿐만 아니라 HTML, CS.. 더보기 [Vue.js] 뷰 컴포넌트 컴포넌트란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다 재사용성 직관적 이해 뷰에서는 웹 화면을 구성할 때 흔히 사용하는 네비게이션 바, 테이블, 리스트, 인풋 박스 등과 같은 화면 구성 요소들을 잘게 쪼개어 컴포넌트로 관리 컴포넌트 등록하기 📌 전역(Global) 컴포넌트 등록 여러 인스턴스에 공통으로 사용할 수 있다 뷰로 접근 가능한 모든 범위에서 사용 가능 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다 전역 컴포넌트를 모든 인스턴스에 등록하려면 Vue생성자에서 .component()를 호출하여 수행하면 된다 Vue.component('컴포넌트 이름', { //컴포넌트 내용 .. 더보기 이전 1 2 다음
