kasumil의 코딩 공작소

결론적으로 말하면 되긴하나 안된다. 내 경우 비디오 파일을 읽고 해당 내용의 유니크함을 지키기 위해서 해당 내용을 설정하였다. 그런데, php의 경우 해당 부분을 서버에서 읽어 문제가 되지 않으나, 리액트는 브라우저라 해당 내용이 되지 않았다. 브라우저 메모리 초과로 인해 청크로 쪼갰더니 32자리 글자가 200자가 넘어가더라... const chunkSize = 1024 * 1024; // 1MB 조각 const fileSize = file.size; let offset = 0; let md5Checksum = ''; while (offset < fileSize) { const chunk = file.slice(offset, offset + chunkSize); offset += chunkSize; co..

해당 내용으로 모든 기능을 구현했다. 지도가 좀 문제긴한데, 위치만 알면 되니 문제는 없으리라고 본다. 상용처럼 지도 위치가 바뀌었으면 좋겠지만, 아직 그정도까지는 아니라 아쉽다. 그냥 결과물 홍보.

진짜 엿같은 라이브러리다. 정적은 쉬우나 동적 할당하기가 너무 어려웠다. 쟁점. 1. initialState 설정하기. 2. validationSchema 설정하기. import React, { useEffect, useState } from "react"; import { Card, CardBody, Col, Container,Form, FormFeedback, FormGroup, Input, Label, Row } from "reactstrap"; import * as Yup from "yup"; import { useFormik } from 'formik'; // redux const components = props => { const dispatch = useDispatch(); const [ ..

암호화는 무지하게 쉬웠다. https://jforj.tistory.com/291 [React] 브라우저에서 암호화를 사용할 경우 발생하는 문제점 안녕하세요. J4J입니다. 이번 포스팅은 브라우저에서 암호화를 사용할 경우 발생하는 문제점에 대해 적어보는 시간을 가져보려고 합니다. 들어가기에 앞서... 아래 글에서 사용될 암호화는 대표 jforj.tistory.com 암호화 단계 import cryptoJs from 'crypto-js'; const secretKey = '12345678901234567890123456789012'; // 32자리 비밀키 const iv = 'abcdefghijklmnop'; // 16자리 iv // 암호화 export const encrypt = (text: string)..

리액트에서 고정된 형태의 index.html 만들기. public 폴더 내 index.html을 이용하여, 해당 내용을 원하는 내용으로 커스텀한 후 npm build를 한다. 그러면 매번 넣어주지 않고 해당 내용을 build할때마다 해당 내용으로 작성됨. enact 같은 react framework를 쓰면서 /dist/index.html이 고정된 형태로 나오지 않아 해당 부분을 발견하게 되었다. public/index.html을 생성 한 후 build로 생성된 index.html의 내용을 붙여 넣기한 후 해당 내용에 원하는 내용으로 추가하고 저장해두면 매번 build시 해당 변형된 내용으로 자동 생성된다. react에서 script 라이브러리 호출할때 쓸 수 있다. 야호~

내가 처음 발견했다가, 다른 문제가 있어 안되는 것인가(앞서 포스팅한 404에러 문제 및 포트 이슈가 있어 그거인줄) 알고 시간이 없어 그냥 넘어간건데 동료직원이 해결했다. 우리가 기본적으로 쓰는 BrowserRouter는 tv에서 당연하게 먹히지 않는다. 왜냐하면 linux를 보통 쓰니까 그런데, 그걸 생각하지 못하고 왜 안되냐? 이러고 있었다. 아무튼 공식문서를 찾아본다는 생각은 안하고 있다가 이번 기회를 통해서 다시 공부했다. 분명 브라우저 말고 다른 것도 있을텐데하면서 예전에 한번 쓴 기억은 있는데 너무 오래되어 까먹은 듯... +++ 추가 에뮬레이터에서만 안되는 것 같다. Tv로 배포하는 경우 정상작동을 확인. 사이드 이펙트가 있을 것으로 보고 hash라우터에서 탈출해서 다행인 듯 ++02.28..

마땅한 라이브러리가 없어 해당 라이브러리를 적용하기로 했다. https://github.com/jeremy-carbonne/react-minimap GitHub - jeremy-carbonne/react-minimap: A minimap component for React A minimap component for React. Contribute to jeremy-carbonne/react-minimap development by creating an account on GitHub. github.com npm i react-minimap --force or npm i react-minimap --legacy-peer-deps 위 명령어를 사용하는 이유는 오래되서리... 뒷 옵션은 참조할 것. https..

간단하게 말하자면 이걸로 확정. 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..

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 ..