egjs 2023년 2분기 릴리즈 소식을 전해드립니다

안녕하세요, 네이버의 FE 오픈소스 컴포넌트 그룹인 egjs의 23년 2분기 릴리즈 소식을 전해드립니다.

🎉 CFCs를 소개합니다.

하나의 컴포넌트를 모든 프레임워크에서 사용할 수 있도록 변환하는 모듈 CFCs를 소개합니다.

• Github: https://github.com/naver/cfcs
• 데모: https://naver.github.io/cfcs/
• Deview 예제: https://github.com/egjs/deview2023

우리는 React, Vue, Svelte 등 다양한 프레임워크들을 지원하기 위해 각 프레임워크를 사용하는 방법을 배우고, 프레임워크별 코드를 작성하고 유지보수해야 합니다.

이러한 어려움을 해결하기 위해 우리는 CFCs (Cross Framework Components) 라는 모듈을 개발해서 하나의 공통 코드를 여러 프레임워크에 알맞게 변환하게 되었습니다.

CFCs는 어떻게 동작하나요?

CFCs는 프레임워크들의 공통점을 하나의 공통 코드로 묶어 각 프레임워크에서 구현이 필요한 부분을 최소화시킵니다.

CFCs는 두 가지 사용법이 제공되며, 이 중 컴포넌트에 알맞는 방법을 선택해서 사용되고 있습니다.

CFCs Dom

CFCs Dom은 Flicking, InfiniteGrid, View360, View3D처럼 DOM을 생성하거나 변경하는 UI 컴포넌트를 프레임워크에서 지원하기 위한 방법입니다.

appendChild, insertBefore처럼 DOM을 직접 조작하는 동작을 가진 컴포넌트를 프레임워크에서 그대로 사용한다면 DOM diff에 문제가 발생할 수 있으므로 DOM을 동기화해주는 작업을 수행합니다.

각 컴포넌트에서 DOM을 조작하는 방법들에 차이가 있어 아직 CFCs Dom은 공통화된 모듈로 제작되지는 않았으며, 추후 제공될 예정입니다.

CFCs Reactive

CFCs Reactive는 Axes, ImReady처럼 DOM 렌더링이 포함되지 않고 상태에 따라 반응할 수 있는 유틸리티성 컴포넌트를 프레임워크에서 지원하기 위한 방법입니다.

CFCs Reactive는 바닐라 컴포넌트에서 Methods, Events와 State를 정의하는 공통 코드를 작성하고 중간 코드인 Adapter를 설정하면 각 프레임워크에서 알맞은 형태로 변환하여 외부에 노출시킵니다.

Adapter에서는 프레임워크들의 Lifecycle과 알맞게 매칭되어 동작하는 created, init, destroy 등의 Lifecycle을 선언해서 같은 동작을 여러 프레임워크에 적용시킬 수 있습니다.

CFCs가 사용되는 예시들을 소개합니다

그렇다면, CFCs는 egjs 컴포넌트들에서 어떻게 사용되고 있을까요?

Flicking, InfiniteGrid, View360, View3D 컴포넌트에서는 CFCs DOM을 사용해서 각 프레임워크를 지원하고 있습니다.

또한 Axes, Conveyer, ImReady 컴포넌트에서는 오픈 소스로 공개된 CFCs Reactive 모듈을 사용해서 중간 코드인 Adapter만으로 각 프레임워크를 지원하고 있습니다.

일례로 네이티브 스크롤에 드래그 제스쳐를 지원하는 컴포넌트 Conveyer에서는 스크롤 지점의 시작과 끝 부분에 도달했는지에 대한 여부를 Reactive State로 관리합니다.

Conveyer의 프레임워크별 구현 예시 React Vue2 Vue3 Angular Svelte

Reactive Adapter에서 사용할 Reactive State를 정의하면 CFCs에서는 Reactive State를 프레임워크들에 알맞는 형태로 사용할 수 있게끔 변환합니다.

이 밖에도 사용자가 가상의 좌표계를 정의하고 드래그/휠/키보드 등의 입력 장치를 연결해서 조작하는 컴포넌트 Axes는 사용자가 정의한 좌표계의 이름을 Reactive State로 등록해서 프레임워크들에서의 사용성을 개선했습니다.

Axes의 프레임워크별 구현 예시 React Vue2 Vue3 Svelte

우리는 이렇게 egjs 컴포넌트들에 새롭게 CFCs를 도입하며 프레임워크별 코드를 최소화시키고 기능 추가 및 유지보수를 더욱 용이하게끔 만들어나갈 수 있었습니다.

하나의 공통된 코드로 동시에 여러 프레임워크를 관리할 수 있는 CFCs에 대해 보다 자세히 알고 싶다면 Deview 2023 발표와 CFCs 공식 문서를 확인해보세요.

🔖 egjs 릴리즈 내역

@egjs/flicking

• setStatus 를 사용할 때 index 를 0으로 설정하면 작동하지 않던 현상이 수정되었습니다.

@egjs/conveyer

• 인스턴스가 초기화되기 전에 window.Element가 오버라이드되었을 때 오류가 발생하는 현상을 수정했습니다.
• 스크롤 영역 가장자리에서 바깥쪽으로 scrollIntoView 를 할 때 옵션에서 주어진 duration 보다 애니메이션이 일찍 종료되는 현상을 수정했습니다.
• Conveyer 내부 메서드를 사용해서 스크롤을 움직일 때finishScroll 이벤트에서 isTrusted 값이 true 였던 현상이 수정되었습니다.
• 스크롤의 시작 및 끝 지점에서 reachStart, leaveStart, reachEnd, leaveEnd 이벤트가 발생하기 위한 거리를 설정하는 boundaryMargin 옵션이 추가되었습니다.
• finishScroll 이벤트에 스크롤이 이루어진 방법을 파악하기 위한 isWheelScroll 과 isAnimationScroll 속성이 추가되었습니다.

@egjs/grid

• 이제 item들의 목록을 갱신하는 updateItem 을 public 메서드로 지원합니다.

@egjs/infinitegrid

• 각 프레임워크별 컴포넌트에 infoBy 속성이 추가되었습니다.

@egjs/view360

• Vue에서 data() 내부에 projection을 정의해서 사용시 이미지 decoding을 매 프레임마다 수행하면서 퍼포먼스가 낮아지는 현상을 수정했습니다.