프로그래밍 회고록/Javascript & FrontFramework (4) 썸네일형 리스트형 Nuxt.js & Vue.js 에서 비동기 활용 EventBus Emit후 CallBack 받기 개요 흐름 구현 실행 개요 Vue.js 에서는 Vuex와 같은 상태관리 라이브러리를 활용하지 않는다면, 컴포넌트 계층간 데이터를 주고받는 대표적인 방법은 부모 컴포넌트와 자식 컴포넌트 간의 Props와 Emit 으로의 데이터 통신이다. 부모, 자식간에만 데이터 교환이 아닌 서로 관계가 독립적이거나 형제관계인 컴포넌트간 데이터를 주고받는 방법은 2.0에서는 $emit과 $on을 활용해서 데이터 교환을 하는 EventBus가 존재한다. 데이터를 보낼 발신자 컴포넌트 측에서 $emit을 활용해 보낼 event명과 데이터를 보낸다. 데이터를 받을 수신자 컴포넌트 측에서 $on을 활용해 받은 데이터를 어떻게 처리할지 작성한다. 다음과 같은 순서로 EventBus는 동작한다. 그런데, 수신자 컴포넌트에서 비동기적으.. Picture-in-Picture API 활용해 Youtube같은 멋진 pip모드 제공하기 Picture-in-Picture 란? 주로 동영상 재생 서비스를 제공하는 플랫폼 웹사이트를 들어가면 다음과 같은pip모드를 제공하는 것을 본 적있을것이다 pip모드란 "웹사이트가 윈도우 응용프로그램 처럼 브라우저에서 독립적으로 GUI화면 위에 표현된 화면을 제공하는 기능" 을 말하는데 그렇게 함으로써 사용자는 미디어를 소비하면서 웹사이트의 다른 사이트나 아니면 다른 응용프로그램과 상호작용하여 활동할 수 있게 되는 편리한 기능이다. WebAPI중 하나인 Picture-in-Picture API 다음 사진은 Mozilla Developer 사이트에서 볼 수 있는 Javascript에 구현되어 있는 WebApi들에 대한 사진이다. Pip모드 역시 WebApi중 하나이고 따라서 고맙게도 개발자가 실제로 PIP.. [ReactNative] Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider 에러 해결 #서론 리액트 네이티브 프로젝트를 설치한 후 UI를 만들때 라이브러리의 도움을 받기 위해서 react-native-elements를 활용하던 와중 Docs에 써있는 Header부분을 참고해 넣으려고 할 때 저 오류가 발생했고 그 것을 해결하기 위해 깃허브 커뮤니티를 활용했고 그에 따른 방법론을 서술해 놓으려 한다. #본론 원인 npm install react-native-safe-area-context 해당 부분을 설치한 후 어플리케이션을 새로고침하자 저 오류가 떴다. 아래의 출처를 참고하니 RNCSafeAreaProvider 라는 디펜던시가 2개 설치되어 있기에 해당 오류가 발생했다고 결론지었다. 나는 리액트네이티브 앱을 Expo를 활용해서 프로젝트를 만들었고 react-native-safe-area-.. Java(Spring)와 JavaScript(vue.js)로 서버단 Mp3파일 클라이언트로 보내 재생하기 - 2.JavaScript # 앞선 글 Java(Spring)와 JavaScript(vue.js)로 서버단 Mp3파일 클라이언트로 보내 재생하기 - 1.Java https://meotlog.tistory.com/40 Java(Spring)와 JavaScript(vue.js)로 서버단 Mp3파일 클라이언트로 보내 재생하기 - 1.Java # 서론 브라우저에서 곧바로 내 로컬 파일에 있는 Mp3를 재생시키는 기능을 구현하려고 하니 Chrome에서는 정책상 불가능했다. 방법에 대해 고민하다 지인에게 파일을 서버단에서 읽어 클라이언 meotlog.tistory.com #본론 구현하는 흐름은 다음과 같다. 첫째, 자바(서버)에서 파일을 읽어들인다. 둘째, 해당 파일을 통신가능하게 인코딩한다. 셋째, 클라이언트에서 해당 파일을 받는다. 넷째.. 이전 1 다음
