Frontend/react
-
[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) 다운로..
-
[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를 사용한 예제로 친절하게 데모..
-
[React] How to make custom image icon with .png files.Frontend/react 2020. 10. 16. 12:47
React로 KANA 어드민 웹 페이지 제작을 진행하면서, 최신 이벤트에 대한 리스트를 만들떄 우리에게 맞는 아이콘이 필요했다. material-ui를 적용 하고 있어서 아래 리스트를 기반으로 제작한다. material-ui.com/components/lists/ 리스트에 들어갈 텍스트는 그냥 바꾸면 되는데 아이콘의 경우 맞는게 없기 때문에 커스텀으로 만들어야 했다. 먼저 아이폰을 만들 이미지파일(32x32)을 아래처럼 가져와주자. // constants.js export const ICONS = { AAA: require("../assets/images/icon/AAA.png"), BBB: require("../assets/images/icon/BBB.png"), CCC: require("../asse..
-
[react] react-router 특정 URL로 바로 접근시 '404 페이지를 찾을 수 없습니다.' 에러 해결방법!Frontend/react 2020. 10. 5. 18:52
react-router의 경우 production으로 빌드 배포시 BASE URL이 index.html와 연결된다. 그래서 index.html을 통해 링크를 클릭하여 페이지(URL) 이동을 하면 문제 없이 잘 된다. 그런데 아래와 같이 브라우저에 BASE(/) 이외의 주소로 직접 접근 시 아래와 같이 HTTP 404 ERROR을 맞이하게 된다. http://127.0.0.1/signin 해결방법은 간단하다. nginx.conf를 아래와 같이 수정한다. ... # location / { # # First attempt to serve request as file, then # # as directory, then fall back to displaying a 404. # try_files $uri $uri..
-
[React] react에서 jscrambler로 코드 난독화(obfuscation)Frontend/react 2020. 3. 16. 18:50
php 기반 프레임워크와는 다르게 react에선 javascript 사용이 절대적이다. 그래서 한가지 보안 관련 문제가 생기게 된다. 스크립트 코드를 훤히 다 볼 수 있어서, API KEY 값과 같은 중요 정보도 노출될 염려가 있다. 해결하는 방법을 찾다가 코드 난독화 툴을 알아봤다. 이게 위의 문제를 해결하는 방법이 될 수 있는진 잘 모르겠다. 왜냐하면 아래 소개할 툴로 테스트 중 용량 초과로 내 프로젝트 적용은 실패했기 떄문이다. (무료 버전의 한계...) 사용법을 소개하겠다. 먼저 jascrambler 에 가입 한다. (가입은 회사계정으로 해야한다.) 그리고 메일 인증! 로그인 후, Dashboard에서 새로운 앱을 만들어주자. 클릭해서 들아가서 Protect App 버튼을 누르면 아래 같은 결과를..
-
[React] redux-saga - take, takeEveryFrontend/react 2020. 3. 15. 03:27
현재 프로젝트엔 take로 코드를 작성해서 여기에 takeEvery에 대한 간략한 설명을 남기고자 한다. redux-saga는 미들웨어에서 백그라운드로 실행되어 reducer와 마찬가지로 action을 캐치해 실행된다. - take의 경우 ACTION을 캐치해 함수를 실행시킨다. - takeEvey의 경우 무한하게 take를 실행하는 것으로 while(true)문 안에 take를 실행하는 것이라 생각하면 된다. 소스를 바로 보자 아래 두 코드는 같은 동작을 한다. // take 사용 function* takeFetchActionSaga() { while(true){ const action = yield take('FETCH_ACTION'); const result = yield call(() => fet..