kasumil의 코딩 공작소

간단한 지도 만들기 기능. 대략적인 기능은 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..

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

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

회사에서 외주로 준 코드에서 문제가 발생하였다. 원인이 무엇인고하고 봤더니, userip를 가져오는 부분이 있는데 해당 부분에서 에러가 발생하였다. 원인은 user ip 주소를 가져오는 방식에 유료라이브러리를 사용하였는데, 해당 사용시 갯수 제한에 걸린 것. https://ipapi.co/json { "error": true, "reason": "RateLimited", "message": "Visit https://ipapi.co/ratelimited/ for details" } 제한이 걸려있으면 진짜 이렇게 온다. https://ipapi.co/json/token 이렇게 구별하는 것 같은데, 무료일 경우 token이 필요없다. 찾아보니 무료인지는 모르는 것 1개와 https://geolocation-..

https://www.npmjs.com/package/react-iframe-form react-iframe-form React iFrame Form. Latest version: 1.0.4, last published: 4 years ago. Start using react-iframe-form in your project by running `npm i react-iframe-form`. There is 1 other project in the npm registry using react-iframe-form. www.npmjs.com 리액트에서 iframe을 쓰는 것은 어렵지 않다. 그런데, POST나 GET을 같이 전송하기는 굉장히 어려워진다. 왜냐하면 Form태그를 이용하여 submit을 구현하..

원인은 간단하다. 보통 map 함수로 레이아웃 컴포넌트로 생성된 여러개의 해당 함수를 호출하는데, 이때 특정 event을 하는 함수가 내장되어 있다면 개발자가 보기엔 1개지만, map함수로 호출된 갯수만큼 동일한 이름의 함수가 생성된다. 그러므로 해당 event를 일으키는 것을 외부로 꺼내서 호출하는 방식으로 사용하면 한번만 사용하게 된다. counter 내 increase, decrease 함수가 있다면 map으로 30개를 counter를 복제했을 경우, increase 호출 시 30번 호출하게 되는 것. 그래서 이를 바깥으로 꺼내 counter에서 호출해서 사용하는 방법을 사용하면, 해당 이슈가 해결된다.

보통 자식창에서 작동하는건 iframe태그 안에서 호출하는데, 도메인이 다른 사이트에서 부모창의 이벤트를 관리해줘야 하는 부분이 생겼다. 팝업 자식창을 호출하는데 있어 흔하게 사용하는 window.open(url, '이름', '옵션); 을 사용했다. 해당하는 자식창에 부모함수를 호출을 어떻게 하나 했는데, 아주 좋은 글이 있어서 해당 글을 참조했다. window.opener는 맞는데, 그 이후 window.opener.document 등등 적혀있어 죄다 작동이 안된다. cors 오류 뿜뿜... CORS 문제로 인해서 아래의 링크를 참조. // 자식창에서 코드 인입. window.opener.postMessage({code:'event'}, 'domain주소'); // 난 1번라인의 코드로 수정해서 사용했..

암호화는 무지하게 쉬웠다. 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 라이브러리 호출할때 쓸 수 있다. 야호~