📝 컴포넌트 통신 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효범위(Scope)를 갖기 때문이다. 각 컴포넌트의 유효범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 장점 뷰에서 미리 정의해 놓은 데이터 전달 방식에 따라 일괄된 구조로 애플리케이션을 작성하게 된다. 개발자 개개인의 스타일대로 구성되지 않고, 애플리케이션이 모두 동일한 데이터 흐름을 갖게 된다. 이렇게 되면 다른 사람의 코드를 빠르게 파악할 수 있어 협업하기에 좋다 상-하위 컴포넌트 관계 상위에서 하위로는 props 하위에서 상위로는 기본적으로 이벤트만 전달 가능 props 속성 (상위 -> 하위) 상위 컴포넌트에서 하위 컴포넌트..
📝 컴포넌트 컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역) 전역 컴포넌트 : 여러 인스턴스에서 공통으로 사용할 수 있다. 지역 컴포넌트 : 특정 인스턴스에서만 유효한 범위를 갖는다. 전역 컴포넌트 등록방법 Vue.component('컴포넌트이름', { // 내용 }); 예제 컴포넌트 등록 인스턴스가 화면에 적용되는 과정 뷰 라이버리 파일 로딩 뷰 생성자로 컴포넌트 등록 Vue.component() 인스턴스 객체 생성(옵션 속성 포함) 특정 화면ㅇ 요소에 인스턴스 부착 인스턴스 내용 변환(등록된 컴포넌트 내용도 변환) 변환된 화면 요소를 사용자가 최종 확인 지역 컴포넌트 - 인스턴스에 Components 속성을 추가하고 등록할 때 컴포넌트 이름과 내용을 정의하면 된..
참고 URL : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty Reactivity 기초 위의 소스 라이브러리화 하기 브라우저에서 변수에 값을 대입해보면 실시간으로 변경되는 것을 볼 수 있다.
📝 Vue.js 란? 뷰는 UI화면 개발 방법 중 하나인 MVVM패턴의 뷰 모델에 해당하는 화면 단 라이브러리이다. MVVM패턴이란 모델(MODEL) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 의미한다. 이러한 방식으로하는 이유는 화면 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지보수가 편해지기 때문이다. 양방향 데이터 바인딩과 단방향 데이터 흐름을 가지고 있다. 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것이다. 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미하는데 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트..
VS CODE의 왼쪽 Extensions에서 플로그 인들을 설치한다. - Vetur - Night Owl - Material Icon Theme - Live Server - ESLint - Prettier - Auto Close Tag - Atom Keymap