kasumil의 코딩 공작소

간단하게 말하자면 이걸로 확정. Reactflow라는 걸출한 라이브러리가 있으나 좌표를 줘야하는 문제가 있어서 그냥 검토중에 버렸다. https://reactflow.dev/ React Flow Showcase React Flow is used by thousands of people, from solo open-source developers to companies like Stripe and Typeform. We’ve seen the library used for data processing tools, chatbot builders, machine learning, musical synthesizers, and more. reactflow.dev 해당 라이브러리 type https://bkrem...

// 1. 프로젝트 생성 npx react-native init webviewtest // 2. 라이브러리 설치 yarn add react-native-webview or npm install --save react-native-webview // 3. pod install ios라면 필수 cd ios pod install // 4. android 설정 // android/gradle.properties 파일 내 하단 추가 android.useAndroidX=true android.enableJetifier=true // 5. 리액트네이티브 버전 고정 명령어. npm config set save-exact=true // 이게 기초 세팅. //App.js import React, { useRef } fro..

리액트 네이티브를 react-native-webview로 구현할 일이 있어서 기술검토를 위해 적용했다. 그런데 오류가 발생하는 것이 아닌가? react-native link react-native-webview 위 명령에서는 link가 사라졌기에 작동이 되지 않는 문제가 있었다. 음... 어찌할까 몇시간 고생하면서 찾아봤는데, 정답은 자동으로 autolinking 기능으로 필요 없어진 부분이었다. https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md GitHub - react-native-webview/react-native-webview: React Native Cross-Platfo..

Collapsible Tree라는 그래프 라이브러리 기능 조사. 최소 요구 조건 각 노드에서 부가 설명이 표시되어야 함. 현재 위치 표시 검색 기능 필요 그러다보니 조사를 했는데, php의 기능으로 특정라이브러리를 찾았다. 모든 기능이 충족되는 라이브러리가 FamilyTreeJS인데, 이건 유료 라이브러리... 이거 적용해보았는데, 트리가 넓어지는 게 100개 이상되면 맛이 가더라. 구현은 되는데, 확장 기능등이 작동되지 않음. https://balkan.app/FamilyTreeJS Family Tree JavaScript Component | BALKAN FamilyTreeJS FamilyTree JS is a simple, flexible and highly customizable JavaScrip..

1. npm install -g @enact/cli 2. enact template install @enact/template-webostv 3. enact create -t webostv [directory] https://enactjs.com/docs/tutorials/setup/ https://enactjs.com/docs/tutorials/setup/ Enact provides a handy command-line tool (the Enact CLI) that makes it easy to get started. Before the Enact framework can function on your computer, it is necessary to install some software. The ..

리눅스 세팅 방법 https://webostv.developer.lge.com/develop/tools/cli-installation 1. 웹페이지에서 tgz 파일 다운로드 2. echo $LG_WEBOS_TV_SDK_HOME 해당 값이 없다면 3. mkdir webOS_TV_SDK로 폴더 생성. 4. 다운로드 파일 rz로 업로드 진행.(vim의 경우) 5. tar -xvzf 다운로드파일.tgz -압축해제 진행. 6. 해당 폴더를 webOS_TV_SDK/CLI로 이동. 7. pwd로 해당 위치 파악. 8. cd /etc/ 9. sudo vi profile 10. 아래 내용 추가 # Setting the LG_WEBOS_TV_SDK_HOME variable to the parent directory of ..

기본적 폴더 구조 /home/user/tool/ ├── webOS_TV_SDK │ ├── CLI │ │ ├── bin │ │ └── ... │ ├── Simulator │ │ ├── webOS_TV_22_Simulator_1.0.0 │ │ │ ├── webOS_TV_22_Simulator_1.0.0.appimage │ │ │ └── ... https://webostv.developer.lge.com/develop/tools/cli-installation CLI Installation Check the library, API, and other reference information provided by the webOS TV platform. webostv.developer.lge.com 1. CLI 설..

HTML JS let decimalType = 1; function isNumberKey(evt) { let charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode 57)) return true; // Textbox value let _value = event.srcElement.value; // 소수점(.)이 두번 이상 나오지 못하게 if(decimalType == '특정타입') { // 특정 타입의 경우 아예 입력 못하게 막기 if (charCode == 46) { return false; } } else { let _pattern0 = /^\..

해당부분으로 입력시 영어와 숫자만 입력되고 나머진 입력이 애초에 되지 않는다. 숫자와 점만 입력하게 하기 숫자만 입력하게 하기. 이상 끝.

const ctx = document.getElementById('lineGraph').getContext('2d'); let gradient = ctx.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(25, 224, 167, 1)'); gradient.addColorStop(1, 'rgba(25, 224, 167, 0)'); const lineData = { labels: [1, 2, 3, 4, 5, 6, 7], datasets: [ { label: 'table', data: [0, 22, 45, 67, 77, 88, 100], backgroundColor : gradient, fill: true, borderColor : "#19..