VUE 썸네일형 리스트형 [Vue.js] BroadcastChannel 이슈는 한 사용자가 같은 컴퓨터에서 탭을 여러 개 띄워놓고 같은 계정 or 다른 계정 을 같이 로그인 할 수 있어 ATab에서 데이터를 변경하거나 어떤 처리를 했을 경우 다른 탭에 적용이 안되는 문제가 있었다. -> 필요한 해결 니즈 프로젝트에서 A탭에서 로그아웃 하고 다른 계정으로 로그인 했을 때 B탭에도 이를 동기화 하는 방법 ATab, BTab 이 있는 상황에서 ATab이 로그아웃 할 경우 브라우저 내의 토큰 제거하는 로직으로 되어있었다. 하지만 이렇게 할 경우 BTab 에선 ATab 에서 일어난 로그아웃 이벤트가 전달되지 않았다 (cookie 나 storage에 토큰 제거 되어있는 상태) 그래서 로그인 되어 있는거 같은 화면에서 새로고침을 해야하는 상황인데 vueuse 의 BroadcastChan.. 더보기 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('컴포넌트 이름', { //컴포넌트 내용 .. 더보기 [Vue.js] Vue Instance 뷰 인스턴스 (Vue Instance) 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위 뷰 인스턴스 생성 new Vue({ ... }); 🍀 'Hello World' 를 출력하는 코드 더보기 [Vue.js] Vue.js 란 회사에서 쓰는 프론트엔드 프레임워크는 '뷰'를 쓰고 있다. 무엇보다 프론트엔드는 자바스크립트만 잘 할 줄 안다면(물론, HTML, CSS 도 알아야 하지만) 어느 프레임워크를 쓰던지 쉽게 적응이 가능하다 그야말로 프레임워크는 자바스크립트를 유용하게 쓰기위한 '프레임워크' 일뿐! 틈틈이 자바스크립트를 얼른 마스터해야겠다... 📌 Vue.js 란? 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크 뷰는 화면단 라이브러리이자 프레임워크이다 프레임워크 개발자들의 개발 생산성을 높이기 위해 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 라이브러리 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 돔 HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있.. 더보기 이전 1 다음
