104%

개발을 하다보니 이런 에러가 생겨서 원인을 찾다가 폴리필 문제라는걸 깨닫고 정리합니다. Core.js 2019년 3월 공개된 폴리필 라이브러리이다. 바벨 7.4 이상 버전과 core-js@3를 같이 사용해야 동작한다. 기존의 폴리필 라이브러리들 @babel/polyfill 이 폴리필은 제너레이터 폴리필인 regenerator-runtime과 core-js를 합쳐서 만든 폴리필임. 전역공간에 폴리필을 채워 넣는 방식이기 때문에 전역공간이 오염되어 폴리필 충돌 가능성이 있다는 단점이 있음. 브라우저에서 이미 구현된 필요하지 않은 폴리필까지 전부 번들에 포함되어 번들 크기가 커지는 단점이 있음. 번들 크기는 커지지만, 실행될때는 브라우저에서 구현되지 않은 문법만 실행하기 때문에 빠르다는 장점이 있음. (최신 ..

사람은 1초에 60개의 프레임을 볼 수 있다고 한다. 그 이상의 프레임을 더 찍어내더라도 사람이 느끼기엔 거의 차이가 없다는 말이다. 그래서 자바스크립트로 애니메이션을 구현할때도 1초에 60프레임정도를 찍어내면 된다. 그 말은, 1프레임을 찍어내는데 16.6ms(1000ms / 60frame)를 넘겨서는 안된다는 말이다. 프레임이란 그냥 한장의 사진이라고 생각하면 된다. 동영상도 사실 여러장의 사진이 빠르게 움직여서 움직이는것처럼 보이는것일 뿐이다. 16.6ms마다 프레임을 찍어내기 위해 첫번째로 사용할 수 있는 방법은 setInterval이다. setInterval(function() { // animiate something }, 1000/60); 또 다른 방법은 requestAnimationFram..