JavaScript (15) 썸네일형 리스트형 [Vue.js] 컴포넌트 통신(props, event emit) 디렉티브에 이어서 잘 알아둬야 할 주제를 가져왔다. 바로 컴포넌트 통신 방식인 props와 event emit이다. 먼저 알아볼 props 속성은 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있다. 간단한 예제로 확인해봐야겠다. var childComponent = { template: '{{ message }}', props: ['message'] } new Vue({ el: '#app', components: { 'child': childComponent }, data: { pMessage: 'parent', } }); child 컴포넌트로 메시지를 출력하는 예제이다. 특징은 child 컴포넌트에 props 속성을 정의하였고 상위 컴포넌트인 root 컴포넌트의 pMessage 데이터를 전달받.. [Vue.js] Vue 디렉티브(Directives) Vue의 데이터 바인딩에 대해서 알아보면서 v-bind라는 것도 알게 됐다. 정식 명칭은 디렉티브(Directives) 라고 한다. 번역하자면 지시문이고, HTML 태그 내의 속성으로 선언된다. 단순하게 'v-로 시작되는 속성을 가진 HTML 태그에 지시를 내린다'라고 생각하면 되겠다! 기본적으로 제공하는 디렉티브에 대해서 정리해봐야겠다. v-text v-html v-show v-if / v-else / v-else-if v-for v-on v-bind v-model v-slot v-pre v-cloak v-once v-is 15개나 있어서 간단하게나마 정리해봐야겠다. 1. v-text new Vue({ el: '#app', data: { txt: 'abcd' } }); 엘리먼트의 textContent를.. [Vue.js] 데이터 바인딩(data binding) Vue.js의 가장 기초가 되는 데이터 바인딩부터 정리해보기로 했다. new Vue({ el: '#app' }); 화면의 div 요소와 Vue의 인스턴스를 연결한 내용이다. data를 연결하려면 어떻게 해야 할까? {{ message }} new Vue({ el: '#app', data: { message: 'hi?' } }); Vue 인스턴스에는 data 속성을 추가해주고, 화면에는 Mustache Tag(이중 중괄호 문법)를 활용해서 data를 명시해준다. 가장 기본적인 데이터 바인딩 방법이다. 위 방법이 화면에 표시되는 텍스트 바인딩 방법이고 html 태그 속성도 바인딩이 가능하다. {{ message }} {{ message }} new Vue({ el: '#app', data: { message.. [Vue.js] Vue 시작하기 jQuery만 써보다가 Vue.js를 경험해볼 수 있는 기회가 생겼다. 빠르게 적응하기 위해 온라인 강의를 선택했고 기본적인 내용은 간단히 정리해보기로 했다. jQuery와 Vue의 차이점은 무엇일까? var str = "Hello"; $("#app").text(str); str = "Vue"; $("#app").text(str); 스크립트에서 id가 app인 요소를 찾아서 text를 삽입해주는 jQuery 예제이다. 텍스트가 한 번만 삽입되면 가장 깔끔하고 좋겠지만, 텍스트가 변경될 수도 있고 추가될 수도 있다. 텍스트를 변경하려면 다시 id가 app인 요소를 찾아서 텍스트를 바꿔준다. 똑같은 코드가 중복되고 비용이 높은 DOM 참조를 반복하는 비효율적인 상황이 만들어진다! Vue.js에서는 이런 부분.. [jQuery] data() 알아보기 jQuery 소스를 보다 보면 data()라는 함수가 자주 등장하거나 아예 없을 때도 있다. 제대로 쓰는 사람이 있고 아예 안 쓰는 사람이 있는 것 같다. 뭐길래 호불호가 갈리는걸까? 알아보자! Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements. 가장 기초적인 공식 홈페이지의 .data() 정의를 알아봤다. 대충 정리하면 요소에 임의 데이터를 저장하거나 데이터를 불러올 수 있다는 것이다. .data( key, value ) Description: Store arbitrary dat.. [jQuery] $(document).ready()와 $(window).load() 차이 알아보기 코드 리뷰에서 vue 소스를 보다가 화면 로딩에 대한 주제가 나왔었다. 가장 기본적인 부분이지만 정리하고 넘어가면 좋을 것 같다는 생각이 들었다. jQuery 할 때 가장 많이 보이는 $(document).ready()는 정확히 뭘까? $(document).ready(function() { // code }); .ready() 함수에 대한 공식 홈페이지의 설명이다. Specify a function to execute when the DOM is fully loaded. The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.. [JavaScript] this 알아보기 자바스크립트를 하면서 제일 헷갈리고 알기 쉽지 않은 this에 대해서 알아보기로 했다. 어렵지만 한 번쯤은 제대로 정리하고 넘어가야 좋을 것 같다. 자바에서 this는 클래스의 인스턴스 자신을 가리키며 멤버 변수에 접근할 수 있었다. 자바스크립트에서 this는 뭔가 비슷하면서도 다른 것 같다.. 뭘까? 공식 사이트를 통해서 this에 대한 설명을 찾아봤다. 몇 가지 키워드를 살펴보면 1. this의 값은 함수를 호출한 방법에 의해 결정되고, 호출할 때마다 다를 수 있다는 점 2. ES5에서는 bind 메서드를 통해 this 값을 설정할 수 있다는 점 3. ES6에서는 스스로의 this 바인딩을 제공하지 않는 화살표 함수가 추가된 점 세 가지의 특징을 확인할 수 있었다. 하나씩 살펴봐야겠다. this의 값.. [jQuery] find(), children() 비교해보기 jQuery 소스를 보다 보면 find()가 많이 쓰인다. find()는 범위를 넓게 검색하고 있다는 걸로 알고 있고 비효율적이라고 생각해 사용하지 않았다. 그래도 제대로 한번 알아보고자 비슷한 두 개의 함수 find()와 children()을 함께 비교해보기로 했다. a b c 가장 간단한 예제인 ul, li 태그로 비교해보기로 했다. 태그에 자식 요소 3개가 있고 요소마다 자식 요소가 한 개씩 있는 상태다. 우선 기준으로 을 찾아보기로 했다. 시작부터 find와 children이 다르게 동작한다. find는 태그 3개를 찾았고 children은 찾지 못했다. 그렇다면 좀 는 찾을 수 있을까? 태그를 찾은 결과는 같았다. find는 하위 요소를 전체 탐색하여 모두 찾을 수 있고 children은 한단계.. 이전 1 2 다음
