솔솔의 천방지축 개발일기

대부분의 경우 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. onclick javascript의 경우에는 이런식으로 적용되었다면 vue.js는 조금 다르게 적용된다. {{ year }} 더하기 빼기 v-on:click 을 이용하여 클릭할 경우 해당 함수로 접근하게 됩니다. 2. submit Submit submit을 하게되면 reloading되기 때문에 v-on:submit 뒤에 이벤트 수식어를 붙여 처리한다. ... ... 자세한 설명은 아래 참고 이벤트 핸들링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org

Vue.js에서는 웹 앱간의 통신을 어떤식으로 할까요? 오늘은 웹페이지 간 이동을 돕는 라우터에 대해 공부해볼 예정입니다. 1. 라우팅이란? 웹 페이지 간의 이동 방법 현재 웹 앱 형태 중 주로 사용되는 것은 SPA(Single Page Application) 라우팅을 사용하면 화면 간의 전환이 매끄럽고, 화면을 조작할 수 있어 사용자 경험 향상 뷰 뿐이 아닌 앵귤러, 리액트 모두 라우팅을 이용하여 화면 전환 2. 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리 뷰 라우터를 이용하여 뷰로 만든 페이지 간에 자유롭게 이동 가능 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정된 URL로 이동 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 ..

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. 뷰 인스턴스란? 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 인스턴스를 레고에 비유한다면 레고를 조립하는 기본 판 직전 게시글에서 작성한 코드를 예시로 들어볼게요. {{ message }} 2. 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성할 때 생성자는 Vue Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근 가능 생성자를 사용하는 이유는 뷰로 개발할 때 필요한 기능들을 생성자에 미리 정의해 놓고 사용자가 그 기능을 재정의하여 편리하게 사용하도록 하기 위함 3. 인스턴스가 화면에 적용되는 과정 1. 뷰 라이브러리 파일 로딩 2. 인스턴스 객체 생성(옵션 속성 포함) 3. 특정 화면 요소에 인스턴스를 붙임 4. 인스턴스 내용이 화면 요소로 변환 5. 변환된 화면 요소를 ..

뷰 개발자 도구 (뷰 크롬 플러그인) 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있음 크롬, 파이어폭스, 사파리에서 모두 지원 가능 Google => vue.js devtools 입력 Chrome 웹 스토어 클릭 하여 chrome에 추가 눌러줍니다. 뷰 개발자 도구 사용 방법 윈도우 기준 Chrome에서 F12 눌러주세요. 개발자도구 오픈! (Mac일 경우, cmd + option + I) 위에 화살표 모양 클릭하여 Vue 선택 (Vue가 안보일 경우, Chrome 종료 후 재실행) 1. 최상위 컴포넌트 2. 최상위 컴포넌트의 상세내용 3. 뷰엑스 속성 확인 4. 특정 시간 동안에 발생한 이벤트 관찰 5. 새로고침 ** 오류 처리 [Download the Vue Devtools exten..

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