Frontend
-
[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 ..
-
[Scriptable] MacOS Widget - Coin chartFrontend 2021. 8. 30. 16:58
맥북에서 코인스탁 이라는 어플리케이션을 유용하게 쓰고 있다. 상단 바에서 한번에 현재 가격을 볼 수 있다. 그리고 관심 코인을 등록하면 손쉽고 편리하게 최신 정보를 확인 할 수 있다. 그런데 코인스탁은 알림 기능이 없다, 그리고 클릭을 해야만이 현재 차트를 볼 수 있다. 나는 클릭하는 과정 없이 현재 차트 흐름을 확인 하고 싶고, 더불어 알림 기능도 있으면 좋겠다는 생각이 들어, 위젯 제작 방법을 알아봤다. 크게 방법은 두 가지로 나뉜다. 1. swift(xcode)를 이용한 개발. 2. scriptable을 이용한 개발. 나의 경우는 swift를 사용 할 일이 없어서 간단하게 튜토리얼을 진행하면서 리스트 기능을 가진 앱을 개발했다. 위젯 기능을 만들려면 widget extension 추가를 해서 하면 ..
-
[Android] How to get image file from assets & set bitmap to canvas.Frontend/android 2021. 2. 5. 16:22
Bitmap assetsRead(String file) { InputStream is; Bitmap bitmap = Bitmap.createBitmap(previewWidth, previewHeight, Config.ARGB_8888); try { is = getAssets().open(file); int size = is.available(); byte[] buffer = new byte[size]; is.read(buffer); is.close(); bitmap = BitmapFactory.decodeByteArray( buffer, 0, buffer.length ) ; bitmap = Bitmap.createScaledBitmap(bitmap, 720, 720, false); } catch (IOE..
-
[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..
-
[React] How to make responsive components according to the screen size.(리엑트 화면 사이즈에 따른 반응형 컴포넌트 만들기)Frontend/react 2020. 10. 16. 15:55
요즘 반응형 웹 페이지 제작은 필수이다. 리엑트로도 당연히 가능하다. 현재 페이지의 대부분을 material-ui의 Grid를 사용해서 레이아웃을 관리한다. 그런데 브라우저 창 크기의 변화에 따라 direction을 row에서 column으로 변경하고 싶은데 Grid에서 그런 기능을 해주는 부분은 찾지 못했다. (결론부터 보고 싶으면 스크롤을 좀 내리길.) 일단 구글링,, 이곳저곳 찾아봤다. 'flex' 'flex-direction' 과 같은 키워드로 많은 글들이 보이는데, 거의 레이아웃에 대한 기본적인 설명이었다. 그러다 w3schools.com에서 한가지를 발견했다. www.w3schools.com/cssref/css3_pr_flex-direction.asp @media를 사용한 예제로 친절하게 데모..