Frontend
-
[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..
-
[React] How to stop refresh when submit formFrontend/maskeyes 2020. 3. 15. 03:11
리엑트에서 form을 submit 했을때 페이지 재실행 되지 않고 비동기 작업을 하는 방법. 먼저 나는 웹 개발 경험이 그렇게 많지 않다. 그래서 필요에 의해 한번씩 개발을 하게 될때면, 검색을 최대한 활용한다. 주소 검색 기능이 필요해서 작업 했던 과정(삽질?)을 남기고자한다. 아래는 bootstrap을 이용해서 Navigation에 Form을 가져왔다. 이동 여기서 시작이다. 이동 버튼을 누르면 submit 이벤트가 발생해 serachAddress 함수가 실행된다. searchAddress는 아래와 같이, 실행되면 input의 값을 dispatch 함수로 넘겨준다. searchAddress: (e) => { dispatch(mutations.searchAddress(e.target['inputAddr..
-
마스크 아이즈 - 공적 마스크 재고 확인 웹 서비스 개발 일지Frontend/maskeyes 2020. 3. 13. 20:49
React로 미니 프로젝트를 며칠째 진행중이다. (앞으로 더 할지 말지는..) 정부가 공적 마스크 재고 확인 API를 공개한다는 소식을 뒤늦게 접하면서, 갑작스레 시작하게 되었다. 아래 이미지는 현재 진행 상태이다. 짧은 시간 정말 많이 삽질을 했다. React의 개념도 제대로 잡혀있지 않은 상태로 무작정 시작 했으니 말이다.. 보일러플레이트도 몇번 갈아치운지 모르겠다. 맨처름 React-stater-kit 으로 진행했는데 url로 진입시 지도 로딩되는 시간과의 동기 문제인지 계속 에러가 나서 해결하려고 했지만 실패했다. (navigation을 통해 link로 들어가면 잘됐지만 원하지 않았다.) 그래서 react-naver-maps의 예제소스를 기초로 개발을 다시 시작했다. 여기서부턴 거의 정석 Reac..
-
[react][javascript] gps 위치 얻기 위도 경도 latitude/longitudeFrontend/react 2020. 3. 9. 18:49
아래는 위도와 경도를 가져오는 함수이다. Get the gps location. function getLocation() { if (navigator.geolocation) { // GPS를 지원하면 navigator.geolocation.getCurrentPosition(function(position) { alert(position.coords.latitude + ' ' + position.coords.longitude); }, function(error) { console.error(error); }, { enableHighAccuracy: false, maximumAge: 0, timeout: Infinity }); } else { alert('GPS를 지원하지 않습니다'); } } getLoca..
-
[react] react-starter-kit에 bootstrap 적용 시키기.Frontend/react 2020. 3. 9. 02:34
react 개발을 react-starter-kit boilerplate로 한다. 웹 UI를 bootstrap을 적용시켜서 만들려는데, bootstrap 홈페이지에서 제안하는 방법으로는 적용이 되질 않는다. react-starter-kit의 구조에 맞게 적용을 시켜야한다. 먼저 bootstrap을 설치한다. npm install --save react-bootstrap bootstrap 아래와 같은 방법으로 사용을 하면 제대로 적용이 되지 않는다. {/* The following line can be included in your src/index.js or App.js file*/} import 'bootstrap/dist/css/bootstrap.min.css'; import Button from 'r..
-
How to fix the ERROR that 'net::ERR_CONNECTION_REFUSED' on Node.js?Frontend/react 2020. 2. 5. 18:28
환경 Platform: React URL: http://localhost:3000 API PATH : http://localhost:3000/api/... used HTTP Request Module : Axios 문제 리엑트 프로젝트에서 프론트 단에서 백엔드 단으로 REST API를 요청 하는 부분이 있다. 이때 서버 포트가 3000이라, 요청 주소를 'http://localhost:3000'으로 하고 로컬에서 작업을 하면 무리없이 잘 동작하지만 실제 서버에서 동작을 시키게되면 http 요청을 실패하게 된다. (서버에 접속해 직접 curl로 요청을 하면 또 잘된다.) 문제 발생 과정 Part of request source, // front-end const baseUrl = 'http://localh..