kasumil의 코딩 공작소

회사에서 외주로 준 코드에서 문제가 발생하였다. 원인이 무엇인고하고 봤더니, 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 라이브러리 호출할때 쓸 수 있다. 야호~

로컬에서는 문제가 없는데, 배포 후 문제가 발생하는 게 생겼다. 404 not found 원인은 SPA 구조 문제. SPA 특징이 특정 페이지로 바로 못가다보니, index 페이지를 거쳐 지나가게 만들었다. 배포한 프로젝트 디렉토리 위치에 aws apache2가 읽도록 .htaccess파일을 만들고 아래 내용을 넣는다. Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L] /etc/apache2/site-available에서 해당 도메인 .conf에 아래와 같이 AllOverride를 All로 수정한다. Directory "/var/www/html"> ... AllowO..

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