목차 Lifecycle Hooks created, mounted, updated 특징 1. Lifecycle Hooks 각 Vue 인스턴스는 생성과 소멸의 과정 중 단계별 초기화 과정을 거침 Vue 인스턴스가 생성된 경우, 인스턴스를 DOM에 마운트하는 경우, 데이터가 변경되어 DOM를 업데이트하는 경우 등 각 단계가 트리거가 되어 특정 로직을 실행할 수 있음 이를 Lifecycle Hooks이라고 함 아래 빨간 부분들이 Lifecycle Hooks Lifecycle Hooks 간단히 알아보기 ChildComponents.vue에 작성해주기 mounted 까지가 Lifecycle Hook 중 1개 change value 버튼 클릭스 2개의 값이 log에 더 들어온다. Lifecycle Hook 중 1개 ..

Object method shorthand 이제부터는 객체 메서드 축양형을 사용할 것 ! 목차 state getters mutations actions 1. state state 중앙에서 관리하는 모든 상태 정보 $store.state로 접근 가능 store의 state에 message 데이터 정의 component에서 state 사용 $store.state로 바로 접근하기 보다 computed에 정의 후 접근하는 것을 권장 Vue 개발자 도구에서의 Vuex 관리 화면을 Vuex로 변경 후 관리 되고 있는 state 확인 가능 2. actions state를 변경할 수 있는 mutations 호출 component에서 dispatch()에 의해 호출됨 dispatch(A, B) A : 호출하고자 하는 a..

목차 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과 함께 가장 기본적인 바인딩 방법 {{ }}와 동일한 역할 단 정확히 동일한 역할인 것..