유용한 것들

useful.md

webpack.config.js 에서 resolve alias사용

resolve: {
  extensions: [ '.js', '.vue', '.json' ],
  alias: {
    '@': path.resolve( __dirname, '..' )
  }
}

이렇게 사용하면 @를 통해 쉽게 import 할 수 있다.

import something from '@/something';

특정 element가 viewport안에 있는지 확인하는 함수

function isOutOfView(el) {
  const rect = el.getBoundingClientRect();
  const windowHeight = window.innerHeight || document.documentElement.clientHeight;
  const windowWidth = window.innerWidth || document.documentElement.clientWidth;
  const vertInView = rect.top <= windowHeight && rect.top + rect.height >= 0;
  const horInView = rect.left <= windowWidth && rect.left + rect.width >= 0;
  return vertInView && horInView;
}

click과 touch의 clientX / Y가져오는 방법

가끔 끌릭이나 터치한 element의 x, y좌표를 알아야 하는 경우가 있다. 이 경우 두가지는 비슷한 듯 하면서도 다른데, 클릭의 경우

function onClick(e) {
  const x = e.clientX;
  console.log(x);
}

를 통해 x좌표를 알 수 있지만 터치의 경우

function onTouch(e) {
  const x = e.touches[0].clienX;
  console.log(x);
}

를 통해 x좌표를 알 수 있다. 다음에는 삽질하지 말도록 하자.