ListDiffer는 리스트(또는 배열) 데이터의 변화를 알아내고 변화 과정을 추적하는 비교 라이브러리입니다. 리스트를 비교하여 얻을 수 있는 변화 값은 데이터의 추가, 제거, 이동입니다. 하지만 이전 데이터에서 이후 데이터로 변화했을 때 과정은 알 수 없을까요? 그래서 ListDiffer에서 추가, 제거, 이동의 변화 과정을 추적하는 기능을 만들었습니다.

데이터 추적의 목적은 최소한의 접근으로 이전 데이터에서 현재 데이터로 만들기 위함입니다. 대표적인 예로 데이터의 변화로 DOM을 동기화하는 React, Angular, Vue와 같은 프레임워크라고 볼 수 있습니다. 프레임워크는 데이터가 변화할 때 전체 데이터 개수만큼 …

Cross Framework Component(CFC)는 하나의 공통 모듈 기반으로 다양한 프레임워크를 지원하기 위한 효과적인 구조를 말합니다.

Cross Framework Component은 Cross Platform의 방식을 착안했습니다. Cross Platform은 하나의 소스코드를 다양한 플랫폼(운영체제, 기기)에서 사용할 수 있는 구조로 Xamarin, Flutter, NativeScript, React Native와 같은 도구를 통해 iOS, Android, Windows 등에서 모두 사용할 수 있습니다.

Cross Framework Component도 마찬가지로 하나의 바닐라 컴포넌트로 React, Angul …

Cross Framework Component (CFC) is an effective structure to support a variety of frameworks based on a single common module.

Cross Framework Component referred to Cross Platform’s approach. Cross Platform is a structure that allows you to use a single source code on a variety of platforms (operating systems, devices) and can be used in iOS, Android, and Windows through tools such as Xamarin, Flutter, NativeScript, and React Native.

The Cross Framework Component is also available in React, Angular, Vue, and so on as a single vanilla component.

There are two ways to use a traditional vanilla component in the…

ListDiffer is a comparison library that detects changes in list (or array) and tracks the progress of the changes. The change values that can be obtained by comparing lists are data added, removed, and changed(moved). But can not we know the process when we change from the previous data to the current data? So we created the ability to track changes in added, removed, and changed in the ListDiffer.

The purpose of data tracking is to make current data from previous data with minimal access. A typical example is a framework such as React, Angular, and Vue that synchronizes data…

I write a post to inform you that I have added a typing effect to Scene.js Effects library.
https://github.com/daybrush/scenejs-effects

Typing animation refers to text that flows like typing in a typewriter.

In this article, I want to introduce the principles of typing animation.

Typing Animation

There are three typical ways to make typing animations.

1. JavaScript Animation
2. CSS Animation (PC Chrome Only)
3. SVG Animation

The animation to be described in this article is JavaScript.
Because it’s simpler than I thought.

CSS animation can also create typing animations using the before or after pseudo selector and content property. …

Scene.js is a JavaScript timeline-based animation library for creating animation websites. As an animated timeline library, it allows you to create a chronological order of movements and positions of objects.

In addition, Scene.js is easy to use and convenient because its grammar is similar to CSS animation and it supports both JavaScript and CSS play methods. In the text, I will detail the main features of it.

Scene.js는 애니메이션 웹 사이트를 만들기 위한 JavaScript 애니메이션 타임라인 라이브러리입니다. 애니메이션 타임라인 라이브러리로서 Scene.js는 물체의 움직임과 위치를 시간순으로 나열할 수 있게 합니다.

또한 문법은 CSS 애니메이션과 비슷하여 사용하기 쉽고, JavaScript와 CSS 플레이를 모두 지원하므로 편리합니다. 이 글의 본문에서는 Scene.js 특징을 자세히 설명하려고 합니다.

Previously we applied Tree Shaking in Webpack and it helped to reduce size.

I was looking for another way to reduce the size other than Tree Shaking. and found Rollup bundler.

Like Webpack, Rollup is a bundler that makes modules (files) of large and complicated code small as a library or application.

This is the problem of Webpack and why I use Rollup.

1. Webpacks are not bundled in ESM format.
2. No redundant code is removed when building from webpack.
3. The default size is large when building from the Webpack.
4. Tree Shaking does not work well in Webpack3.

What would be better with Rollup?

1. Bundled in ESM…