마이그레이션 가이드 (🔖2.x to 🔖3.x)

버젼 2.x에서 3.x로의 마이그레이션 가이드

이 문서는 플리킹을 2.x버젼에서 3.x버젼으로 마이그레이션하는 방법에 대해 설명합니다.

마크업 구조

• 패널은 이제 컨테이너에 의존적인 크기를 갖지 않고, 자기 자신의 크기를 사용합니다. 따라서, 기존과 같은 패널 크기를 유지하기 위해선 패널에 width: 100%를 설정해주셔야 합니다.

.eg-flick-panel {
  width: 100%;
}

• 마크업 구조에서 .eg-flick-container는 삭제되고, .eg-flick-viewport와 .eg-flick-camera로 변경되었습니다.

<!--2.x-->
<div id="flick">
  <div class="eg-flick-container">...</div>
</div>

<!--3.x-->
<div id="flick">
  <div class="eg-flick-viewport">
    <div class="eg-flick-camera">...</div>
  </div>
</div>

옵션

hwAccelerable

• ❌삭제되었습니다. 플리킹이 3.x버젼부터는 안드로이드 2.x버젼을 지원하지 않기 때문에, 하드웨어 가속이 가능한지 체크는 자동적으로 이루어집니다.

prefix

• classPrefix로 이름이 변경되었습니다.

previewPadding

• ❌삭제되었습니다. 하지만, 동일한 UI를 약간의 CSS와 overflow 옵션을 이용해서 구현하실 수 있습니다.

previePadding: [80, 80]과 동일한 UI를 얻기 위해서는, 먼저 플리킹 래퍼에 다음과 같은 CSS를 설정해줍니다.

#flick {
  padding-left: 80px;
  padding-right: 80px;
  overflow: hidden;
}

그리고, 플리킹을 초기화할 때 overflow: true 옵션을 사용해주시면 됩니다.

new eg.Flicking("#flick", {
  overflow: true;
});

실제 구현 데모가 있으니 확인해보세요.

thresholdAngle

• 2.x버젼과 달리, 이 옵션은 사용자 입력의 각도를 제한하기 위해 사용됩니다..

adaptiveHeight

• adaptive로 이름이 변경되었습니다. 이젠 수직 플리킹의 경우에 너비를 adaptive하게 적용하는 데도 사용할 수 있기 때문입니다.

useTranslate

• ❌삭제되었습니다. 이제 카메라를 이동할때는 left가 아닌 항상 translate를 사용하기 떄문입니다.

정적 상수

DIRECTION_*

• 모든 방향 관련 정적 상수들은 제거되었습니다. 대신에, 상/하 또는 좌/우 구분을 용이하게 하실 수 있도록 단일화한 정적 상수 DIRECTION을 사용하실 수 있습니다.

멤버 변수

plugins

• ❌삭제되었습니다. addPlugins과 removePlugins를 대신 사용하실 수 있습니다. 아래의 플러그인 항목을 참조해주세요.

메소드

getElement, getAllElements

• ❌삭제되었습니다. FlickingPanel의 getElement 메소드를 대신 사용하실 수 있습니다.

// getElement
flicking.getPanel(index).getElement();

// getAllElements
flicking.getAllPanels().map(panel => panel.getElement());

getNextElement, getNextIndex

• ❌삭제되었습니다. FlickingPanel의 next 메소드를 대신 사용하실 수 있습니다.

const nextPanel = flicking.getPanel(index).next();
// getNextIndex
const nextIndex = nextPanel ? nextPanel.getIndex() : -1;
// getNextElement
const nextElement = nextPanel ? nextPanel.getElement() : null;

getPrevElement, getPrevIndex

• ❌삭제되었습니다. FlickingPanel의 prev 메소드를 대신 사용하실 수 있습니다.

const prevPanel = flicking.getPanel(index).prev();
// getPrevIndex
const prevIndex = prevPanel ? prevPanel.getIndex() : -1;
// getPrevElement
const prevElement = prevPanel ? prevPanel.getElement() : null;

