솔솔의 천방지축 개발일기

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

데이터 바인딩 : 데이터를 연결해주는 것 각 속성 앞에 v-bind: 를 붙이면 된다. 1. input value 바인딩 // v-bind: 를 사용하는게 맞지만 길기때문에 생략하여 : 만 작성해도 된다. // 위 아래 같은 의미 data 안에 inputData라는 이름으로 값을 넣어주고, input 태그에는 기존 value인 값을 -> v-bind:value로 설정하면 바인딩 됩니다. 2. input type 바인딩 // v-bind: 를 사용하는게 맞지만 길기때문에 생략하여 : 만 작성해도 된다. // 위 아래 같은 의미 3. a href 바인딩 테스트 a태그를 선택할 경우 제 티스토리 메인으로 이동합니다. 다른 값을 넣고 싶을 경우에는 테스트 함수를 호출하여 기존 link에 추가하여 url을 호출해..

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

1. 뷰의 스코프(범위) 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없다. 그 이유는 컴포넌트마다 자체적으로 고유한 유효 범위를 갖기 때문이다. 뷰는 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 쉽게 예제로 이해해보면 my-component1, my-component2 2개의 컴포넌트를 등록하고 아래서 세팅해주었다. 첫번째 컴포넌트는 자신의 값을 가지고 세팅하였고, 두번째 컴포넌트 return 값은 첫번째 컴포넌트 값을 참조하였다. 출력해보면 결과는 첫번째 컴포넌트 값을 참조하였던 두번째 컴포넌트 값은 빈 값이다. 이유는 컴포넌트의 scope 때문에 my-component2 에서 my-component1을 직접 참조할 ..

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. 변환된 화면 요소를 ..

index.html 파일을 하나 생성하여 소스를 넣고 Hello Vue.js 를 출력해보겠습니다. {{ message }} html이 저장된 경로로 가서 html을 실행해봅니다. 출력되는 것을 확인해볼 수 있습니다 : ) * Do it! Vue.js 입문 책으로 공부하며 작성하는 글로 잘못된 정보가 있을 경우 댓글 달아주시면 감사하겠습니다 : )

뷰 개발자 도구 (뷰 크롬 플러그인) 뷰로 만든 웹 앱의 구조를 간편하게 디버깅하거나 분석할 수 있음 크롬, 파이어폭스, 사파리에서 모두 지원 가능 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..