react
-
마스크 아이즈 - 공적 마스크 재고 확인 웹 서비스 개발 일지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..
-
[react] How to configure css css-loader in webpack?Frontend/react 2020. 1. 10. 16:34
Error: ERROR in ./node_modules/react-tabs/style/react-tabs.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > .react-tabs { | -webkit-tap-highlight-color: transparent; | } 1 npm install --save-dev css-loader 2 // webpack.config.js v..
-
ERROR in ./node_modules/request/lib/har.jsModule not found: Error: Can't resolve 'fs' in '.../node_modules/request/lib'Frontend/react 2020. 1. 7. 12:17
ERROR in ./node_modules/request/lib/har.js Module not found: Error: Can't resolve 'fs' in '/.../node_modules/request/lib' add webpack config : node: { fs: 'empty', },