JavaScript
-
[node] How to limit the HTTP request size and upload file size?Backend 2022. 6. 30. 15:29
디얼핏홈 관리자페이지에서 생활습관 개선 프로그램을 일자별로 설정한다. 거의 2년을 하다보니 일수가 797일차까지 되었는데, 자꾸 7월6일부터 추가가 안되고 서버에서 API 동작시 실행되는 로그도 안찍히고 500에러가 났다. 이유를 분석하니, 서버에서 배열 인풋값을 받을때 용량이 초과되어서였다. 그래서 아래와 같이 용량을 늘려줬다. solution: index.ts import bodyParser from "body-parser"; app.use(bodyParser.json({limit: "50mb"})); app.use(bodyParser.urlencoded({limit: "50mb", extended: true}));
-
[javascript] 특수 문자 앞에 역슬러시 넣기Programing/javascript 2021. 11. 19. 11:35
간혹, url을 통해 이미지 파일에 접근해야 할 경우, 파일이름에 특수문자가 들어가서 코드상에서 호출이 안될때가 있다. 그럴땐 아래와 같이 정규표현식으로 같단하게 해결 할 수 있다. url = "localhost:3000/temp/abc(123-2).jpg"; data.replace(/[!@#$%^&*()+=\-[\]\\';,./{}|":?~_]/g, "\\$&"); data.replace(" ", "%20"); // 공백 대체
-
[CORS] react & flask - Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when ..Frontend 2021. 11. 2. 15:03
최근 ReactJS로 웹 페이지를 만들고있다. 이 웹 페이지는 파일을 업로드하는 기능이 있는데, 업로드 과정에서 CORS 에러가 발생됐다. React는 localhost:3000을 사용하고 flask는 localhost:8080 포트를 사용한다. 굳이 node.js를 사용하지 않고 flask를 사용한 이유는, AI 모델과 연동이 되기 때문에 python 기반의 서버로 구축하는 것이고 django에 비해 구축이 가벼워서 채택했다. [문제 발생] react(localhost:3000) post-> flask(localhost:8080) Access to XMLHttpRequest at 'http://localhost:8080/test' from origin 'http://localhost:3000' has ..
-
[Scriptable] MacOS Widget - Coin chartFrontend 2021. 8. 30. 16:58
맥북에서 코인스탁 이라는 어플리케이션을 유용하게 쓰고 있다. 상단 바에서 한번에 현재 가격을 볼 수 있다. 그리고 관심 코인을 등록하면 손쉽고 편리하게 최신 정보를 확인 할 수 있다. 그런데 코인스탁은 알림 기능이 없다, 그리고 클릭을 해야만이 현재 차트를 볼 수 있다. 나는 클릭하는 과정 없이 현재 차트 흐름을 확인 하고 싶고, 더불어 알림 기능도 있으면 좋겠다는 생각이 들어, 위젯 제작 방법을 알아봤다. 크게 방법은 두 가지로 나뉜다. 1. swift(xcode)를 이용한 개발. 2. scriptable을 이용한 개발. 나의 경우는 swift를 사용 할 일이 없어서 간단하게 튜토리얼을 진행하면서 리스트 기능을 가진 앱을 개발했다. 위젯 기능을 만들려면 widget extension 추가를 해서 하면 ..
-
[React] canvas ref로 DOM 접근 관련 짧은 설명.Frontend/react 2020. 11. 10. 12:40
React는 기존 html&javascript에서 주로 사용 했던 ElementById()와 같은 DOM에 직접적으로 접근하는 방법을 ref를 이용해서 한다. canvas 역시 객체를 랜더링 하려면 DOM에 접근을 해야한다. 그래서 아래와 같이 사용하면 된다. ... const objCanvas = this.m_objCanvas; if (objCanvas === null) { return; } // canvas 접근 const wScreen = objCanvas.clientWidth; const hScreen = objCanvas.clientHeight; const ctx = objCanvas.getContext('2d'); ... {this.m_objCanvas = ref} } style={styleP..
-
table row search function 만들기Programing/javascript 2020. 9. 11. 09:19
React로 웹 페이지를 만드는데 테이블 검색 기능이 필요했다. 구글에 좀 찾아보니 아예 검색 기능이 제공되는 테이블을 쓰는게 편해보여서 바꾸니까,, 커스텀 해야하는 것들이 성가셔서 직접 만들기로 결정했다. 테이블이 아래와 같을 경우 검색을 한다면, 이메일과 이름 컬럼을 필터링 해야한다. 검색 필터 주요 부분이다. input은 검색 TextField의 값이고 d는 사용자 정보 객체를 담은 배열이다. d = [{id=1, email:'test@test.com', name: '테스터'}, {id=3, email:'test1@test.com', name: '테스터1'}] const filtered = data.filter( d => d.email.indexOf(input) != -1 || d.name.inde..
-
[javascript] date time difference, 날짜 시간 비교 함수Programing/javascript 2020. 9. 9. 09:42
- 시간 절대값 비교(날짜 무시) const HOUR_TO_SEC = 3600; const MINUTE_TO_SEC = 60; const timeDiff = (_date1: any, _date2: any) => { const diff = moment.utc(moment(_date1, "YYYY-MM-DD HH:mm:ss").diff(moment(_date2, "YYYY-MM-DD HH:mm:ss"))).format("HH:mm:ss"); const hour_to_second = parseInt(diff.substring(0, 2)) * HOUR_TO_SEC; const minute_to_second = parseInt(diff.substring(3, 5)) * MINUTE_TO_SEC; const sec..
-
[IOS] How to in app purchase verify receipt with Node.js (javascript). error status: 21002Backend/NodeJS 2020. 4. 21. 14:58
IOS 인앱 결제 구독 영수증 검증 모듈을 작업했다. 테스트용 sandbox에 http 요청을 보냈는데, 아래와 같은 에러 상태가 리턴 됐다. status: 21002 receipt 값과 password 값엔 이상이 분명 없는데 뭔가 이상했다. 아래와 똑같이 코드를 작성하면 해결된다. const verifySubsIOS = async (transactionReceipt) => { const verifyURL = `https://sandbox.itunes.apple.com/verifyReceipt`; // use 'https://buy.itunes.apple.com/verifyReceipt' for production const options = { uri: verifyURL, method: `POST`,..