분류 전체보기222 [Vue.js] Watch 속성 vs Computed 속성 watch 속성, Computed 속성 두 속성은 Data가 변경됨에 따라 실행된다는 점에서 비슷하다. 하지만 다른 점이 있다는데.... 솔찍히 모르겠고, 공식문서에서는 computed를 쓰는것을 권장하고 있습니다... 솔찍히 이유는 이해가 안되네요. 좀 더 공부해보고 경험해보면서 익혀야겠습니다. 2022. 9. 18. [Vue.js] Watch 속성 Vue에서 데이터가 변할 때마다 실행 되는 Watch 속성 데이터의 변화를 감지하여 메서드가 실행되도록 할 수 있습니다. 이 watch 속성을 사용하면 React의 useEffect처럼 특정 데이터가 변할 떄마다 어떤 행동을 하도록 만들 수 있습니다. 아래 예제를 보면 num이 변할 때마다 this.logText()라는 메서드를 실행하게 됩니다. 이런 방식은 아래 react useEffect() 훅과 비슷한 효과를 볼 수 있겠습니다. {{num}} increase // 실행은 안시켜봤는데 위 코드와 아래코드가 같은 코드인것 같습니다. num이 변할 때마다 useEffect 안의 logText()가 실행, // 단 하나 다른점은 아래 코드에서는 mount되는 시점에 logText가 한번 실행 되겠네요. i.. 2022. 9. 18. [Vue.js] v-on 디렉티브를 통한 event Handle Methods binding v-on 디렉티브 v-on:keyup 과 같은 v-on 디렉티브를 통해 eventListener를 쉽게 붙일 수 있다. Click me add 2022. 9. 18. [Vue.js] 데이터 바인딩, 디렉티브 Vue에서 데이터를 다루는 방법은 2가지다. 데이터 바인딩 Mustach Syntax라고 불리는 방식으로 HTML내부에 직접 바인딩 할 수 있다. {{ data }} 디렉티브 v-bind, v-if, v-show, v-html 등등 v-로 시작하는 정해진 문법을 통해 html tag의 attributes에 데이터를 바인딩 할 수 있다. 아래 코드에서 v-bind로 만들어진 예제들을 확인할 수 있다. {{number}} {{doubleNum}} v-if Loading...v-if test user has been logged in v-show Loading...v-show 2022. 9. 18. [Vue.js] Axios 라이브러리 Axios 서론 SPA 프레임워크와 관계없이 가장 많이 쓰이는 것으로 알려진 AXIOS 라이브러리입니다. 부트캠프에서 React를 배울 당시 Axios를 쓰지않고, Fetch만을 사용해서 구현해보라는 제한사항이 있었습니다. 따라서 저는 Axios 사용이 처음입니다. 뷰에서는 Axios를 사용하라는 권고가 있습니다. axios이전엔 vue-resourse라는 라이브러리가 공식이었다고 하네요. Axios 사용법 (with 오픈소스 사용법) 오픈소스를 사용하기 전 확인해야 할 가장 중요한 지표는 Star 수 그 다음 커밋수와 컨트리뷰터를 보면 좋다. 마지막으로 최근의 커밋이 언제인지 확인하며 신뢰도를 확인할 수 있다. Axios 깃헙 공식 설명에 따르면 Axios는 Promise기반의 HTTP Client이다.. 2022. 9. 18. [Javascript] (LeetCode) 49. Group Anagrams(Medium) [Javascript] (LeetCode) 49. Group Anagrams(Medium) 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 서론 코드 카타에 해당 문제가 나왔는데, 완솔 하지 못하고 풀이를 보고 풀었네요! 프로젝트 기간에 바빠서 카타는 안하고 뒤늦게 푸는 중인데 Medium 수준도 나오고 정말 좋네요 ㅎㅎ (제 실력 대비) 어려운 문제 많이 풀어보면서 실력이 많이 늘었으면 좋겠습니다. 내 풀이 (풀다가 포기) /** * @param {string[]} strs * @return {string[][]} */ var groupAnagrams = function(strs) { // 새로운 배열을 만들고, // 객체에 알파벳 카운팅 // 객체 비교 => 같은 .. 2022. 9. 17. [Vue.js] Router 기초 SPA에 필수 요소 Router new VueRouter 로 라우터 인스턴스 생성하고 Vue인스턴스에 router: router로 연결해준다. VueRouter 인스턴스에 routes 배열에 route 정보를 적어둔다. 영역에서 컴포넌트가 뿌려진다. 는 to로 이동하는 Link 태그이다. Login Main 2022. 9. 16. [Vue.js] 같은 레벨의 컴포넌트 간의 데이터 통신 (React의 State 끌어올리기) Vue.js에선 같은 레벨의 컴포넌트 간의 데이터 통신을 어떻게 할까? React의 State끌어올리기를 Vue.js에선 어떻게 구현할까? Vue.js의 컴포넌트간 데이터 통신 방법은 아래로 Props, 위로 Event이다. 이 둘을 이용해서 Event로 올리고, Props로 다시 내리면 같은 레벨 컴포넌트간 통신이 가능하다. {{str}} 2022. 9. 15. [Vue.js] 컴포넌트간 통신, Props, Event Emit Vue에서의 컴포넌트간 통신 흐름 상위 컴포넌트 => 하위 컴포넌트로 Props가 내려간다. (데이터가 내려간다.) 하위 컴포넌트 => 상위 컴포넌트로 Event가 올라간다. Vue에서의 Props 개념은 react의 Props와 같다. 상위 컴포넌트에서 하위 컴포넌트로 전달해주는 데이터! 데이터 흐름 또한 상위 컴포넌트 => 하위 컴포넌트로 같다. props를 던져주는 방법은 v-bind:프롭스 속성 이름 ="상위 컴포넌트의 데이터 이름" Event Emit Vue에서는 하위 컴포넌트에서 상위 컴포넌트로 Event라는것을 보낼 수 있다. 방법은 아래와 같다. 1) 컴포넌트 template에 v-on:click="passEvent" 이런식으로 태그에 달아주고, 하위컴포넌트 methods 객체에 해당 pa.. 2022. 9. 15. [Vue.js] Vue 인스턴스, 전역 컴포넌트, 지역 컴포넌트 Vue 인스턴스 new Vue()를 통해 Vue 인스턴스를 생성하고, 해당 인스턴스를 통해 이미 정의되어있는 Vue의 기능들을 사용할 수 있다. Vue 생성자 함수의 인자로 객체가 들어가는데, 해당 객체에 컴포넌트들을 정의할 수 있다. (지역 컴포넌트) 해당 객체가 아닌 script태그 내에 Vue.component() 방식을 통해 컴포넌트를 정의 할 수도 있다. (전역 컴포넌트) 우리가 생각하는 웹앱 내의 컴포넌트들은 보통 지역 컴포넌트로 선언하고, 플러그인 등은 전역 컴포넌트로 선언한다. 지역 vs 전역 Vue인스턴스를 2개 이상 생성할 수 있는데, 이 때 전역컴포넌트는 어디서든 사용할 수 있지만 지역 컴포넌트는 Vue 인스턴스가 지정한 el 내에서만 사용가능하다. (웹 앱에서 일반적으론 인스턴스 하.. 2022. 9. 15. 이전 1 ··· 6 7 8 9 10 11 12 ··· 23 다음
