솔솔의 천방지축 개발일기

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

데이터 바인딩 : 데이터를 연결해주는 것 각 속성 앞에 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을 호출해..

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

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

Vue.js 개발을 위해 필요한 환경을 설정해보겠습니다. 1. ATOM 에디터 설치 A hackable text editor for the 21st Century At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it. atom.io 2. 다운로드한 exe 파일 실행 3. 테마 설치 실행하면 끝이지만 개발할 때 유용한 테마와 패키지 추가로 설치 Themes 클릭 후 seti-ui 입력하여 seti-ui / ..

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