새오의 개발 기록

배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채우는 메소드 arr.fill(value[, start[, end]]) fill 메서드는 value, start, end의 3개 인자를 가집니다. start와 end 인자는 선택 사항으로써 기본값으로 각각 0과, this 객체의 length를 가집니다. length가 배열의 길이일 때, start가 음수이면 시작 인덱스는 length+start입니다. end가 음수이면 끝 인덱스는 length+end입니다. fill은 일반 함수이며, this 값이 배열 객체일 필요는 없습니다. fill 메서드는 변경자 메서드로, 복사본이 아니라 this 객체를 변형해 반환합니다. value에 객체를 받을 경우 그 참조만 복사해서 배열을 채웁니다. const ..

라이프 사이클(생명 주기) Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계 라이프 사이클 훅 각 라이프 사이클마다 개발자가 추가한 커스텀 로직(실행되는 함수들) 메서드 시점 beforeCreate 인스턴스가 생성되고, 리액티브 초기화가 일어나기 전 created 인스턴스가 생성되고, 리액티브 초기화가 일어난 후 beforeMount 인스턴스가 마운트되기 전 mounted 인스턴스가 마운트된 후 beforeUpdate 데이터가 변경되어 DOM에 적용되기 전 updated 데이터가 변경되어 DOM에 적용된 후 beforeDestroy Vue 인스턴스가 제거되기 전 destroyed Vue 인스턴스가 제거된 후 errorCaptured 임의의 자식 컴포넌트에서 오류가 발생했을 때 자주 사용되는 cre..

기본적인 옵션 구성 var app = new Vue({ // 마운트할 요소 el: '#app', // 애플리케이션에서 사용할 데이터 data: { message: 'Vue.js' }, // 산출 속성 computed: { computedMessage: function() { return this.message + '!' } }, // 라이프 사이클 훅 created: function() { } // 애플리케이션에서 사용할 메서드 method: { myMethod: function() { } } }) el el에는 애플리케이션 인스턴스를 적용할 요소를 나타냄 선택자 형태로 지정 data - 데이터 객체 또는 배열로 지정 computed - 산출 속성 data와 비슷하게 사용하는 '함수로 인해 산출되는 데이..

텍스트 바인딩 템플릿에 다음과 같이 속성 이름을 작성하면 해당 위치에 값이 랜더링 됨 {{ message }} // Javascript var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) Hello Vue.js! 옵션에 정의한 데이터는 다음과 같이 외부에서 접근 가능함 console.log(app.message) // Hello Vue.js! 반복 랜더링 v-for 기사 목록 또는 상품 목록과 같은 리스트는 data 옵션에 등록한 배열 또는 객체에 v-for 디렉티브를 적용해서 반복 랜더링 할 수 있음 {{ item }} // Javscript var app = new Vue({ el: '#app', data: { list: ['사..