프레임워크/라이브러리가가 발전함에 따라, 대부분의 애니메이션 처리들은 다른 코드에 의존하며 제작하게 되었다. 대략 8년전만 해도.... 애니메이션의 처리를 정밀하게 처리하기 위하여, requestAnimationFrame을 이용하긴 하였다.
requestAnimationFrame에 대해서 잠깐 설명하자면, 브라우저의 경우, 1초에 최대 60프레임을 동작 시킬수 있다. 각 프레임이 렌더링이 되고나서 호출이 되게 하는 부분이라고 생각하면 될 것이다. 즉 모든 requestAnimationFrame을 통하여 60번을 실행하게 되면, 최소 1초이내에 60회가 실행 된다고 보면되지만... 요청하는 내용과 기기의 사양에 따라, 1초보다 훨씬 긴 시간이 될 수 있다.
그 시절 requestAnimationFrame을 이용하여, 구현 할 수 밖에 없었던 것도 있긴하다. 라떼 이야기이긴 하지만, 어쨋든 우리나라에는 IE가 있었기 때문에, css에 의존한 애니메이션동작을 한게가 있었다. 하지만, 지금은 어떤 서비스가 IE를 지원을 할까? 마이크로소프트 공식 홈페이지도 IE를 지원하지 않을 것 같다.
프레임워크/라이브러리 발전에 따라 requestAnimationFrame을 사용할 수도 없는 환경이 되었다. 프레임워크의 경우 내 코드를 실행하는 주체는 프레임워크이고, 그 사이에 너무나 많은 코드들을 수행한다. 즉 프레임워크 외적의 무언가를 사용하여, 값을 변경하는 것은 공유자원에 여러 소비자들이 사용하는 동시성문제 수준의 오류가 발생 할 수도 있다.
가장 간단한 것은 다음과 같은 문제이다.
<script setup>
import { ref } from 'vue'
const title = ref('title')
const foo = function() {
const $input = document.querySelector('#inputTest')
$input.value = 'test';
}
</script>
<template>
<h1>{{ title }}</h1>
<button @click="foo()">Broke inputTest</button>
<input id="inputTest" type="text" v-model="title" />
</template>
위와 같이 코드를 작성한 코드가 있다고 생각해보자. 어떤 문제가 발생할까?
foo라는 함수를 실행하는 순간, #inputTest의 value는 'test'로 변경되게 된다.
title을 'title'이라고 표현이 되고 있는데, 말이다.
뭐 물론 위와 같이 극단적인 상황은 그렇게 많진 않지만... 어떠한 프로젝트가 되었던, 그 프레임워크 그 라이브러리에 위배되는, 혹은 궁합이 좋지 않은 조합으로 사용하게 되는 어떤 순간이 올 것이다.
만약 그렇게 하려는 경우, 조금 길이 어렵고, 험난 하다고 해도, 정확한 길을 찾는 것이 좋을 것이라 본다. 예를 들면, vue의 경우, 돔을 직접적으로 핸들링 할 수 있는 방법으로 directive를 제공을하고 있다. 정확하게 컨트롤 하기에는 어려우나, 현재 상태에 살짝 동떨어진 UI를 제공하거나, 직접 돔조작을 하는 계열의 라이브러리들을 어느 수준정도 케어를 해줄수 있다.
시간만 된다면, 원하는 컴포넌트를 직접 만들 수 있다.
결론
위의 내용을 접하는 분들은 왜 당연한 말을 할까? 하고 생각할수도 있을것 같지만... 현실을 아는 분들은 "어쩔 수 없었어...."라고 말할 수도 있을 것 같다. 당연한 것 당연하게 하는 것도 생각보다 힘들다.
댓글
댓글 쓰기