본문 바로가기

전체 글

 (24)
[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..
[LeetCode] Third Maximum Number 이번에도 Array 문제이고 최대값을 찾는 문제인데 세 번째 최대값을 찾는 것이 특징이다. Third Maximum Number Given an integer array nums, return the third distinct maximum number in this array. If the third maximum does not exist, return the maximum number. Example 1: Input: nums = [3,2,1] Output: 1 Explanation: The first distinct maximum is 3. The second distinct maximum is 2. The third distinct maximum is 1. Example 2: Input: num..
[LeetCode] Max Consecutive Ones 지난번에는 String에 대한 문제를 풀었고 이번에는 Array에 대한 문제를 풀어보기로 했다. Max Consecutive Ones Given a binary array nums, return the maximum number of consecutive 1's in the array. Example 1: Input: nums = [1,1,0,1,1,1] Output: 3 Explanation: The first two digits or the last three digits are consecutive 1s. The maximum number of consecutive 1s is 3. Example 2: Input: nums = [1,0,1,1,0,1] Output: 2 Constraints: 1

티스토리툴바