vue에서도 부모-자식 형태의 컴포넌트 생성이 가능하다. 긴 말 없다. 바로 예시 코드를 보자. Parent.vue 부모 vue 컴포넌트의 코드는 낯이 익은 코드다. (http://iam-song.tistory.com/46?category=703225 참고) 부모에서는 자식 컴포넌트를 가져왔고,components에 사용할 컴포넌트라 선언을 하고 template에도 선언해 주었다. Child.vue {{mention}} Child.vue 코드도 그닥 다를 것이 없다. 그.런.데.!. 부모의 data 값을 자식에게 어떻게 넘겨줄 것인가? 여기서 부터가 다른점! - 부모의 데이터 자식에게 전달하기 경험 상, 부모 코드 부터 보는 것 보다 자식 코드 부터 보는게 이해하기 편했어서...자식 코드부터 보잣! Chi..
vue 생성 관련 내부 요소를 살펴보았으니,vue component의 라이프 사이클을 휘리릭 정리해보자. 가장 정확하고 잘 설명된 곳 : https://kr.vuejs.org/v2/guide/instance.html#인스턴스-라이프사이클-훅 라이프사이클은 간단히 다음과 같은 순서다. created(vue 객체 생성) > mounted(vue 객체를 dom에 붙인 시점) > destroyed(vue 객체 삭제) created와 destoyed는 이해하겠는데,mounted 시점을 이해하기가 어려웠다. 하여 예시 코드를 보며 살펴보자. 다음과 같이 vue 컴포넌트를 생성하고,각 라이프사이클의 시점에 log를 찍도록 해보았다. * 참고this.$el : vue 컴포넌트의 dom 객체.this._isMounted..
vue의 template 문법의 경우 doc에 설명된 내용을 보고 따라해도 이해하기 쉬울 정도로 간단하다. 심지어 ☆★한글★☆doc url : https://kr.vuejs.org/v2/guide/syntax.html 그래서 vue 선언 시의 script 코드의 내부에 어떤 객체가 있는가아-에 대해 간단하게 정리해보았다. (다른 요소들도 있지만 개발하면서 기본적으로 사용했던 요소들) 기본적으로 vue 선언 시 다음과 같은 형태로 선언하게 되는데.. 1) name name은 그냥 vue 객체의 이름을 의미한다. 이 값은 필수 값이 아닌 선택적인 값 2) components 현재의 컴포넌트에서 다른 컴포넌트를 사용하고자 할 때 사용하고자 하는 컴포넌트를 정의하는 곳 보통 다음과 같이 선언하여 사용한다. 현 ..
지난 글에서 vue-cli를 활용하여 Vue.js 기반의 프로젝트를 생성해보았다. 지난 글 : http://iam-song.tistory.com/45?category=703225 생성된 프로젝트의 구조를 한번 휘리릭 보면 - build : 웹팩으로 빌드하기 위해 필요한 파일 모음 dir- config : 각 환경 별 환경 변수 선언된 파일 모음 dir- node_modules : npm i 으로 설치된 외부 라이브러리 dir- src : 프로젝트 개발을 위한 메인 dir - asset : 이미지 등 css 관련 dir - components : 각 화면에 대한 component 선언 dir - router : 앱 라우터 선언 dir - main.js : Application의 실행을 위한 js 파일 - ..
Vue.js는 2017년 한 해 동안 가장 많이 발전한 프레임워크다. 물론 아직 Angular와 React 보다 못 미친다는 글을 보긴 했지만, Vue.js는 많은 발전을 했고 개발자들에게도 긍정적인 반응을 보이는 가볍고 배우기 쉬운 프레임워크다. (한번 보면 좋을 링크 https://d2.naver.com/helloworld/3259111) 그러면 왜 Vue.js가 좋다는건가?? document가 정말 잘 정리가 되어 있다.그리고 api 문서에 한글 번역(https://kr.vuejs.org/v2/guide/installation.html)이 지원된다. > 이것은 정말 엄청난 이점!!!!!!! 근데 업데이트된 문서들은 한글 번역이 미지원인듯??ㅠㅠ간편하며 배우기 쉽고 가볍다. Vue.js가 얼마나 간단..
Backbone.js 가 탄생하게된 배경 SPA(Single Page Application)의 필요성 리소스 로딩 속도를 개선하여 유저의 대기 시간을 줄이기 위해 SPA 개발 필요 Backbone의 구조(MV*) Backbone은 서버에서의 MVC 패턴에서 착안M(odel), V(iew), C(ontroller) 구조에서 착안되었으나 완전히 동일하진 않다. * 백본은 컨트롤러의 역할을 view가 대신 Model - 뷰의 변화를 관찰할 수 있다. (관찰한다는 것은 모델이 갱신될 때 마다 뷰가 인지할 수 있다는 것을 의미)- 모델의 집합 : Collection(그룹 내의 모델이 변경된 경우 그룹으로 부터 인지할 수 있는 로직을 작성할 수 있다는 것 => 모델 인스턴스의 변경에 대해 수동으로 관찰하지 않아도 ..
gulp란? 개발 작업 시 시간을 소모하는 작업(scss 파일 컴파일 등)을 자동화하는데 도움되는 자동화 도구 특징으로는,- 최소한의 API를 제공하여 사용하기 간단하다.- npm 모듈을 사용하여 수많은 파일 변환에 필요한 플러그인을 제공 이하 세부 참조 : https://github.com/gulpjs/gulp gulp 설치하기 npm install -g gulpnpm install -g gulp-sass // 파일 컴파일을 위해 필요한 별도 모듈 설치 gulp를 실행하기 위해서, 프로젝트 내부에 gulpfile.js 파일을 생성해야한다.gulpfile.js는 gulp 실행을 위한 환경 설정을 역할을 한다. 생성한 gulpfile.js에는 어떤 내용을 적어야할까?우선 주요 api를 살펴보자. gulp ..
- Total
- Today
- Yesterday
- node.js
- framework
- browserify
- javascript
- git tag
- 원하는것이있다면끝까지버텨라
- nodejs
- vue.js
- 자바스크립트
- node
- Typescript
- 뉴욕
- backbone.js
- 외부모듈
- awesome-vue
- awe-some
- 함수
- Android
- MarionetteJS
- AndroidContext
- js
- vuex
- vue
- #가상머신
- nextTick
- marionetts.js
- common.js
- eventbus
- mocha.js
- angular
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |