kasumil의 코딩 공작소

리액트 토스티파이 사용중인데, 중복 호출이 되는 문제가 발생했다. 이를 어떻게 막나 고민했는데, 방법이 쉽게 나오나했다. https://fkhadra.github.io/react-toastify/introduction/ React-toastify | React-Toastify Financial Contributors on Open Collective fkhadra.github.io 바로 container에서 limit 1을 넣는 것. 그런데, 이건 그냥 알림을 1개로 제한하는 기능이라. 연속호출시 꺼지면 다시 여러번 호출되는 문제가 발생하더라. 그래서 찾아보니 https://fkhadra.github.io/react-toastify/prevent-duplicate/ Prevent duplicate | R..

간단한 지도 만들기 기능. 대략적인 기능은 chat gpt를 통해 만들었으나 세부 기능은 최신화가 되지 않아서 내가 만들어야 했다. 주소 검색에 따라 주소출력을 구현하여야만 했어 만들었다. import React, { useState } from 'react' import { GoogleMap, useJsApiLoader, MarkerF } from '@react-google-maps/api'; const containerStyle = { width: '100vw', height: '100vh' }; const OPTIONS = { minZoom: 4, maxZoom: 18, } function Map() { const { isLoaded } = useJsApiLoader({ id: 'google-map..

특이하게도 node-sass가 설치도중 버전이 호환되지 않는다면, Error: spawn powershell.exe ENOENT Error: spawn powershell.exe ENOENT npm ERR! code ECONNRESET npm ERR! code ECONNRESET npm ERR! syscall read npm ERR! errno -4077 npm ERR! network read ECONNRESET npm ERR! network This is a problem related to network connectivity. npm ERR! network In most cases you are behind a proxy or have bad network settings. npm ERR! netw..

리액트에서 JS를 쓰다보면, 성능이슈를 종종 겪는다. 원래 배울때 보통 스프레드 연산자를 통해서 새로운 배열을 만들고, 해당 값만 갱신해서 사용하길 권장하는데 이때, 새로운 배열을 만들때 성능이슈가 발생하는 경우를 보았다. 해당 값만 갱신하는 경우 문제가 없는 부분... 정말 짜증나는 부분이었다. 왜 해당 부분만 이슈가 발생하는지는 원리는좀 더 찾아봐야하지 않나 싶다. const [allList, setAllList] = useState([]); inputHandler(e, index)} value={text} /> const inputHandler = async(e, index) => { const inputList = [...allList]; inputList[index] = e; setAllList..

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

웹팩으로 개발하기. 웹팩은 ES5으로 자동 변환 기기이므로 해당 설정하기만하면 너무 쉽다. 그런데, 그만큼 설정이 지랄맞다. 드럽게 어렵다. 그 이유가 문서가 개판. https://webpack.kr/concepts/ Concepts | 웹팩 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr 부가 설명이 불친절하기때문이다. npm install webpack webpack-cli html-loader css-loader style-loader file-loader url-loader dotenv-webpack svgr-webpack --save-dev n..

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

진짜 엿같은 라이브러리다. 정적은 쉬우나 동적 할당하기가 너무 어려웠다. 쟁점. 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 [ ..

userEditHandler(e, "level")} styles={{ control: (styles) => ({ ...styles, backgroundColor: "#eff2f7", opacity: 1, color: "#495057", cursor: 'not-allowed', pointerEvents:"all" }) }} isDisabled={true} /> 참조. https://mingmeng030.tistory.com/267 [React] react-select를 사용해보자 현재 만들고 있는 프로젝트는 가게 직원의 스케줄 및 출근부를 관리하는 웹 페이지이다. 각 가게마다 같은 이름의 직원이 등록될 수 있다고 간주하고 이름과 색상을 함께 조합하여 구분한다. ( mingmeng030.tistory.com..

인터넷에 별그지 같은 자료가 많아서 찾아봤다. 웹팩을 건들라 이런거지같은.... 이 꼬락서니가 발생한 이유가 아마도 레퍼런스가 html에 최적화되어 있어 그런 것 같다. 리액트용이 따로 있다. 하단 페이지 링크 참조. https://tailwindcss.com/docs/guides/create-react-app Install Tailwind CSS with Create React App - Tailwind CSS Setting up Tailwind CSS in a Create React App project. tailwindcss.com 해당 내용을 따라해라.