kasumil의 코딩 공작소

https://www.framer.com/motion/ Documentation | Framer for DevelopersAn open source, production-ready motion library for React on the web.www.framer.com 설치방법npm install framer-motion 사용방법그냥 html을 사용하는 방법과 같습니다. motion.(element)로 사용합니다.import { motion } from "framer-motion"export const MyComponent = () => ( )initial - 초기값,animatie - 행동값Transition - 사용시간 해당 내용으로 적용됩니다. 공식문서에도 적혀있듯이 여러 내용이 있지만, 중요한..

나는 이전에 기본 내용을 이미 책으로 배운 상태였는데, 실무에서 사용하지 않는 회사에서 재직하다보니타입스크립트에 대한 내용을 어설프게 알고 있었다. 이직 & 나의 성장을 위해서 알긴해야하니, 어떻게 해야하나 싶었는데이 강의 보고 확실하게 이해함. https://youtu.be/V9XLst8UEtk?si=gH9Tqi-Fcrsp5qiQ 제네릭에 대한 내용이 타입스크립트에선 가장 어렵다이부분이 왜 어렵냐하면 타입추론이 적용되기때문에.타입스크립트가 처음 나왔을때, 나도 적용하고 싶었지만 회사에서 해당 내용을 쓰지 않았고 타입스크립트에 대한 알려주는 사람이 없었기도하고 무엇보다 유튜브 내 강의들이 영어.그리고 국내 서적들 대부분이 그냥 엄청 어렵게 적어놨었다.초보자가 보는 책에 삼각함수 적용하는 것을 왜 적어두는..

결론적으로 말하면 되긴하나 안된다. 내 경우 비디오 파일을 읽고 해당 내용의 유니크함을 지키기 위해서 해당 내용을 설정하였다. 그런데, 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...