안녕하세요 Vue의 라이프 사이클중 created와 mounted를 알아 보려고합니다. 보통 created와 mounted를 가장 많이 사용하지만 부모자식간에 호출 순서를 잘 모르는 경우가 많습니다. 때문에 Data를 핸들링 할때 에러가 많이 발생하는데 오늘 기회에 동작 순서를 정확하게 파악하여 올바르게 Data를 핸들링 하면 좋겠습니다 created란? created는 렌더링은 안되었지만 Vue 인스턴스가 생성 되면서 동작하는 Hook이라고 보시면됩니다. virtual dom은 사용할 수 없지만 Data에 접근 및 초기화 하거나 이벤트를 처리하는데 자주 이용됩니다. 그렇다면 하나의 부모 Component에 여라 자식 components가 존재 할 경우 호출 순서는 어떻게 될까요? 부모 > 자식 순으로 ..

1장에서 Vue의 장점을 설명하면서 컴포넌트를 이야기 했습니다. 그 컴포넌트에 대해서 이야기 하려고 합니다. Component(컴포넌트)? Component는 하나의 부품이라고 보시면 이해기 쉬울 것입니다. 예로 기계를 만들때 여러 부품을 조합하여 만드는 것을 생각 해 볼 수 있습니다. 이러한 부품들은 나중에 다시 재활용도 가능하고 여러 장점이 가득합니다. Vue 컴포넌트 또한 똑같습니다. 또한 이러한 컴포넌트는 어느 형식을 가지고 있기 때문에 다른 사람이 해당 코드를 보더라도 쉽게 직관적으로 이해 할 수 있다는 것도 장점으로 작용합니다. 이러한 Component에는 두 종류가 존재합니다. Local(지역) Component 와 global (전역) component 가 존재합니다. 그렇다면 두개의 차이..

Vue 인스턴스? Vue에는 절대 인스턴스 개념이 빠질 수 없습니다. 인스턴스는 전역인스턴스와 지역인스턴스가 존재합니다. 해당 개념은 예제를 통해 쉽게 이해 할 수 있어요. 1. 아무 에디터를 키고 index.html을 만들어서 아래의 코드를 삽입 하고 실행 시켜주세요 {{testMessage}} 클릭 2. 아래와 같은 화면이 등장할것입니다. "안녕하세여 pooney입니다" 가 출력 될 것입니다. 3. 또한 아래와 같이 클릭버튼을 클릭하면 alert 창이 노출될 것입니다. 4. new Vue{()} 라는 생성자를 통해 정의한 testMessage의 텍스트가 {{testMessage}}에 정확하게 출력되고 버튼을 클릭하면 해당 메소드가 실행되면서 정의한 alert가 호출되는 것을 확인 할 수 있습니다. 눈..

저도 Vue는 처음이지만 공부를 하면서 제가 느꼈던 것에대 하여 이렇게 블로그에 남기게 되었습니다. 처음 Vue라는 것에 큰 벽을 느겼지만 하나씩 하나씩 해나가면서 아주 조금은 이해 할 수 있었습니다. Vue.js 란? Vue 사용자에게 즉각적으로 보여지는 웹페이지를 개발하기 위한 프론트엔드 프레임워크의 한 종류로 보시면됩니다. 간단 하게 네이버, 구글 모든 웹브라우저에서 보여지는 화면을 좀더 쉽게 그리기 위한 하나의 도구(프레임워크)라고 이해 하셔됩니다. Vue 장점 1. Vue는 컴포넌트를 사용한다는 것 입니다. 컴포넌트(Componet)는 간단하게 말하자면 하나의 부품이라고 보시면 됩니다. 여러 부품을 가지고 하나의 기계를 만드는 것처럼 컴포넌트 또한 여러 컴포넌트를 가지고 하나의 페이지를 구성할 ..