모든 예제 코드는 github에 있습니다. 5. 컴포넌트 통신 방법 - 응용 같은 컴포넌트 레벨 간의 통신 방법 AppHeader → Appcontent 위 그림에서 보듯이 데이터를 전송할 길이 없다. 따라서 관계되어 있는 길을 찾아서 구현해야 한다. 같은 컴포넌트 레벨 간의 통신 방법 구현 AppContent → Root → AppHeader 즉, AppContent가 event로 Root에 데이터를 건네주고, Root가 props로 AppHeader로 데이터를 넘겨줘야 한다. Ï
Lecture
모든 예제 코드는 github에 있습니다. 4. 컴포넌트 통신 방법 - 기본 컴포넌트 통신 각각의 컴포넌트는 데이터를 각자 관리한다.(유효 범위를 가진다) 상위에서 하위로는 데이터를 내려줌 (props) 하위에서 상위로는 데이터를 올려줌 (event) 컴포넌트 통신 규칙이 필요한 이유 AppHeader → LoginForm → AppFoter → NavigationBar → AppHeader 위와 같은 방향으로 데이터를 통신한다면 관계적으로도 어렵고, 버그가 발생할 시 추적하기가 어렵다. 위 그림 처럼 아래로만 데이터가 내려가는 컴포넌트 규칙이 생겼을때 데이터의 흐름을 추적할 수 있다. 상위에서 하위로 props와 하위에서 상위로 event를 보내준다. props 속성 v-bind: props 속성 이름..
모든 예제 코드는 github에 있습니다. 3. 컴포넌트 컴포넌트 소개 화면의 영역을 구분하여 개발할 수 있는 기능 재사용성을 가장 큰 핵심 영역을 구분했을때 컴포넌트 간의 관계가 생긴다. 컴포넌트 등록 인스턴스를 생성하면 기본 Root컴포넌트가 된다. 전역 컴포넌트 전역적으로 사용할 수 있는 컴포넌트이다. 실제 서비스를 할때는 전역 컴포넌트를 쓸일이 거의 없다. 위에서 배운 컴포넌트 관계로써 app 하위에 app-Header와 app-content가 있다. Vue.component('컴포넌트이름', 컴포넌트 내용) 지역 컴포넌트 등록 지역 컴포넌트에서 key값이 복수인 이유는 컴포넌트는 하나가 아니라 여러개인 경우가 많이 때문이다.(method도 동일한 이유) components: { /..
모든 예제 코드는 github에 있습니다. 2. 인스턴스 인스턴스 소개 인스턴스란 Vue로 개발할때 필수로 생성해야 하는 단위라고 생각하면 된다. new Vue()로 생성하면 변수에 인스턴스를 할당할 수 있다. {{message}} 인스턴스와 생성자 함수 생성자 함수 생성자 함수를 작성함으로써 개체를 정의합니다. new 키워드를 사용하여 개체의 인스턴스를 만듭니다. 개체 형식을 정의하기 위해 개체 이름, 속성, 메소드를 지정하는 함수를 만들어야 한다. 이때 중요한 것은 함수의 인자로 전달받은 값을 개체의 속성에 할당하기 위해 this를 사용해야 한다. 즉, 함수를 이용해 인스턴스를 생성하는 방법을 생성자 함수라고 한다. function Person(name, age){ this.name = name; t..
모든 예제 코드는 github에 있습니다. 1. Vue.js 소개 MVVM 모델에서의 Vue MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리 화면에 나타나는 것이 HTML이며, DOM을 이용해서 JS로 조작할 수 있다. DOM Listeners로 사용자가 발생시킨 이벤트를 청취할 수 있고, JS에서의 특정 로직을 실행시킨다. JS의 데이터가 변경되었을때, Data Bindings를 거치게 되는데, 이걸 이용해 화면에 보여주게 된다. 기존 웹 개발 방식(HTML, JavaScript) 프레임워크를 사용하지 않고 웹을 구현할 수 있는 방법은 HTML, CSS, JavaScript로 가능하다. ! + tab을 하면 기본 html 템플릿이 만들어 진다. 위와 같이 DOM을 조작해 텍스트를 넣을 수 있..
모든 예제 코드는 github에 있습니다. 0. 개발환경설정 프로그램 설치 Chrome Visual Studio Code Node.js Vue.js Devtools 수업 코드 안내 예제코드 VSCode 플러그인 설치 및 설정 Vetur .vue 파일에 대한 코드를 만들어주는 기능 및 디버깅, 자동 완성 등 지원 Night Owl 테마 Material Icon Theme 아이콘 테마 Live Server 에디터 에서 저장을 하는 즉시 브라우저에서 반영이 됨. ESLint lint란 소스 코드에 문제가 있는지 탐색하는 작업이며, linter는 이 작업을 도와주는 소프트 웨어 자바스크립트 진영의 오픈소스로 확장되고 있는 정적 분석 도구로, 정적 분석 도구란 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 ..
