너무 오랜만에 정리한다. 크게 새로운 소식들이 많지 않아서 미루고 있다가 Vue3 공식 릴리즈를 중심으로 몇 가지 링크를 정리해본다.

Vue3 One Piece 공식 릴리즈

Image for post
Image for post
Vue v3.0.0 One Piece

베타 기간이 드디어 끝나고 2020년 9월 19일, Vue3가 공식 런칭했다. 릴리즈 명칭은 원피스(One Piece). 의로운 해적을 자처한다는 것일까.(참고로 2.6은 Macross였고 2.0은 Ghost in the Shell 였다.) 라고 잠깐생각했는데 Evan You가 그냥 일본애니 덕후라 그런게 아닌가 싶다. 아무튼 릴리즈 문서를 요약해보면

  • 3.0 공식버전은 지난 2년 동안 30개가 넘는 RFCs, 2600개의 커밋, 99명의 기여자들의 628개의 풀리퀘스트 등의 노력 + 코어 밖의 어마어마한 개발과 문서 작업들로부터 탄생되었다.
  • Progressive Framework 컨셉 : Vue가 처음엔 누구나 쉽게 접근할 수 있는 컨셉으로 출발했는데, 사용자 층이 넓어지고 요구사항의 범위가 넓어짐. …


목표

  • 태그매니저로 특정 요소의 클릭 이벤트를 추적하고 싶다.
  • class나 id로 추적하고 싶지 않다.
  • 그래서 data-woo=”cta-button” 식의 Data 속성으로 클릭 이벤트를 추적하고자 한다.
  • 데이터는 GA에 이벤트 형태로쌓는다.

왜 Data 속성으로 클릭 이벤트를 추적하기로 했나

보통 처음 태그매니저를 시작할때 좀 더 쉽게 클릭을 추적할 수 있는 방법은 clsss나 id 혹은 태그이름 같은 것으로 트리거를 걸어서 태그를 설정한다. 클래스등을 추적하는 장치는 태그매니저에 기본적으로 설정이 되어있어서 개발자의 도움없이 바로 시작할 수 있다.

하지만 단점이 있는데, 개발자나 디자이너가 그 클래스를 수정했을때, 난감해진다. 요즘 트렌드는 서비스가 정말 빨리 바뀌고 없어지고 생기는것이 중요해졌다. 변경을 자제시키거나 변경시 알려달라고 하는것은 뭔가 맞지 않다. 변경에대한 의존성을 떨어뜨리는게 좀 더 낫다.

그래서 우리는 data 속성을 통해 클릭 이벤트를 수집하기로 했다. 개발자와 데이터담당자, 디자이너 등의 협업을 통해 속성의 네이밍과 값의 규칙을 정했다. …


이전 글 “Vue.js 양방향 데이터 바인딩 활용 : 모달(레이어팝업) 컴포넌트 만들기를 통하여 알아보기”과 연결되는 글로써,

  • Vuex를 통해 다수의 모달의 상태관리를 하는 방법을 설명한다.
  • 다만, n개의 모달이 생기면 n개의 상태를 관리해야하는 비효율을 피하기 위해 동적으로 관리되는 상태를 만들어 본다.

복습: 양방향 데이터 바인딩과 모달

이 글을 이해하려면 반드시 이전 글을 이해하고 있어야 한다. 이전 글에서 Vue.js 의 양방향 데이터 바인딩(sync) 기능을 사용하여 부모에서 모달을 켜고 끄는 방법을 설명했다. 모달에 일종의 유선 리모컨을 설치한 것이라고 비유할 수 있겠다. 그러니까 모달을 직접 품고 있는 부모 컴포넌트에서만 모달을 켜고 끌 수 있다.

과제: 상태관리와 모달

비유하자면 무선 리모컨을 설치하고 싶은 것이다. 일반적인 애플리케이션을 컴포넌트의 관계들이 매우 복잡하다. 그런 가운데 모달의 직접 부모가 아닌 다른 컴포넌트에서 모달을 제어하고 싶어지는 상황은 자주 일어난다. …

About

Jeong Woo Ahn

Vue.js 관련 이야기들 | 그림그리는 프로그래머 | working at habitfactory.co | 커피한잔 후원하기 https://bit.ly/355PDlu | 이메일 구독하기 http://bit.ly/3ax32Fn

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store