본문 바로가기
728x90
반응형

Javascript23

Canvas Bubble Effect 기록(react + typescript) Mouse Bubble Effect Code 기록 import React, {useEffect, useRef} from 'react'; interface BubbleMouseType { x?: number, y?: number, radius: number } export default function Bubble(){ const canvasRef = useRef(null); const mouse: BubbleMouseType = { x: undefined, y: undefined, radius: 150 } let particlesArray: any = []; let adjustX = 0; let adjustY = 0; useEffect(() => { const canvas = canvasRef?.curr.. 2022. 12. 7.
Canvas Crash Effect 기록(react + typescript) Mouse Crash Effect Code 기록 import React, {useEffect, useRef} from 'react'; interface mouseType { x?: number, y?: number } export default function Crash(){ const canvasRef = useRef(null); const mouse: mouseType = { x: undefined, y: undefined } const particlesArray: any = []; let hue:number = 0; useEffect(() => { const canvas = canvasRef?.current; if (canvas) { let ctx = canvas.getContext('2d'); c.. 2022. 12. 7.
React Native WebView postMessage로 네이티브, 웹 데이터 전달 React Native npm install react-native-webview import React, { useRef } from "react"; import {WebView} from 'react-native-webview'; import { Button, SafeAreaView } from "react-native"; const App = () => { const url = "URL" let webRef = useRef(null); /** 웹뷰 ref */ const handleSetRef = _ref => { webRef = _ref; }; /* native -> web */ const native_to_web = () => { console.log(webRef.postMessage("전송 데.. 2022. 3. 29.
[JS] URL 접속 QR code 만들기 - 작업은 Vue js로 함 - Google Chart API 사용 생성 2021. 11. 30.
[Vue js] dom drag move 돔 드래그로 이동시키기 jquery ui draggable 쓰려했는데 안먹히길래 딴거찾음 v-movable 설치 npm i v-movable Dom ... posTop : style.top posLeft : style.Left 2021. 11. 11.
[Vue js] 카카오 맵 api 로 현재위치 마커찍는 코드 https://developers.kakao.com Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 1. Kakao Developers에서 선행작업 내 애플리케이션 생성 플랫폼 - Web - 사이트 도메인등록(http://localhost 가능) 요약 정보 - Java Script 키 복사 2. FrontEnd Component 3. TEST 2021. 11. 10.
728x90
반응형