svg 미리 보기 활성화 하는 방법 파일을 직접 열지 않아도 미리 볼 수 있기 때문에, 작업 속도가 빨라집니다. 특히 여러 SVG 파일을 다루는 경우 시간 절약 효과가 더욱 뛰어납니다. 확장 프로그램 설치 하기 svg-explorer-extension SVG SEE 프로그래 설치 사이트로 이동해서 컴퓨터 사양에 맞는 버전을 다운로드 합니다. ...

CSS 전처리기란? SASS는 CSS전처리기(Preprocessor)라고도 합니다. CSS 전(예비)처리기 입니다. 보통 언급되는 전치리기 3대장으로 Less, SASS(SCSS), Styleus가 있습니다. 그 중 SASS는 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며, 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌...

timeline 타임라인은 gsap.timeline()으로 생성됩니다. 타임라인은 모든 트윈을 자연스럽게 순서대로 재생처리합니다. gsap.timeline() .from('.sun', { duration: 1, opacity: 0, x: 50, y: 50 }) .from('.gress', { duration: 1, opacity: 0, y:...

tween Tweens는 모든 애니메이션이 작동하는 역할을 말하며, ( high-performance property setter ) 대상 ( 애니메이션을 적용할 객체) 에게 duration, animation-properties 정보를 입력하는 하나의 단위로 해석합니다. Tween은 3가지의 methods를 가지고 애니메이션을 만들 수 있으며 각각...

여러 번 사용되는 라이브러리의 경우 컴포넌트마다 import 해오지 말고 plugin으로 만들어 사용하면 좋다. plugin으로 등록하면 전역에서 사용할 수 있다. Chart.js 라이브러리 plugin 제작 $ npm i chart.js import ChartPlugin from './plugins/ChartPlugin.js'; Vue....

src/components/LoadingSpinner.vue <template> <div class="loading" v-if="loading"> <div></div> <div></div> <div></div> </div> &...

Navigation Guard 네비게이션 가드는 특정 URL에 접근(Navigation) 하기 전에 불려지는 (Hook)의 일종으로, 다른 페이지로 우회 하거나 접근 자체를 취소시킬 수 있기 때문에 네비게이션 가드라고 불립니다. 사용자의 권한에 따라 페이지 접근을 막거나 페이지를 로딩하기 전에 데이터를 미리 불러올 때 사용하기 좋은 기술입니다. 사실...

mixin 믹스인은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법입니다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, create 등과 같은 컴포넌트 옵션입니다. 믹스인 코드 형식 믹스인을 주입 할 컴포넌트에 mixins 속성을 선언하고 배열 [] 안에 주입할 믹스인들을 추가합니다. import E...

HOC (high order component) 뷰의 하이 오더 컴포넌트는 리액트의 하이 오더 컴포넌트에서 기원된 것입니다. 리액트의 하이 오더 컴포넌트 소개 페이지를 보면 아래와 같이 정확한 정의가 나와 있습니다. A higher-order component (HOC) is an advanced technique iin React for reusi...

npm(node package manager) npm(node package manager)은 자바스크립트 패키지 매니저다. Node.js에서 사용할 수 있는 모듈을 패키지화 하여 모아둔 저장소 역할과 패키지 및 관리를 위한 CLI(Command Line interface)를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색하여...