본문 바로가기

복습/Vue.js

[vuejs] 기초연습을 위한 계산기 실습 README vuejs 기초연습을 위한 계산기 왜 만들었나? 기존에 계산기를 만든적이 있는데 소스코드가 너무 지저분했던것도 있고, vuejs 를 공부하는 김에 다시 다듬어볼까 하고 만들어봤습니다. 구성이 어떻게 되어있나? Vue instance 에 필요한 데이터들을 전부 집어넣었습니다. 크게 view-content 와 button-content 로 나누었습니다 button 을 렌더링할 때 조건을 걸어주어서 각 버튼에 맞는 css 를 적용 시켰습니다. 계산방식 숫자를 담는 numStack, 연산자를 담는 oprStack 을 나누어서 연산자 우선순위에 따라 실시간으로 계산이 되는 방식입니다. git clone https://github.com/heecheolman/vue-calc.git 공부하면 좋을 참고자..
[vuejs] 뷰 템플릿 (vue templates) vuejs-templates vuejs-templates Boilerplate 란? boilerplate 는 반복되며 자주 쓰이는 것들에 대해 미리 개발환경설정을 구성해놓은 일종의 템플릿 개념이다.front-end 개발을 하다보면 babel, webpack 등 많이 쓰이는 모듈들 또는 빌드 설정들, 폴더구조들을 반복적으로 설정하게되는데 이를 미리 만들어 놓는것이다.이렇게 자동화를 해놓으면 갖다 쓰기만 하면돼서 개발환경구축에 시간과 비용을 단축시킬 수 있다. $vue list해당 명령어를 통해 공식적인 뷰 템플릿의 리스트들을 확인할 수 있다. vuejs-templates 종류 vue-webpack-boilerplate webpack + vue-loader 조합으로 hot-reload, lint-on-sav..
[vuejs] 뷰 라이프사이클 (Vue life-cycle) vue-lifecycle Vue.js 라이프사이클 이해하기 Vue.js 의 라이프사이클은 크게 4가지로 나뉜다. Creation Mounting Updating Destruction 위의 그림은 Vue.js 의 라이프사이클 다이어그램이다. 빨간색폰트가 컴포넌트에서 사용할 수 있는 함수들이다. Creation : 컴포넌트 초기화 컴포넌트들을 초기화하는 단계이며 서버렌더링에서 지원되는 단계이다. 클라이언트나 서버 렌더 단에서 처리해야 일이 있으면 이 단계에서 진행한다.아직 Component가 DOM 에 추가되기 전이므로 DOM에 접근할 수 없다. new Vue() Vue Instance 생성 Init(Events & Lifecycle) Event 와 Lifecycle 초기화 beforeCreate 가장 처음..