목록개발일지 (16)

yyZa

The play() request was interrupted by a call to pause() 이틀간의 삽질

🥑오디오 재생 타임라인 만들기내 프로젝트는 오디오 url을 가져다가 타임라인을 만들고 그 안에 오디오의 속성값이 담김 div를 추가하는 작업을 하였다.div를 추가하고 속성값을 불러와서 재생하는건 어렵지 않았지만 pause / seek / stop 의 과정에서 pause후 currentTime을 설정하는 부분에서 설정 후 재생 시  "The play() request was interrupted by a call to pause()." 이 에러가 자꾸 떳다. 직변하자면 pause의 마무리 전에 paly를 실행한다는 것인데 ... 난 그러지 않았다 !  🥑트러블 슈팅1. 프로미스를 사용한 play, pause 제어처음에는 크롬의 개발자 포럼에 있는 방법으로 제어를 해보았다.모범적인 방법이었지만 ... ..
개발일지 2024. 8. 26. 14:35
RecordRTC로 Canvas 애니메이션 녹화하기(feat. 오류많음)

🥑RecordRTC라이브러리 설치https://github.com/muaz-khan/RecordRTC GitHub - muaz-khan/RecordRTC: RecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It suRecordRTC is WebRTC JavaScript library for audio/video as well as screen activity recording. It supports Chrome, Firefox, Opera, Android, and Microsoft Edge. Platforms: Linux, Mac and Windows. - mu...github.comnp..
개발일지 2024. 5. 22. 11:03
Pixi.js 7.2.0버전 업데이트 Vue3에서 진행하기(with Pinia)

🥑Pixi.js 7.2.0버전 업데이트 Vue3에서 진행하기(with Pinia) 자 업데이트 하자마자 처음부터 에러 드가자~ !!Cannot find propagation path to disconnected target on destroyed sprite!! 업데이트 후 sprite객체에 클릭이벤트인 eventmode를 static으로 설정 하면 이러한 에러를 뱉는다. 이유가 뭘까 ? - 나는 한 이틀을 찾아 헤메고 고생했지만 이유는 간단하다. Pinia에 sprite나 app, container를 state에 저장 시킬 때 proxy객체로 변모되어 저장되므로 사용할 수 없었다는 거다 ... 참 단순한 ㅠ 해결방법!? - pinia없이 전역변수 설정을 뭘로해주나 ~~ 하다가 그냥 main.js에 pr..
개발일지 2023. 12. 11. 16:53
RestAPI사용해서 vue3에서 카카오 로그인 구현 (프론트)

🥑카카오 로그인 CDN 설정 카카오 로그인 설정 시 바닐라javascript로 적용할 때는 index.html에 CDN을 설정해줘야 하지만 RestAPI 서버통신으로 설정 시에는 굳이 CDN설정을 하지 않아도 된다. 이유는 서버 쪽에서 토큰요청이나 사용자정보요청등을 다 처리하기 때문인데 현재 CDN을 설정하는 이유는 토큰을 글로벌로 설정하고 사용할 수 있게 하기 위함이다. 🥑서버와 axios로 통신하기 리다이렉트 페이지는 미리 생성해서 라우팅 해놓고 해당 URI를 카카오 개발자 계정에 등록해 놓으면 에러 없이 넘어간다. axios.get(`/YOUE-API-URL/`).then((res) => { //서버로 요청을 보내면 //"https://kauth.kakao.com/oauth/authorize?res..
개발일지 2023. 8. 1. 09:29
tui-editor vite 배포 시 Error로 고생한 후기 ...

🥑vue3 + vite 로 구성된 프로젝트에서 error... 끄아 ... 알 수 없었던 에러가 주르르륵 ... toast-ui를 import할 때의 에러 같은데 검색해보니 종속성이 잘못되어 우회하는 스크립트를 vite.congfig에 작성하라고 한다 그래서 바로 적용해보았다 ! build: { rollupOptions: { external: ['@toast-ui/editor', '@toast-ui/editor/dist/toastui-editor.css'], }, }, 이렇게 적용 후 재배포하니 배포가 아주 깔끔히 잘되었다! 그래서 배포한 사이트에 들어가 보았더니 ... Failed to resolve module specifier "@toast-ui/editor". Relative references ..
개발일지 2023. 7. 17. 09:07
tui-editor (TOAST UI Editor) vue3 <script setup> 적용법

🥑tui-editor 라이브러리 설치 https://github.com/nhn/tui.editor GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. - GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. github.com npm install --save @toast-ui/vue-editor 🥑 Vue3 프로젝트에 tui-editor구성하기 import Edit..
개발일지 2023. 7. 13. 15:15
PIXI.js 사용기 (7) canvas에 pixi-viewport 적용하기.

🥑pixi-viewport 라이브러리 설치 https://github.com/davidfig/pixi-viewport // npm npm i pixi-viewport // yarn yarn add pixi-viewport 🥑 Vue3 프로젝트에 pixi-viewport 구성하기 import { Viewport } from 'pixi-viewport' 🥑1. pixi-viewport사용 이유 - Canvas 전체를 wheel, Grab등의 Event로 Zoon in/out , Canvas 움직임을 주기 위해 사용하였습니다. 🥑2. pixi-viewport적용 방법 new Viewport로 생성 {}안에 설정 옵션 부여 기존 pixi의 Container로 생성하던 Stage를 Viewport로 대체한 후 이..
개발일지 2023. 3. 30. 16:48
PIXI.js 사용기 (6) PIXI.Graphics 그리기 효과 만들기

적용한 에디터와 기능들 🥑1. PIXI.Graphics 사용 이유 - 그림판처럼 그리고 지울 수 있는 기능을 구현하기 위해 사용하였습니다. 🥑2. PIXI.Graphics 적용 방법 new PIXI.Graphics()로 생성 색, 굵기, 위치 등 설정 옵션 부여 Cnavas Stage 임의의 Container(Graphics 조각들을 모아 놓는) 추가 strokeContainer에 mouse event에 따른 Graphics생성 및 x,y값을 설정하여 추가해 그리기 event가 끝나면 strokeContainer에 있는 것을 캡쳐하여 renderTexture에 그린 후 renderTexture를 Canvas Stage에 추가 const strokeContainer = new PIXI.Container()..
개발일지 2023. 3. 28. 16:20
이전 Prev 1 2 Next 다음