솔솔의 천방지축 개발일기

대부분의 경우 computed 속성이 더 적합하지만 간혹 감시자가 필요한 경우 watch 속성이 필요 변경되는 값을 캐치하고 싶을 때 watch 사용 button 클릭시 changeMessage()가 호출되며 메시지가 '안녕하세요' -> 'Hello'로 바뀐다. 그 message가 바뀌는 시점에 watch가 호출되고 파라미터는 새로운 값, 예전 값이 넘어오게 된다. (여기서 새로운 값 : Hello, 예전 값 : 안녕하세요) {{ message }} Button Click {{ updated }}

1. methods 함수 호출로 캐싱 X FnReversedMessage()를 호출할 때마다 계산되어져 화면에 표출 2. computed 캐싱 O reversedMessage()를 호출할 때 이미 계산되어진 값을 저장해두었다가 가져다 사용 만약 message 값이 변경될 경우, 변경되는 시점을 캐치해서 변경한 후 캐시로 저장해둔다. {{ message.split('').reverse().join('') }} {{ FnReversedMessage() }} {{ reversedMessage }}

1. 컴포넌트 란? 화면을 구성할 수 있는 블록과 같은 개념 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발이 가능하다. 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 다시 사용하기 편리하다. 코드가 직관적이다. 왼쪽 이미지를 보면 Header, Content, Footer로 3개의 컴포넌트로 분할하였고, 그 안에서도 Content 안에 Aside, List 2개의 하위컴포넌트로 분할하였다. 우측 이미지를 보면 트리 구조로 각 컴포넌트 간의 관계를 나타낸다. 웹 페이지 화면을 설계할 때도 이와 같은 골격을 유지하면서 설계해야한다. 2. 전역 컴포넌트 여러 인스턴스에서 공통으로 사용 가능 뷰로 접근 가능한 모든 범위에서 사용 가능 -- 전역 컴포넌트 등록 Vue.compo..

* 라이프 사이클 : 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기 => 인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름 1. 뷰 라이프 사이클 속성 종류 created beforeCreate beforeMount mounted beforeUpdate updated destroyed beforeDestroy 라이프 사이클을 크게 나누면 4단계이며, 데이터가 변경되는 경우에만 2->3단계가 존재한다. 1. 인스턴스의 생성 2. 생성된 인스턴스를 화면에 부착 3. 화면에 부착된 인스턴스의 내용 갱신 4. 인스턴스 소멸 [ 1. 인스턴스 생성 ] * beforeCreate 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 이 단계에서는 da..

1. Vue.js 란 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 화면단 라이브러리이자 프레임워크 뷰의 창시자 에반은 앵귤러의 명시적 데이터 바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하기 시작했고, 오픈 소스화하면서 많은 사람들이 참여하여 프레임워크의 기능을 붙여 나가기 시작하며 뷰가 탄생하였다. * 프레임워크 : 일정한 틀과 규칙에 따라 개발하도록 미리 구조를 정의해 놓은 도구 (뼈대) * 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 2. 장점 배우기 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점과 앵귤러의 장점을 가지고있다. 앵귤러를 더 가볍게 쓰고 싶어 만든 프레임워크 앵귤러의 양방향 데이터 바인딩 특성과 리액트의 단방향..