[Vue] Vue 인스턴스 라이프 사이클

Vue 인스턴스는 객체로 생성되고, 데이터에 대한 watch 기능을 설정하는 등 작업을 위해 초기화를 수행한다. 그리고 이 과정에서 다양한 라이프 사이클 훅 메서드를 적용할 수 있다. 라이프 사이클 훅 설명 beforeCreate Vue 인스턴스가 생성되고 데이터에 대한 관찰(whatch) 기능 및 이벤트 감시자 설정 전에 호출 됨 create Vue 인스턴스가 생성된 후에 데이터에 대한 관찰 기능, 계산형(computed) 속성, 메서드, 감시자 설정이 완료된 후에 호출 됨 beforeMount 마운트가 시작되기 전에 호출 됨 mounted el 에 Vue 인스턴스의 데이터가 마운트된 후에 호출 됨 beforeUpdate 가상 DOM이 랜더링, 패치되기 전에 데이터가 변경될 때 호출됨. 이 훅에서 추가..
Helloworld!/Vue 2018. 12. 27. 16:41

[Vue] vue-cli

vue-cli 는 커맨드라인 인터페이스 기반의 스캐폴딩 도구. scaffolding: 원래는 '공사장 등에서 사용하는 임시 가설물'이라는 뜻. 개발할 때 처음부터 개발하는 것이 아니라 기본적인 인터페이스와 틀을 제공. 개발자는 이 틀을 활용하여 전체 앱을 개발한다 특히 vue.js 앱을 개발할 때 프로젝트의 폴더 구조를 어떻게 잡을 것인지 테스트, 빌드, 의존성 부분을 어떻게 설정할 것인지에 대한 고민을 하지 않도록 프로젝트의 기본 템플릿을 설정해주는 고마운 도구이다. 설치 명령어 npm install -g vue-cli vue-cli 로 만들 수 있는 프로젝트 템플릿 살펴보기 명령어 vue list 위 명령어를 실행하면 이렇게 나오는데 $ vue list Available official templat..
Helloworld!/Vue 2018. 12. 26. 17:24

[AngularJS] One time binding

Angular 에서 View 와 Component 에서 발생한 데이터의 변경 사항을 자동으로 일치시키는 기능을 제공하는데, 이를 Data Binding (데이터 바인딩) 이라고 한다. 그리고 Angular 의 데이터바인딩 방법에는 크게 두 종류가 있는데 다음과 같다. 1. Two-Way Data Binding : 양방향 바인딩. Component와 View의 상태 정보를 자동으로 일치시켜 주는 기능 2. One-Way Data Binding : 단방향 바인딩. Component에서 View쪽으로 혹은 View에서 Component쪽으로 한 방향으로 데이터를 바인딩 특히 자주 사용하는 단방향 바인딩 방식 중 Interpolation 은 Component에서 선언한 속성을 View에서 사용할때 쓰인다. 형태..
카테고리 없음 2018. 11. 22. 22:54

[AngularJS] Property 'tz' does not exist on type 'Moment'.

moment 사용 시 tz does not a function 에러가 나면서 moment 쓸 때 에러가 나서 찾아보니까 moment 사용 시 typescript 도 사용하면 나는 케이스이고,moment-timezone 이라는 타입을 typescript 에서 알지 못해서 발생하는 에러였다. 해결 방법은,typings.json 에 "moment-timezone": "github:DefinitelyTyped/DefinitelyTyped/moment-timezone/moment-timezone.d.ts#f8a90040348e83926f44e690b209769c4f88b961" 추가해서 다시 typings install 하니까 해결됐다. 참고 사이트 : https://stackoverflow.com/questio..
Helloworld!/Angular 2018. 11. 22. 22:39

[JavaScript] 정렬 : sort()

자바스크립트 내장 함수인 sort 함수는 다음과 같이 사용한다. var fruit = ['orange', 'apple', 'banana']; fruit.sort(); // apple, banana, orange 일반적으로 문자 정렬일 경우 위 와 같이 문제 없이 원하는대로 정렬이 되지만, 숫자 정렬 예시를 한번 보자. 다음과 같이 숫자가 나열되어 있다고 가정했을 때 var score = [4, 11, 2, 10, 3, 1]; ASCII 문자 순서로 정렬되어 숫자의 크기대로 나오지 않고 첫번째 문자와 두번째 문자 각각의 정렬로 처리된다 score.sort(); // 1, 10, 11, 2, 3, 4 따라서 정상적으로 정렬되기를 원한다면 다음과 같이 해야한다. score.sort(function(a, b) ..
Helloworld!/Javascript & jQuery 2018. 11. 13. 18:23

[JavaScript] object 안에 키 값을 기준으로 loop 돌고 싶을 때 : Object.keys()

object 형태가 다음과 같이 생겼다고 하자. let evilResponse = { "car" : { "color" : "red", "model" : "2013" }, "motorcycle": { "color" : "red", "model" : "2016" }, "bicycle": { "color" : "red", "model" : "2011" } } 이때 "car", "motorcycle", "bicycle" 과 같은 object 의 key 값을 배열로 가져오고 싶으면 Object.keys() 을 사용한다. let keys: string[] = Object.keys(evilResponse); // 결과 값 : ["car", "motorcycle", "bicycle"] 이 방법을 응용해서 object ..
Helloworld!/Javascript & jQuery 2018. 11. 13. 18:05

Intellij heapsize 늘리기

IDE 를 사용하다보면 어느순간 heap memory size 차기 시작하는데 이때 한번씩 수동으로 정리를 하고 싶을 때 다음과 같은 방법을 사용한다. 우선, memory indicator 상태를 확인 할 수 있게 memory indicator 를 켜준다. Preference - Appearance - Window Options 에 show memory indicator 를 체크해주면 memory indicator 상태를 확인 할 수 있다. 그러면 Intellij 하단에 다음과 같이 메모리가 표기된다. 막대가 끝까지 채워졌을 때 한번씩 막대기 부분을 클릭을 해주면 heap memory size 가 정리가 된다. 이때 heap memory size 가 너무 작게 적용되 있는 거 같으면 maximum mem..
카테고리 없음 2018. 11. 13. 17:54

[AngularJS] $watch

Angular 에서 어떤 변수의 값이 변경된 시점을 캐치해서 그 변경값과 변경전 값들로 뭔가를 구현 하고싶을 때 $watch 를 사용한다. 예를 들어 다음과 같이 function MyController($scope) { $scope.age = 100; $scope.$watch('age', function(newValue, oldValue){ console.log('newValue : ' + newValue); console.log('oldValue : ' + oldValue); }); } age에 100이란 값이 선언 되어있었는데 200이라고 값을 변경 했을 경우 newValue 값은 200, oldValue 값은 100으로 출력한다. 그렇다면 하나의 object 안에 들어있는 모든 property 들의..
Helloworld!/Angular 2018. 10. 4. 18:53