-
Github로 멋지게 협업하기
Github로 멋지게 협업하기 by 신성환(github.com/blueStragglr) *이 글은 깃 초심자에게 깃허브 사용법을 알려주기 위한 내용이 아닙니다! 기본적인 깃의 동작 방식을 알고 있는 사람들 중 목적성과 당위성을 바탕으로 한 사용을 원하는 사람들에게 경험을 공유하기 위해서 작성되었습니다. 들어가며 회사에서 이미 쓰고 있어서, 누가 좋다고 그래서, 아니면 어떤 이유로든 일단은 쓰고 있는 깃과 깃허브. 여러분은 깃을 왜 쓰고 계신가요? 스스로 말하기 조금 부끄러운 이야기이지만, 저는 기억력이 꽤 좋은 편입니다. 별 관심이 없는 사람의 음식 취향 같은것을 기억했다 오해를 샀던...
-
Debounce & Throttle: 효율적인 이벤트 핸들링
Debounce & Throttle: 효율적인 이벤트 핸들링 by 신성환(github.com/blueStragglr) Debounce와 Throttle은 자바스크립트 이벤트를 (양적인 측면에서) 효율적으로 처리하기 위한 방법입니다. 이러한 컨트롤이 필요한 경우의 예시로 만들었던 페이지를 가져와 보겠습니다. (퇴사 전에는 좀 더 잘 만들었었는데 애석하게도 유지보수가 잘 되고 있지 않네요.) 해당 페이지에서는 가로 혹은 세로 스크롤을 모두 가로 스크롤 값으로 변환하며, 가로 스크롤 값에 따라 각 사각형 컴포넌트의 위치와 각도를 조절합니다. 이를 위해서 window DOM에 scroll eventListner가 달려 있으며, 아래와 같은 다양한 메소드가 구현되어 있었습니다. 스크롤의...
-
Vue.js에서 Anime.js 사용하기
Vue.js에서 Anime.js 사용하기 by 신성환(github.com/blueStragglr) Vue.js 프로젝트에서 애니메이션의 손쉬운 구현을 위해 Anime.js 라이브러리를 사용하는 방법에 대해서 알아봅니다. 하나의 DOM 객체에 대해 다루는 기능을 중점적으로 서술하였습니다. 애니메이션 종료 후에 실행되는 콜백이나 SVG를 컨트롤하는 방법에 대해서는 다음에 다루도록 하겠습니다! Installation & Import npm을 이용해서 쉽게 설치할 수 있습니다. $ npm install animejs --save 이후, 애니메이션을 사용할 컴포넌트에서 다음과 같이 import합니다. import anime from 'animejs/lib/anime.es.js' // use as `anime(...)` 애니메이션을 사용하는 컴포넌트가 많다면 src/main.js에서 다음과 같이 전역 변수로...
-
Moment js를 처음 사용할때 좋은 함수들
1. 들어가며 moment js는 시간이 포함된 데이터를 받아 조작해야 할 경우 사용하기 좋은 라이브러리입니다. 저의 경우 차트를 그릴 때 서버에서 한 시간 마다의 판매량, 매출과 같은 시간별 정보를 넘겨주었는데요. 날짜별 데이터를 뽑고 싶다. 특정 기간 동안의 데이터를 뽑고 싶다. 와 같은 니즈가 있었습니다. 자바스크립트에는 기본적으로 Date 객체가 있고 Date 객체에 내장된 다양한 함수들이 있는데요. const now = new Date() now.toISOString().slice(0,10) // "2019-10-27" const current = new Date() current.toISOString() // "2019-10-27T08:30:26.284Z" 사실 Date 객체를 이용해서 시간...