JavaScript 검색 결과

해당 글 43건

Reusability & Compostion

Composition API - 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue 3 버전에 추가된 함수 기반의 API이다. - 그동안 Vue는 '프로젝트 규모가 커질수록 관리하기 힘들다'는 단점이 있었다. data, computed, watch, methods 등 프로젝트 규모가 커질수록, 컴포넌트의 계층 구조가 복잡할수록 코드에 대한 추적 및 관리가 어려웠다. - 하지만 컴포지션 API를 이용하면 Setup이라는 메소드 안에서 한 덩어리로 코드를 구현할 수 있어서 코드에 대한 관리가 훨씬 쉬워지게 된다. - 즉, 컴포지션 API는 그동안 Vue가 가지고 있던 단점을 보완하기 위해서 추가된 Vue 3 버전의 핵심 기능이다. Setup - Setup은 컴포지션 ..
JavaScript/Vue.js 2021. 7. 19. 11:32

Vue Router

라우팅 - 사용자가 접속한 주소에 따라 페이지가 달리지는 것 샘플파일로 vue-router 살펴보기 // scr/App.vue Home | About - 코드에 router-link to="/", router-link to="/about" 부분이 있다. 해당 부분의 링크를 클릭하고 브라우저 URL을 보면 Home을 클릭하면 localhost:8080, About을 클릭하면 localhost:8080/about으로 바뀌는 것을 확인할 수 있다. (크롬에서 개발자 모드로 확인을 하면 router-link to="/" 코드가 a href="/"로 변경되는 것으로 보아 같은 기능을 수행하는것 같다.) - 개발한 페이지에서 화면이 어떻게 브라우저의 주소가 바뀔 때마다 바뀌어 보이도록 설정되는지 알아보자 // sr..
JavaScript/Vue.js 2021. 7. 16. 18:23

컴포넌트 심화 학습 (Provide/Inject, Template refs)

Provide/Inject 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 하는 경우 props를 사용하면 된다. 그런데 만약에 컴포넌트 계층 구조가 복잡하게 얽혀있어서 부모 컴포넌트로부터 자식 컴포넌트, 그리고 그 자식 컴포넌트의 자식 컴포넌트로 데이터를 전달하는 경우가 발생하면 props를 통해 데이터를 전달하는 것은 굉장히 복잡한 코드를 양산하게 된다. 이러한 경우에 사용할 수 있는것이 Provide/Inject이다. 컴포넌트의 계층 구조가 아무리 복잡하더라도 부모 컴포넌트에서는 provide 옵션을, 자식 컴포넌트에서는 inject 옵션을 통해 데이터를 쉽게 전달할 수 있다. 컴포넌트 구조가 다음과 같다고 가정을 한다. Root ∟ ParentComponent ⊢ ChildComponent1 ..
JavaScript/Vue.js 2021. 7. 16. 14:24

컴포넌트 심화 학습 (Slot)

Slot - 컴포넌트 내에서 다른 컴포넌트를 사용할 때 쓰는 컴포넌트의 마크업을 재정의하거나 확장하는 기능 - 컴포넌트의 재활용성을 높여주는 기능 Slot을 사용하여 Modal Popup 만들기 - 팝업의 기본 틀에 해당하는 modal-layout 컴포넌트 // src/views/SlotModalLayout - 이렇게 Slot에 name을 지정해서 사용하는 Slot을 'Named Slots'라고 한다. - 컴포넌트는 정해진 html 구조를 갖게 된다. 이렇게 작성된 컴포넌트를 제공하고 개발자는 각 slot에 해당하는 코드만 작성하면 되기 때문에, 어떤 개발자가 구현하더라도 동일한 디자인의 팝업을 만들 수 있게 된다. - Slot을 사용하는 컴포넌트에서는 삽입한 컴포넌트 안에서 다음과 같이 template..
JavaScript/Vue.js 2021. 7. 16. 14:00

컴포넌트 심화 학습(Props, $refs, $emit)

부모 컴포넌트와 자식 컴포넌트 // scr/components/PageTitle.vue Page Title // src/views/NestedComponent.vue - 컴포넌트에서 다른 컴포넌트를 사용하는 방법은 사용할 컴포넌트를 import한 후 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 components에 등록하면 된다. : PageTitle 컴포넌트를 import 한다. import PageTitle from './components/PageTitle' : 현재 컴포넌트의 템플릿에서 사용할 컴포넌트를 등록한다. components: { PageTitle } : HTML에서는 import한 컴포넌트를 이용해서 이름을 이용해서 태그를 만들면 된다. 컴포넌트는 페이지 하나 전체가 될 수도 있고, 하..
JavaScript/Vue.js 2021. 7. 16. 13:27

Computed와 Watch

Computed와 Watch는 둘 다 Vue 인스턴스 내의 정의된 데이터 값에 변경이 일어나고 있는지를 감시하고, 변경될 때마다 정의된 함수가 실행됨. 데이터의 값이 변경되었는 지를 계속 감시한다는 측면에서 Computed와 Watch는 매우 비슷해 보이지만, 사용되는 용도에는 분명 차이가 있다. Computed - Computed는 Vue 인스턴스 내에 정의된 데이터 값과 연관된 또 하나의 데이터를 정의해서 사용할 수 있도록 해줌 Full Name: {{ fullName }} - computed 내에 fullName이 정의되어 있고, firstName과 lastName을 합쳐서 반환해주는 함수로 정의되어 있다. - 여기서 함수명인 fullName은 함수이자 동시에 Vue 인스턴스의 데이터 키 값이다. ..
JavaScript/Vue.js 2021. 7. 15. 16:42

이벤트 처리 (v-on)

Vue 컴포넌트에서 이벤트를 처리할 때는 v-on 디렉티브를 사용함 v-on 디렉티브는 심볼 @로 사용 가능하다. 클릭 이벤트 (v-on:click) - 클릭 이벤트는 v-on:click="메소드명" 혹은 @click="메소드명"을 사용해서 추가할 수 있음 Add One {{ counter }} - 클릭 이벤트 발생 시 여러 개의 함수를 호출하고 싶다면 다음과 같이 작성하면 됨 Click Change 이벤트 (v-on:change) - change 이벤트가 가장 많이 사용되는 html 태그는 select 이다. 사용자가 select에서 옵션을 바꿀 때마다 change 이벤트가 발생함 - change 이벤트는 v-on:change="메소드명" 또는 @change="메소드명"으로 사용함 서울 경기 제주 Ke..
JavaScript/Vue.js 2021. 7. 15. 16:17

랜더링(v-for, v-if, v-show)

리스트 랜더링(v-for) select의 option, table의 tr 데이터 등 반복되는 객체를 처리할 떄 많이 사용함 쇼핑몰에서 보게되는 제품 리스트처럼 동일한 UI 패턴에 데이터만 다르게 처리되는 그런 부분들이 다중 데이터를 이용해서 처리되는 부분이라고 생각하면 됨 배열 데이터는 v-for 디렉티브를 이용해서 바인딩할 수 있음 반복적으로 랜더링할 html 태그에 v-for 디렉티브를 사용하면 배열에 있는 데이터 수만큼 html태그를 반복적으로 랜더링하게 됨 v-for="(item, index) in items" 위와 같은 형식으로 사용함 여기서 items는 데이터 배열임 v-for를 통해 배열을 하나씩 읽어와서 배열의 각 아이템을 item으로, 배열의 현제 index를 index로 반환해줌 ind..
JavaScript/Vue.js 2021. 7. 15. 15:56