동고 팔자 상팔자

이 글에서는 Vue2의 반응성을 직접 구현해 보며 동작원리를 살펴볼 것이다. Vue3의 반응성을 바로 살펴보지 않고 Vue2 먼저 하는 이유는 Vue2의 반응성을 알면 Vue3도 쉽게 이해할 수 있기 때문이다. 미리 스포를 하자면 Vue2와 Vue3의 반응성의 가장 큰 차이점은 Vue2는 Object.defineProperty를 사용하여 반응성이 구현하고, Vue3는 Proxy를 사용하여 반응성을 구현한다는 것이다. Vue2 예제 코드 간단한 Vue2 코드이다. 이 글에서 구현해볼 샘플 코드이기도 하다. data 안에 price와 count 값이 있다. Vue2는 Vue 인스턴스에 data 옵션으로 전달되는 객체의 모든 속성을 순회하며 Object.defineProperty의 getter, setter를..

리액트(react), 뷰(Vue) 등 많은 SPA 프레임워크(라이브러리라고 부르기도 함)은 자신만의 반응성(Reactivity) 엔진을 가지고 있다. 반응성은 선언적 방법으로 변경 사항을 적용할 수 있게 해주는 프로그래밍 패러다임이다. 예를 들어 어떤 데이터가 변경되었을 때 화면 렌더링이 자동으로 수행된다면 이걸 반응성이 있다고 부른다. 기존 프론트엔드 개발이 화면을 어떻게 그릴지에 초점을 맞추고 개발했다면, SPA 프레임워크들이 나온 이후에는 데이터를 중심으로 데이터가 변경되면 화면이 어떻게 변할지에 초점을 맞추고 개발을 하게 되었다. 개발자는 데이터를 다루는 데 집중하고 데이터가 바뀌면 데이터에 맞는 화면 렌더링은 프레임워크에 위임하는 것이다. 그래서 요즘 SPA 웹 개발을 반응형 프로그래밍이라고 부..

Sentry는 로그 취합 및 분석 도구이자 모니터링 플랫폼이다. Front-End 로그 수집에도 많이 사용되는 플랫폼이다. 다양한 프레임워크를 지원하고, 로그 시각화 도구까지 지원한다. Saas 형태로도 제공하고 onpromise 방법도 제공한다. docker compose나 helm chart를 사용하여 쉽게 설치할 수 있다. 개인 서버가 있고, freetier가 부족하면 직접 설치해서 사용하는 것도 좋은 선택이다. Self-Hosted 설치 Docker compose 또는 helm chart를 사용하여 설치한다. 가이드 : https://github.com/getsentry/self-hosted git : https://github.com/getsentry/self-hosted helm chart :..

여러 프로퍼티를 한 번에 watch 하는 방법 아래와 같은 코드가 있다. car와 coffee 값이 변하면 동일한 doSomething 함수를 호출한다. 여러 개를 watch 해야 하는 상황에서 모든 프로퍼티마다 watch를 선언하지 않고 한 번에 하는 방법이 있다. watch: { car: function (val, oldVal) { doSomething(); }, coffee: function (val, oldVal) { doSomething(); }, // .. so on } Vue 3 Vue 3에서는 아래처럼 할 수 있다. import { watch, ref } from 'vue'; export default { setup(() => { const car = ref('car'), coffee = ..