react
-
[nestjs/react] nestia로 sdk package 생성 해서 리엑트에서 사용하기(feat. github npm registry)Backend/NestJS 2023. 12. 21. 19:45
기전 nestjs 프로젝트를 nestia 환경으로 마이그레이션 중이다. nestia는 참 편리한게 많은데. 그 중 대박적인게 명령어 하나로 sdk를 생성 할 수 있는 것이다. 그래서 기존 프로젝트에 nestia를 설치한 후 그 구조에 맞게 변경을 시켰다. 그런 뒤, 리엑트에서 sdk를 다운 받아서, 백엔드에 요청하는 것을 하고자 한다. 일단 nestia 코드를 작성하는 것은 생략한다. 아래 링크로 대체하겠다. 참고로 samchon 이분이 개발했다. https://github.com/samchon/nestia-template GitHub - samchon/nestia-template: Nestia template project installed by "npx nestia start" Nestia templ..
-
hls를 위한 cloudfront + signed cookie + lambda@edgeInfra 2023. 11. 13. 17:39
이 글을 쓰는 목적? hls를 처음 접하고 구현하는데 삽질을 많이 해서, 다른 이들은 그 과정을 거치지 않게 하고 함이다. 해당글을 참고해서 진행을 했는데,,, 빠진 부분이 있어서, 고생을 좀 했다. 초보자들도 그냥 설정을 따라서 그대로 세팅하면 되도록 작성하겠다. 영상 컨텐츠 서비스를 hls로 운영하기 위한 작업을 했다. hls란? Http Live Streaming 기존 서비스는 영상을 재생 하려면 .mp4 파일을 통으로 다운로드해서 재생을 했다면, hls를 적용시키면 영상 파일을 1~2분 단위로 .ts 확장자로 쪼개어 저장하고, .m3u8에 메타데이터를 기록해서, 순차적으로 다운로드 받으면서 재생된다. 실시간 서비스에 주로 이용된다. 지금 당장 실시간 서비스를 하려는게 목적은 아니다. 보안 차원에서..
-
[javascript] 특수 문자 앞에 역슬러시 넣기Programing/javascript 2021. 11. 19. 11:35
간혹, url을 통해 이미지 파일에 접근해야 할 경우, 파일이름에 특수문자가 들어가서 코드상에서 호출이 안될때가 있다. 그럴땐 아래와 같이 정규표현식으로 같단하게 해결 할 수 있다. url = "localhost:3000/temp/abc(123-2).jpg"; data.replace(/[!@#$%^&*()+=\-[\]\\';,./{}|":?~_]/g, "\\$&"); data.replace(" ", "%20"); // 공백 대체
-
[React] list for map visualization data chart in ReactFrontend/react 2021. 11. 5. 18:06
나의 결론부터 보고 싶으면 22번으로 가면 된다. 1. 한국인이 만든 라이브러리 https://www.npmjs.com/package/react-korea-map-visualization react-korea-map-visualization 한국 지도 데이터 시각화를 위한 리액트 라이브러리 (개발 테스트) www.npmjs.com 한국 맵용 시각화 라이브러리다. topoJSON을 사용한다. 검색 하자마자 바로 나와서 쉽게 만들 수 있겠다는 생각으로 프로젝트를 다운 받아서 필요한 코드들을 복붙해서 만드니. 속도가 너무 느려 터져서.. 사용할 수 없겠더라. 하지만, 라이브러리에 있는 한국 topoJSON 파일이 추후 사용됐다.. 아주 감사.. 없었으면 성공 못했다. 2.대한민국 최신 행정구역(SHP) 다운로..
-
[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 ..
-
[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..
-
[react][solved] saga-redux, Uncaught ReferenceError: regeneratorRuntime is not definedFrontend/react 2020. 10. 28. 11:16
기존 프로젝트에 redux를 적용시키는 과정에서 아래와 같은 에러가 발생했다. Uncaught ReferenceError: regeneratorRuntime is not defined at Module. (app~._src_store_i.568f4add7f19dcb3b32e.js:1453) at Module../src/store/sagas.js (app~._src_store_i.568f4add7f19dcb3b32e.js:1621) at __webpack_require__ (bootstrap:853) at fn (bootstrap:150) at Module. (bootstrap:993) at Module../src/store/index.js (app~._src_store_i.568f4add7f19dcb3b..