본문 바로가기

[vue2] 컴포넌트 사용하기 기본편 컴포넌트란 단어 자체의미만으로는 구성요소로 기계의 부품 정도로 생각하면 된다. vue.js에서 컴포넌트로 구성되며, 재활용에 있어서 컴포넌트는 매우 중요하다. 다룰 vue.js에서 컴포넌트는 버전 2에 기반한 컴포넌트 내용이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 들어가기 vue.js에 컴포넌트는 객체지향 프로그래밍에서 클래스와 비슷하다. 물론 형식이나 구조는 다르지만 중요성이나 사용목적이 비슷하다. vue 컴포넌트는 vue 인스탄스이기 때문에 vue에 있는 기능을 모두 사용할 수 있다. vue 컴포넌트에도 라이프 사이클이 있고 중간에 훅을 제공하기 때문에 해당 라이프사이클은 잘 알아두는게 좋다. [2] 컴포넌트 등록 컴포넌트 등록을 간단하게 살.. 더보기
[vue2] 레이아웃 구성 웹페이지는 여러 화면으로 구성되어 있다. 일반적으로 상단에 로고와 메뉴, 가운데에 컨텐츠, 하단에 사이트정보 등 형태로 되는 경우가 많다. 이런 화면을 모든 페이지에 반복적으로 나타나는데, 모든 페이지에 같은 작업을 반복적으로 하기에는 매우 비효율적이다. 이때 필요한게 레이아웃을 구성해여 화면 분할해서 작업하는 형식이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 들어가기 vue.js에서 레이아웃은 기본 기능이기 보다는 라우터의 기능과 컴포넌트 기능을 적절하게 활용하는 형태이다. 다른 프레임워크에서는 페이지를 임포트하여 구성하거나 이를 위한 별도 라이브러리를 사용하는 경우가 많다. 물론 더 훌륭한 기능을 사용하고 싶다면 추가 라이브러리를 사용할 수도 있.. 더보기
[vue2] Router 활용한 접근제어 vue.js의 router를 사용해서 URL을 통한 접근제어하는 처리하는 방식을 간단하게 살펴보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ Router를 사용한 접근제어 Router에서 사용할 수 있는 접근제어 방식은 아래와 같다. 전역 가드 라우트별 가드 컴포넌트 가드 전역가드 전체 접근에 대한 제어를 제공한다. 해당 훅은 beforeEach을 사용한다. 추가로 2.5.0 이후에는 beforeResolve을 사용할 수도 있다. 차이점은 컴포넌트별 가드와 라우트별 가드를 실행한 후에 호출된다. const router = new VueRouter(...); router.beforeEach( (to, from, next)=> { //... next();.. 더보기
[vue2] Vue.js 프로젝트 기본 구성 초기 소스코드를 구성할 경우 해야할 일이 많다. 최근 프레임워크는 많이 간소화되어서 해야할 작업이 매우 많이 줄어들었지만 그래도 해야할 일이 좀 있다. 사용할 목적에 따라 달라질 수 있지만, 웹 어플리케이션을 만든다고 가정해서 가장 기본적인 환경 구성을 정리해보았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 들어가기 Vue.js을 몇번 사용하면서 반복적으로 구성하면서 필요로 하는 작업이 있다. 그때마다 검색하면서 똑같은 작업하기가 번거롭기 때문에 한번 정리해보았다. Vue.js는 버전 3까지 나왔지만, 여기서는 버전 2에 대한 환경 구성을 다룰려고 한다. Vue.js 프로젝트 구성은 vue cli을 사용해서 초기 구성을 할 수 있다. vue cli도 .. 더보기
Javascript로 구현한 Shadow Animate 효과 작성:http://ospace.tistory.com/(ospace114@empal.com) 2009.11.16 Internet Explorer에서 glow효과1 입니다. Internet Explorer에서 glow효과2 입니다. Internet Explorer에서 dropshadow효과 입니다. 여기서 효과는 FireFox에서만 유효하며 IE에서는 적용되지 않음. Normal Shadow Effect Start/Stop Animate Shadow Let's make glow a new message. Start/Stop Animate Shadow Let's make glow a new message. 다른 효과 Ospace shadow effect1... Shadow효과는 IE에서는 지원이 되지 않기 때.. 더보기
MSND에 있는 디버깅 기본에 대한 내용 About Basic Debugging The debugging functions can be used to create a basic, event-driven debugger. Event-driven means that the debugger is notified every time certain events occur in the process being debugged. Notification enables the debugger to take appropriate action in response to the events. Debug Support from Process, Thread, and Exception Functions describes the debugging-specific featu.. 더보기

반응형