-
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에서 다음과 같이 전역 변수로...
-
CSS pre-loader 없이 변수 만들어 활용하기
CSS pre-loader 없이 변수 만들어 활용하기 by 신성환(github.com/blueStragglr) SCSS와 같은 CSS Pre-loader를 사용하게 되면 변수를 선언하고 스타일을 관리하는데 유용하게 사용할 수 있습니다. primary-color 등을 선언해 두고, 글로벌 단위에서의 색상 변경을 변수 하나의 변화만으로 관리하는 작업 등이 가능해 지는 것입니다. 하지만 CSS에서도 전역변수의 형태로 값을 관리할 수 있는 방법이 있었습니다! 변수 사용, SCSS에서만 되는게 아니었다! 알고 보니 변수의 선언은 SCSS의 전유물이 아니었습니다. 가상 선택자 :root 에 접근하여 CSS에서도 전역 변수 등을 생성할 수 있습니다. 우선 변수...
-
클래스 이름, 막 써도 되나요?
클래스 이름, 막 써도 되나요? by 신성환(github.com/blueStragglr) 프론트 개발을 하다 보면 HTML 요소에 클래스 이름을 붙이는 것을 상당히 어려워 하는 사람들을 많이 볼 수 있습니다. 무슨 이름을 붙였을 때 다른 사람 (혹은 미래의 자신)이 알아볼 수 있을지, 문제가 생기지는 않을지에 대해 고민하는 것이죠. HTML의 클래스 이름을 붙일 때, 각 요소가 어떤 동작을 하는가에 따라 명료한 규칙을 가지고 클래스 이름을 붙이면 보다 생산적으로 개발할 수 있습니다. 이러한 규칙으로써 범용적으로 정의되고 사용되는 BEM에 대해서 간단히 소개해 볼까...
-
SVG 활용: HTML상에 벡터 이미지 삽입하기
SVG 활용: HTML상에 벡터 이미지 삽입하기 by 신성환(github.com/blueStragglr) HTML에서는 벡터 이미지를 렌더링 할 때 각 포인트에 대한 값 형식인 SVG 파일을 전달받아 렌더링을 수행할 수 있습니다. 일반 이미지 형식의 경우, 안티앨리어싱 등의 문제로 자칫 잘못하면 2000년대 양산형 홈페이지같은 느낌을 줄 수도 있으므로, 반응형으로 간단한 형태의 이미지를 활용하여야 하는 경우에는 SVG를 사용하는 것을 고려해볼 만 합니다. SVG파일을 직접 작성하기 위해서는 벡터 패스의 좌표값들과 캔버스 크기, 색깔 등의 속성을 지정해주어야 합니다. 하지만 모든 좌표값을 일일히 입력하는건 굉장히...