개발자의 기록습관

Vue Components누구나 다루기 쉬운 Vue.js 프론트 개발(인프런) - Captain Pangyo 링크컴포넌트는 화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것이 주된 목적이다.컴포넌트 등록뷰 컴포넌트를 등록한 후, 뷰 인스턴스를 생성하면 등록된 컴포넌트에 의해서 my-component가 컴포넌트의 template 내용으로 치환되면서 화면에 뿌려진다.1234567891011121314151617181920212223 Vue Sample Parent Component Vue.component('my-component', { template: 'A custom component!' }); new Vue({ el: '#app' }) Colored by Color Scripte..

Vue Instance누구나 다루기 쉬운 Vue.js 프론트 개발(인프런) - Captain Pangyo 링크인스턴스 소개Vue.js를 이용하여 UI 화면을 개발하기 위해서는 아래 절차를 따른다.Vue.js 라이브러리를 로딩했을 때 존재하는 Vue 생성자로 인스턴스를 생성해야 한다.123var vm = new Vue({ //...})cs풀어서 얘기하면 Vue 라이브러리 로딩 후 접근 가능한 Vue라는 기존 객체에 화면에서 사용할 옵션(데이터, 속성, 메서드 등)을 포함하여 화면의 단위를 생성한다라고 보면 된다.결론적으로 인스턴스는 뷰를 이용해서 개발하는데 가장 중요한 요소이며, 후반부에서 배우게 될 컴포넌트와도 밀접히 연관이 있는 기반 개념이다.인스턴스 생성Vue Instance 생성자Vue 생성자로 인..

Vue 시작하기누구나 다루기 쉬운 Vue.js 프론트 개발(인프런) - Captain Pangyo 링크Vue는 무엇인가?MVVM 패턴의 ViewModel 레이어에 해당하는 View 단 라이브러리MVVM(Model-View-ViewModel)모델과 뷰 사이에 뷰모델이 위치하는 구조DOM이 변경됐을 때, 뷰모델의 DOM Listeners를 거쳐서 모델로 신호가 간다.모델에서 변경된 데이터를 뷰모델을 거쳐서 뷰로 보냈을 때, 화면이 reactive하게 반응이 일어난다.Vue.js 는 이와 같이 reactive한 프로그래밍이 가능하게 끔 뷰단에서 모든 것을 제어하는 뷰모델 라이브러리이다.데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며, 관련 API를 지원하는데에 궁극적인 목적이 있음Angular에서 지원하..

Vue를 위한 개발환경 설정누구나 다루기 쉬운 Vue.js 프론트 개발(인프런) - Captain Pangyo 링크Text Editor - Atom 소개 및 설치100% 오픈소스이며 무료이다. 그리고 github에서 개발, 지원 한다.Atom 플러그인 테마 설치ctrl + comma : settings 진입Themes 설정Install 탭에서 원하는 테마를 설치UI Theme : SetiSyntax Theme : Atom Material DarkAtom 플러그인 패키지 설치atom-beautifycode 정렬autoclose-html시작 태그를 여는 순간 자동으로 닫는 태그 생성highlight-selected코드에서 동일한 텍스트를 강조, 같은 변수나 함수를 쫓아갈 때 유용한 플러그인color-pick..