vue.js
-
janus.js - video Room : 자신의 bitrate를 변경하는 방법IT/javascript 2021. 9. 11. 15:11
안녕하세요. 오늘도 개발하면서 기억하고 싶은 것들과 신기했던 것들에 대한 내용을 정리하려고 합니다. 저는 janus.js를 사용하여 영상통화 웹을 개발하고 있습니다. * janus.js란? https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=kpoint01&logNo=221525261567 해당 블로그에 설명이 잘 되어 있으니 참고 바랍니다. 제가 사용하고 있는 라이브러리는 janus.js의 videoRoom를 사용하고 있습니다. janus.js 라이브러리를 사용하여 웹에 대한 소스를 구현 중, 자신의 비트레이트를 변경하는 방법에 대하여 찾아보았습니다. 저는 frontEnd 언어를 Vue.js를 사용하였습니다. janus 객체를 생성하..
-
Vue.js - Vue Router의 라이프사이클IT/Vue.js 2020. 8. 4. 13:19
내비게이션 가드 내비게이션 가드는 라우터에서 다른 라우터로 이동하는 내비게이팅이 수행될 때 실행되어 라우터의 이동을 막거나 혹은 다른 라우터로 리다이렉팅 할 수 있는 기능입니다. 내비게이션 가드는 적용 범위에 따라 전역 가드, 라우트별 가드, 컴포넌트별 가드로 나뉘어집니다. 그리고 다시 가드의 호출 타이밍에 따라 before 훅과 after 훅으로 나뉘게 됩니다., before 훅은 라우터의 이동이 끝나기 전에 미리 호출되는 훅이며, after 가드는 라우터의 이동이 끝난 후 호출되는 훅입니다. beforeRouteLeave 컴포넌트 내에 선언하며, 기존에 존재하던 컴포넌트가 제거되기 전에 이 훅을 호출합니다. 이 훅은 주로 문서(게시글 등)를 저장하지 않은 상태로 다른 곳으로 이동하는 것을 방지하는 데..
-
Vue.js - Vuex 개념 및 statesIT/Vue.js 2020. 7. 27. 09:46
Vuex란? Vue.js의 상태 관리를 위한 패턴이자 라이브러리입니다. 다른 상태 관리 패턴이나 라이브러리와 비교했을 때 뷰의 반응성(Reactivity) 체계를 효율적으로 활용하여 화면을 업데이트 한다는 차이점이 있습니다. 정리하자면, - 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 상태 관리(State Management)가 왜 필요한가? 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. 예를들면, header, button, list 등의 화면 요소가 각각 컴포넌트로 구성되어 한 화면에서 많은 컴포넌트를 사용합니다. 이에 따라 컴포넌트 간의 통신이나 데이터 전달을 좀 더 유기적으로 관리할 필요성이 생깁니다. 상태 관리란? 상태..
-
Vue.js - 하위 컴포넌트에서 상위 컴포넌트 통신 ($emit)IT/Vue.js 2020. 7. 24. 11:09
전에 포스팅들은 부모에서 자식으로 데이터를 전달하는 것을 알아봤습니다. 때로는 하위 컴포넌트에서 상위 컴포넌트로 데이터를 보내거나 메소드를 호출하기도 합니다. 하위 컴포넌트로 상위 컴포넌트의 이벤트를 발생하여 메소드를 호출해보도록 하겠습니다. 이벤트 발생과 수신은 $emit과 v-on 속성을 사용합니다. 1. 이벤트 발생 코드 형식 하위 컴포넌트의 메소드에 아래와 같이 코드를 작성합니다. // 하위 컴포넌트의 내용 this.$emit('이벤트 명'); 그리고 나서 해당 이벤트를 수신하기 위해 상위 컴포넌트의 HTML을 아래와 같이 구현합니다. 그럼 예시로 구현을 해보겠습니다. 2. 하위 컴포넌트 작성 (ChildEmit.vue) 하위 컴포넌트는 'Emit 클릭 !' 이라는 버튼을 클릭하면 sendEven..
-
Vue.js - 컴포넌트 통신 동적 props 사용하기 (Daynamic props)IT/Vue.js 2020. 7. 23. 11:15
Vue를 사용할 때 부모 컴포넌트에 있는 데이터를 자식 컴포넌트에서 필요로 할 때가 있습니다. props 옵션을 사용하면 부모 컴포넌트에 있는 데이터를 자식 컴포넌트로 보낼 수 있습니다. 저번 포스팅에는 정적 porps에 대해서 다루었는데요. https://kshman94.tistory.com/125 Vue.js - 상위에서 하위 컴포넌트 데이터 전달 방법 (props) 컴포넌트간 통신 뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많으며, 각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포� kshman94.tistory.com 항상 정적인 데이터만 자식에게 넘겨주시는 것이 아니므로, 동적으로 변하는 data를 자식에게 넘겨줘야 할 경우..
-
Vue.js - 상위에서 하위 컴포넌트 데이터 전달 방법 (props)IT/Vue.js 2020. 7. 22. 15:03
컴포넌트간 통신 뷰의 경우는 컴포넌트로 화면을 구성하기 때문에 같은 웹페이지라도 데이터를 공유할 수 없는 경우가 많으며, 각 컴포넌트들의 scope(유효범위)가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수가 없습니다. 상/하위 컴포넌트 관계 상위(Parent) 컴포넌트에서 props라는 속성으로 전달하게 됩니다. props : 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달할 때 사용하는 속성입니다. - 하위 컴포넌트의 속성에 정의 해야 합니다. - 상위 컴포넌트의 HTML 코드에 정의된 child-component 태그에 v-bind 속성을 정의 해야 합니다. 1. 하위 컴포넌트 작성 (ChildAndChild.vue) 상위 컴포넌트의 send 속성을 하위 컴포넌트에 props로 데이터를..
-
Vue.js - 전역/지역 컴포넌트 개념 및 생성IT/Vue.js 2020. 7. 20. 14:47
1. 컴포넌트(Component)의 개념 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타날 수도 있습니다. Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다. 위와 같이 Vue.js 공식 홈페이지에는 알려주고 있습니다. 저는 이 그림을 보면서 이해하기가 쉬웠습니다. 위 그림과 같이 하나의 화면을 적절하게 분리하여 (화면 또는 기능) 블록화 하며 여기서 하나하나의 블록이 컴포넌트..
-
Vue.js - Spring Restful API 활용하기 [CrossOrigin(cors) 해결]IT/Vue.js 2020. 7. 13. 13:46
Vue.js를 공부하면서, RestAPI를 이용하기 위해서 Spring Boot를 이용하여 Restful API를 활용해보도록 하겠습니다. 프로젝트를 새로 만들어야 하지만, 현재 갖고 있는 웹 프로젝트로 한번 해보도록 하겠습니다. Spring Boot와 통신하면서 CrossOrigin(cors) 오류가 나서 조금 시간이 걸렸는데요. 해결방법도 공유하겠습니다. 구조 : - Vue : localhost:8088 - Spring : localhost:8000 1. Vue.js axios를 통해 Spring 으로 작성된 컨트롤러를 호출하겠습니다. console.log(result)를 통하여 결과 값을 확인하겠습니다. Script 소스를 아래와 같이 작성하였는데, header 부분에 아래와 같이 작성해주세요. g..