custom account 강좌 정리 4 — 기타 효과
7. 화면전환 효과
Meteor 인증(account) 관련 강좌를 더 진행하기 전에 현재만들어진 기능을 조금 보완해 보도록 하겠습니다.
router로 원하는 페이지로 이동이 되고 있지만, 좀 더 있어보이게(?) 화면전환 효과를 넣어보겠고, 또 메일발송 때 화면이 정지한것 처럼 몇초간 아무런 액션이 없는 부분에 로딩효과를 넣어보도록 하겠습니다. 사실 이런 부분들은 꼭 있어야 하는 부분은 아니지만, 먼가 앱의 완성도를 높이기위해서는 적용해두는 것이 좋은 것도 사실일 것입니다.
강좌 중간에 이런 효과적인 부분을 넣는 이유는 앞으로 남은 부분에도 위의 효과 관련 기능은 계속해서 들어갈 것이기 때문에 여기서 미리 작성하는 것이 소스 코드를 2번 고치지 않게 될 것 같아서 입니다.
7.1 애니메이션 효과
일단 다음 패키지를 설치해주세요. 이 패키지는 Meteor에서 다양한 애니메이션 효과를 낼 수 있도록 해주는 패키지 입니다.
#설치패키지
meteor add webtempest:animate
사실 이 패키지에서 사용된 코드는 아래의 애니메이션 프레임워크를 Meteor에서 쉽게 사용할 수 있도록 만든 패키지가 되겠습니다. 아래 링크페이지로 가시면 사용할 수 있는 효과들을 볼 수 있습니다.
사용법은 아래와 같습니다. 효과를 나타내고자 할 요소를 #transition 로 감싸주기만 하면 됩니다. 참 쉽죠? ^^
그리고 지금 만들고 있는 account예제의 경우 사실 페이지가 몇개 되지 않지만, 지금보다 훨씬 많은 페이지로 이루어진 서비스의 경우 각 페이지마다 효과를 준다면 약간 귀찮을 것입니다. 그래서 우리의 화면전환 효과는 mainLayout 템플릿만에만 줄 것입니다. 이곳에만 주면, 특별한 상황이 아닌이상, 모든 페이지가 나타날때 효과가 적용되는 것을 볼 수 있을 것입니다. main-layout.html 페이지를 아래와 같이 변경해주세요.
이제 실행을 시켜보면 화면이 부드럽게 전환되는 것을 볼 수 있습니다.
7.2 로딩 효과
다음은 로딩효과에 대해서 설명드릴 텐데요. 현재 우리가 만들고 있는 페이지에서 로딩 효과가 실제로 필요한 부분은 가입메일 보내기 부분 정도가 될 것입니다. 이중에서도 가입메일 다시보내기 부분의 경우가 2~3초 정도의 딜레이가 생길 수 있어 이때 로딩효과를 주는 것으로 페이지를 좀 더 완성도 있게 보일 수 있을 것으로 생각됩니다.
로딩효과에 사용된 Meteor의 api는 reactive-var 라는 것입니다. 이녀석에 대해서만으로 한챕터 정도 강좌가 필요하겠지만 일단은 간단하게만 설명드리도록 하겠습니다.
reactive-var는 일종의 센서 함수? 라고 보면 될 것 같은데요. 다시말에 어떤 값의 변화를 감지하는 역할을 하는 API라고 보시면 되겠습니다. reactive-var에 특정 상태를 정의해 두고, 이 상태가 변경될 경우 reactive-var가 작동하게 되는데요. 실제 화재감지 센서에서 열이 감지되면 센서가 스프링 쿨러를 작동시켜 주는 머 그런 기능을 하듯(다른 분께서 이렇게 설명 하신 것을 기억합니다.) reactive-var도 거의 비슷한 역할을 한다고 이해하면 될 것 같습니다.
public/images/ 폴더를 만들고, 로딩이미지를 git 페이지에서 다운받아 복사해주세요.
그리고 main-layout.js에 다음과 같이 mainLoading 템플릿을 입력해주세요. 또 mainLayout 템플릿도 아래 소스를 참고로 #if showLoadingEffectLoad 라는 조건문을 하나 추가하겠습니다.
이제 이 mainLoading 템플릿이 잘 작동하도록 만들어 보도록 하겠습니다.
우선은 showLoadingEffect 이라는 값을 정의를 해야 하는데, 이것은 mainLayout 템플릿이 생성될 때 하도록 해주면 되겠습니다. 참고로 이 객체를 window.showLoadingEffect게 만들어 사용하는 이유는 전역으로 해야만 다른 템플릿에서도 이 객체를 사용할 수 있기 때문입니다. 기본값은 false로 정의 하겠습니다.
그리고 이 객체를 템플릿 즉 html에서 사용하기 위해서는 helpers에서 불러 줘야 사용이 가능하니 아래 처럼 Template.mainLayout.helpers 에 리턴을 해주면 되겠습니다.
이렇게 해두면 최상위 페이지인 main-layout 아래의 모든 페이지는 첫 화면이 뜰 때 기본적으로 showLoadingEffect 가 true가 되고, 따라서 mainLoading 템플릿이 활성화 되는 구조를 가지게 됩니다.
reactive-var 는 일종의 센서? 같은 역할을 한다고 설명드렸습니다. 그럼 이 센서(?)가 어떻게 작동하는지 이제부터 알아보도록 하겠습니다.
이제 모든 클라이언트 페이지에서 ‘showLoadingEffect.set(true);’ 이 set된 값을 true로 하면 <template name=”mainLoading”></template>이 보여지고, false로 해주면 이 템플릿이 사라지는 원리입니다.
우선 우리가 만든 페이지 login.html, register.html 페이지에 적용해 페이지가 뜰 때 로딩효과가 나타나도록 해보겠습니다.
다음 소스는 현재 사용하고 있는 login.js 페이지에 conCreated와 onRendered 라는 라이프 사이클 함수를 추가한 내용입니다. onCreated 될 때 showLoadingEffect.set(true); 를 작동시키면 기본적으로 로딩 페이지가 보여지게 됩니다. 그리고 onRendered 일때 showLoadingEffect.set(false); 를 해주면 로딩 화면이 사라지게 사라지게 됩니다. 사라질 때는 바로 false를 해버리면 로딩 효과가 너무 빨리 사라지므로 Meteor.setTimeout을 이용해 약간의 딜레이를 주는 것이 좋을 것 같아 아래와 같이 적용했습니다.
같은 원리로 로딩 효과를 주고 싶은 다른 페이지에도 conCreated와 onRendered 일 때 위의 소스를 넣어주면 로딩 화면 후에 페이지가 보여지게 됩니다.
다음으로 이 효과를 단순히 화면이 변경될 때 주는 것이 아닌 위에서도 말했지만, 인증메일 재발송 같이 정지 화면으로 2~3초 이상 있어야 하는 페이지에 주는 방법을 설명드리도록 하겠습니다. 사실 적용 방법은 위의 내용과 거의 같습니다.
메일 재발송 버튼이’click button[name=resend-verification-link]’ 클릭되면 showLoadingEffect.set(true); 를 줘서 로딩 화면이 나타나게 해줍니다. 그리고 sendVerificationLink 메소드가 실행되고, 완료되는 타이밍(정상실행이던 오류가 났던)에 showLoadingEffect.set(false); 이 세팅을 해주면 끝입니다. 이제 메일 발송후 몇초간의 타이밍에 이용자가 기다려야 한다는 것을 직관적으로 인지할 수 있는 구조가 되었습니다.
이상으로 ReactiveVar를 이용한 Meteor로딩에 대해서 알아봤습니다. ReactiveVar는 이를 응용하면 다양한 부분에 활용이 가능한 신기한 Meteor의 기능입니다. 다양한 부분에서 편리하게 이용해 보셔도 좋을 것 같습니다.
그럼 다음 시간에 account 강좌를 마무리 해보도록 하겠습니다.