plugin

• ❌삭제되었습니다. 대신 addPlugins 메소드를 사용하실 수 있습니다. 아래의 플러그인 항목을 참조해주세요.

restore

• ❌삭제되었습니다. 대신 getCurrentPanel와 focus를 같이 사용하시면 동일한 효과를 낼 수 있습니다.

// restore()와 동일
flicking.getCurrentPanel().focus(300);

이벤트

이벤트 플로우가 기존과 확연하게 달라졌습니다. 아래의 이벤트 다이어그램을 확인해주세요.

이벤트 발생 조건	2.x	3.x
사용자 입력 시작시	-	holdStart
사용자 입력 종료시	-	holdEnd
첫번째로 움직이기 시작할 떄	-	moveStart
움직일때마다	flick	move
움직임 종료	flickEnd	moveEnd
애니메이션 시작전	beforeFlickStart	-(change 이벤트가 동일한 타이밍에 발생)
새로운 패널로 이동 시작	-	change
기존 패널로 복귀 전	beforeRestore	restore

이벤트 데모를 확인하시면 실제로 어떻게 동작하는지 확인하실 수 있습니다.

beforeFlickStart

• ❌삭제되었습니다. change 이벤트를 대신 사용해주세요.

beforeRestore

• 이름을 restore로 변경했습니다.
  • eventType 패러미터의 이름을 type으로 변경했습니다.
  • no 패러미터의 이름을 index로 변경했습니다.
  • depaPos와 destPos 두 개의 패러미터는 이제 ❌삭제되었습니다. 사용이 필요할 경우 axesEvent 패러미터에 있는 값을 사용해주세요.
  • direction 패러미터의 값은 이제 숫자가 아니라 문자열으로, "prev" 혹은 "next", 혹은 null입니다.
    • 값이 null일 경우 제자리에 정지하는 것과 같이 방향이 존재하지 않는 경우입니다.
    • "prev"는 eg.Flicking.DIRECTION.PREV, "next"는 eg.Flicking.DIRECTION.NEXT와 같습니다.

flick

• 이름을 move로 변경했습니다.
  • eventType 패러미터의 이름을 type으로 변경했습니다.
  • no 패러미터의 이름을 index로 변경했습니다.
  • pos와 distance 두 개의 패러미터는 이제 ❌삭제되었습니다. 사용이 필요할 경우 axesEvent 패러미터에 있는 값을 사용해주세요.
  • direction 패러미터의 값은 이제 숫자가 아니라 문자열으로, "prev" 혹은 "next", 혹은 null입니다.
    • 값이 null일 경우 제자리에 정지하는 것과 같이 방향이 존재하지 않는 경우입니다.
    • "prev"는 eg.Flicking.DIRECTION.PREV, "next"는 eg.Flicking.DIRECTION.NEXT와 같습니다.

flickEnd

• 이름을 moveEnd로 변경했습니다.
  • eventType 패러미터의 이름을 type으로 변경했습니다.
  • no 패러미터의 이름을 index로 변경했습니다.
  • direction 패러미터의 값은 이제 숫자가 아니라 문자열으로, "prev" 혹은 "next", 혹은 null입니다.
    • 값이 null일 경우 제자리에 정지하는 것과 같이 방향이 존재하지 않는 경우입니다.
    • "prev"는 eg.Flicking.DIRECTION.PREV, "next"는 eg.Flicking.DIRECTION.NEXT와 같습니다.

restore

• ❌삭제되었습니다. moveEnd 이벤트를 대신 사용해주세요.

플러그인

모든 플러그인들은 이제 별개의 레포지토리에서 관리됩니다. 사용을 위해서는 해당 레포지토리 내의 문서를 참조해주세요. addPlugins 혹은 removePlugins를 사용하여 플러그인을 추가/제거하실 수 있습니다.

flicking.addPlugins(new eg.Flicking.plugins.Parallax("img", 4));