목차 State Management Vuex 1. State Management 상태(State)란 ? 현재에 대한 정보(data) 나의 상태가 어때? 라는 질문에 할 수 있는 대답들 배가 고파 졸려 등등.. 따라서 Web Application에서의 상태는 현재 App이 가지고 있는 Data로 표현할 수 있음! 우리는 여러 개의 component를 조합해서 하나의 App을 만들고 있음 각 component는 독립적이기 때문에 각각의 상태(data)를 가짐 하지만 결국 이러한 component들이 모여서 하나의 App을 구성할 예정 즉, 여러 개의 component가 같은 상태(data)를 유지할 필요가 있음 상태 관리(State Management) 필요! Pass Props & Emit Event 지금..

목차 emit event emit with data emit with dynamic data 1. emit event 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때는 이벤트를 발생 시킴 이벤트를 발생시키는 게 어떻게 데이터를 전달하는 것이냐? 데이터를 이벤트 리스트나 콜백함수의 인자로 전달 상위 컴포넌트는 해당 이벤트를 통해 데이터를 받음 $emit $emit 메서드를 통해 부모 컴포넌트에 이벤트를 발생 $emit('event-name') 형식으로 사용하며 부모 컴포넌트에 event-name 이라는 이벤트가 발생했다는 것을 알림 마치 사용자가 마우스 클릭을 하면 click 이벤트가 발생하는 것처럼 $emit('event-name')가 실행되면 event-name 이벤트가 발생하는 것 참고 - $ ..

목차 Data in components Pass Props 1. Data in components 우리는 정적 웹페이지가 아닌, 동적 웹페이지를 만들고 있음 즉, 웹페이지에서 다뤄야 할 데이터가 등장 User data, 게시글 data, 등등... 한 페이지 내에서 같은 데이터를 공유 해야함 하지만 페이지들은 component로 구분이 되어있음 MyComponent에 정의된 data를 MyChild에 사용하려면 어떻게 해야 할까? MyChild에도 똑같은 data를 정의 MyComponent의 data와 MyChild의 데이터가 동일한 data가 맞는가? MyComponent의 data가 변경된다면 MyChild도 같이 변경이 될까? 아니다. 각 Component는 독립적이므로 서로 다른 data를 갖게..

목차 Component SFC Vue component 실습 1. Component UI를 독립적이고 재사용 가능한 조각들로 나눈 것 즉, 기능별로 분화한 코드 조각 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 하나의 app을 구성할 때 중첩된 컴포넌트들의 tree로 구성하는 것이 보편적임 Web 시간에 배운 HTML 요소들의 중첩을 떠올려 보자! Body tag를 root node로 하는 tree의 구조이다. 마찬가지로, Vue에서는 src/App.vue를 root node로 하는 tree의 구조를 가짐 컴포넌트는 유지보수를 쉽게 만들어 줄 뿐만 아니라 재사용성의 측면에서도 매우 강력한 기능을 제공 우리가 사용하는 웹 서비스는 여러 개의 컴포넌트로 이루어져 있음 하..

목차 Node.js Vue CLI Vue CLI 프로젝트 구조1 - node_modules Vue CLI 프로젝트 구조2 1. Node.js 자바스크립트는 브라우저를 조작하는 유일한 언어 하지만 브라우저 밖에서는 구동할 수 없엇음 자바스크립트를 구동하기 위한 런타임 환경인 Node.js로 인해 브라우저가 아닌 환경에서도 구동할 수 있게 됨 Chrome V8 엔진을 제공하여 여러 OS환경에서 실행할 수 있는 환경을 제공 Browser만 조작 가능했으나, Server-Side-Programming 또한 가능해짐 NPM (Node Package Manage) 자바스크립트 패키지 관리자 Python에 pip가 있다면 Node.js에는 npm pip와 마찬가지로 다양한 의존성 패키지를 관리 Node.js의 기본 ..

Vue Style Guide Vue의 스타일 가이드 규칙은 우선순위를 기준으로 4가지 범주를 설정 우선순위 A : 필수 (Essential) 오류를 방지하는 데 도움이 되므로 어떤 경우에도 규칙을 학습하고 준수 B : 적극 권장 (Strongly Recommended) 규칙을 어겨도 코드는 여전히 실행되겠지만, 규칙 위반은 드물어야 함 C : 권장 (Recommended) 일관성을 보장하도록 임의의 선택을 할 수 있음 D : 주의 필요 (Use with Caution) 잠재적 위험 특성을 고려함 이번 글에서 학습하고 지켜야 할 스타일 가이드 2개 우선순위 A 1 . v-for는 항상 key와 함께 사용하기 내부 컴포넌트의 상태를 일관되게 유지하기 위해 v-for에 항상 key를 사용하기 데이터의 예측 가..

목차 기본 구성 v-접두사 Vue computed 1. 기본 구성 v-접두사가 있는 특수 속성에는 값을 할당 할 수 있음 값에는 JS 표현식을 작성 할 수 있음 directive의 역할은 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 것 ` : ` 을 통해 전달인자를 받을 수 있음 ` . ` 으로 표시되는 특수 접미사 - directive를 특별한 방법으로 바인딩 해야 함 새 Vue instance 생성 각각의 instance들은 연결된 DOM element에만 영향을 미침 연결되지 않은 DOM이 Vue의 영향을 받지 않았던 것과 동일한 상황 2. v-접두사 v-text Template Interpolation과 함께 가장 기본적인 바인딩 방법 {{ }}와 동일한 역할 단 정확히 동일한 역할인 것..

Template Syntax Vue 2 guide > template syntax 참고 렌더링 된 DOM을 기본 Vue instance의 data에 선언적으로 바인딩할 수 있는 HTML 기반 template syntax를 사용 렌더링 된 DOM - 브라우저에 의해 보기 좋게 그려질 HTML 코드 HTML 기반 template syntax - HTML 코드에 직접 작성할 수 있는 문법 제공 선언적으로 바인딩 - Vue instance와 DOM을 연결 Template Interpolation 가장 기본적인 바인딩(연결) 방법 중괄호 2개로 표기 DTL과 동일한 형태로 작성 Template interpolation 방법은 HTML을 일반 텍스트로 표현 RAW HTML v-html directive을 사용하여 ..

목차 MVVM Pattern Instance el data 1. MVVM Pattern 소프트웨어 아키텍처 패턴의 일종 마크업 언어로 구현하는 그래픽 사용자 인터페이스(view)의 개발을 Back-end(model)로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 함 View = 우리 눈에 보이는 부분 = DOM Model = 실제 데이터 = JSON View Model (Vue) View를 위한 Model View와 연결(binding)되어 Action을 주고 받음 Model이 변경되면 View Modle도 변경되고 바인딩된 View도 변경됨 View에서 사용자가 데이터를 변경하면 View Model의 데이터가 변경되고 바인딩된 다른 View도 변경됨 정리 View는 Model을 몰..