Vue 스터디

[Vue.js] .sync 수식어 - 양방향 바인딩

.sync vue로 개발을 하다보면 부모 컴포넌트의 data를 자식 컴포넌트에서 값을 변경해야하는 경우가 있는데 이처럼 prop을 사용할 때 양방향 바인딩이 필요한 경우가 있다. 이런 상황에서 여러가지 방법이 있는데, 예를 들어 v-model을 사용할 수도 있고 update 이벤트를 props로 전달하는 방법, 그리고 이번에 포스팅할 .sync 수식어를 사용하는 방법이 있다. .sync 수식어는 2.3.0+부터 추가된 수식어로 위의 방법과 달리 간단한 수식어로 컴포넌트 간의 양방향 바인딩이 가능하게 해준다. 하지만 양방향 바인딩은 유지보수 측면에서 이슈를 발생시킬 수 있다. 자식 컴포넌트가 부모 컴포넌트를 변경할 수 있게 되면, 부모 컴포넌트와 자식 컴포넌트 중 어디에서 변했는지를 특정할 수 없게 될 수..

[Vue.js] vue에서의 이벤트리스너(event listener)

이벤트리스너(event listener) 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다. Vue.js는 Html 이벤트 리스너를 사용한다고 한다. html 이벤트 리스너? 그럼 이벤트 리스너가 여러 종류가 있다는 의미인데 어떤게 있는지 찾아봤다. 이벤트 바인딩하는 방법은 3가지가 있는데 html 이벤트 핸들러 : HTML 요소의 onclick 속성에 JS 함수를 호출하여 바인딩하는 방법. (HTML과 JS 코드는 분리시켜 관리하는 것을 권장하기 때문에 좋은 방법이 아닙니다.) DOM 이벤트 핸들러 : dom 요소에 이벤트를 바인딩하고 이벤트가 ..

[Vue.js] native 이벤트

Native Event vue.js로 개발을 하던 도중 태그에 click, foucs, blur와 같은 이벤트가 먹히지 않아 해결방법을 찾던 중에 .native를 사용하면 이벤트를 쓸 수 있다는 글을 찾고 사용해서 해결했다. 근데 .prevent, .stop은 써봤어도 .native는 처음 봤던 코드인데 "도대체 .native가 뭔데 되는건데?" 라는 생각을 했다. 공식 문서에서는 .native에 대해 아래와 같이 설명하고 있다. "컴포넌트에서 루트 엘리먼트의 네이티브 이벤트를 직접 감지하고 싶은 경우에 사용한다." 솔직히 위 설명만 봤을 때는 이해가 가지 않는다. 네이티브는 v-on 이벤트 장식자로 취급되는데 컴포넌트의 루트 요소 위에 있는 네이티브 이벤트를 호출한다. 선언법은 아래와 같다. 보통의 경..

[Vue.js] 상대경로 별칭(@, ~ 등) 사용해서 절대경로로 변경하기

외부 코드를 import 해서 사용할 때 늘 아래와 같이 상대경로를 통해 찾아와 사용했다. import Header from '../../../Header'; 이렇게 사용하다보니 프로젝트 규모가 커질수록 컴포넌트가 많아질수록 경로가 복잡해지고 코드도 지저분해졌다. 그렇게 늘 상대경로를 사용하다가 아래와 같은 경로를 발견했다. import Header from '@/components/Header'; 처음 봤을 때는 '어? 이 @는 뭐지??? 절대경로인거 같은데 어떻게 설정한거지???' 라는 생각을 했다. Vue/CLI를 사용해서 프로젝트를 만들고 개발을 했었기 때문에 이런 설정들을 바꿔볼 생각을 하지 않았었는데 공부를 하다보니 이러한 초기설정들이 중요하다는 걸 알게 되었다. 아무튼 위와 같이 상대경로를 ..

[Vue.js] 사용자 정의 디렉티브

사용자 정의 디렉티브 vue 에서는 v-model이나 v-show와 같은 디렉티브 외에도 사용자 정의 디렉티브를 등록해서 사용할 수 있습니다. 어떤 로직이 중복해서 사용된다면 그 로직에 대해 디렉티브로 정의해서 코드의 중복을 줄일 수 있는 효과가 있습니다. directive 등록 디렉티브를 전역, 로컬 2가지로 등록할 수 있습니다. //전역 main.js Vue.directive('focus', { inserted : function(el){ el.focus() } }) //로컬 directives: { //디렉티브 정의 inserted: function(el){ el.focus(); } } 위와 같이 등록을 한 후에 템플릿에서 아래와 같은 모든 태그에 attribute 추가해서 사용할 수..

[Vue.js] vue-i18n

vue-i18n 회사에 입사하고 코드를 분석하는데 위와 같은 라이브러리를 사용하는 걸 발견했습니다. 그동안 프로젝트나 공부를 진행하면서 본적이 없는 라이브러리라서 찾아보니 국제화를 위한 라이브러리 였습니다. i18n i18n의 사전적 정의는 국제화라고 합니다.(i와 n 사이 18개의 알파벳이 있다는 의미) 소프트웨어 맥락 안에서 국제화란 어떤 것이 있느냐하면 제일 먼저 국가 마다 다른 언어를 지원하는 것입니다. 예를 들어, 한국어를 사용하고 있지만 영어를 사용하는 사람들에게 어떤 서비스를 제공하고자 한다면 한국어를 모르기 때문에, 번역해서 서비스해야합니다. 언어뿐만 아니라, 어떤 국가에서는 왼쪽에서 오른쪽으로 글을 읽지 않을 수도 있고, 숫자, 화폐의 표기도 다를 수 있습니다. 물론 시간도 당연히 제각각..

React vs Vue.js 문법적 차이

React vs Vue.js 데이터 상태 관리 // Counter.vue {{ count }} import { useState } from 'react' function Counter() { const [count, setCount] = useState(1) const increment = () => setCount(count+1) return ({count}) } react에서는 일반적으로 useState를 통해 데이터 상태 관리를 합니다. useState는 튜플 형식으로 반환되며 첫번째는 변수 두번째는 변수에 접근할 수 있는 set함수라고 생각하면 될 것 같습니다. vue는 set 함수를 통해 data에 접근하는 것이 아니라, 데이터가 선언된 해당 인스턴스 내에서는 this를 통해 자유..

Vue에서 virtual DOM은??

소개 Vue.js는 빠른 로딩 속도와 쉬운 확장성으로 알려진 자바스크립트 프레임워크입니다. 필요에 따라 가상 돔을 사용하여 실제 돔을 업데이트하는 기능 중 일부를 직접 연결할 수 있습니다. 가상 돔을 이해하는 것이 Vue.js를 학습하는 데 필요한 요구 사항은 아니지만, 신규 Vue 개발자가 뒤에서 일어나는 것들에 대해 이해하는데 도움이 될 수 있습니다. DOM이란 This is a Heading This is a paragraph. 우리가 Vue.js의 가상 돔에 대해 이야기 하기 전에 돔이 무엇인지에 대해 이해하는 것이 중요합니다. DOM(Documents Object Model)은 모든 마크업 언어(사용자의 HTML)를 연결된 노드로 처리하는 인터페이스의 일종입니다. 나무와 같은 구조로 저장된 마크..