분류 전체보기 (66) 썸네일형 리스트형 카카오 맵 javascript api 적용하기 - 키워드 검색 참고 가이드 : https://apis.map.kakao.com/web/sample/keywordList/ 기존에 정보를 입력할때 다음 주소 api를 사용했지만 키워드 검색으로 수정했다. 가이드 문서에 javscript + html + css가 다 되어있어서 이를 활용하기로 했다. map을 렌더링할 div 키워드 : 검색하기 리액트를 하면서 아직 미숙해서인지 useState로 사용하다 보면 비동기 문제로 생각대로 관리가 안될때가 있었다. 그래서 전역변수 선언 var markers = []; var ps; var infowindow; var map; useEffect에 사용할 맵을 그리는 함수 drawKeywordMap const drawKeywordMap = () => { var mapContainer .. 카카오 맵 javascript api 적용하기 - 주소로 위치 표시 프로젝트를 개발하면서 가게 데이터를 맵에 표시하기 위해 카카오맵 api를 사용하기로했다. 참고 : https://apis.map.kakao.com/web/ 카카오 맵을 사용하기 위해서 map sdk.js를 사용해야한다. 나는 리액트기 때문에 index.html에 추가해주었다. 자바스크립트 앱키는 카카오 개발자 > 내 애플리케이션에서 확인 하면된다. libraries 파라미터는 기본 맵 services와 맵에 클러스터링을 할 계획이기 때문에 clusterer도 추가해주었다. 맵을 담아줄 div 생성 가이드를 참고해보면 전부 id="map"으로 되어있어서 참고하기 편하게 동일하게 해주었다 width 값과 height 값을 따로 설정을 해주었는데 둘다 %으로 지정할 경우 div의 스타일이 로드되기전 지도가 먼.. Nginx 413 Request Entity Too Large 에러 nginx로 서버를 돌릴때 413 request entitiy too large 라는 에러가 떴다. nginx에서 파일을 업로드할때 client_max_body_size값으로 제한이 되는데 디폴트값이 1MB이기 때문에 nginx.conf에서 값 설정을 해주어야한다. http { ... client_max_body_size 50M; ... } 저장후 service nginx reload를 하면 재시작없이 수정된 부분만 반영된다. 리액트 react-device-detect로 디바이스 구분하기 react-device-detect 패키지로 프론트단에서 디바이스를 구분해서 개발할 수 있다. 패키지 설치 npm install react-device-detect --save js에서 import해준다. import {BrowserView, MobileView, isBrowser, isMobile} from "react-device-detect"; BrowserView, MobileView는 태그로 사용해서 PC인경우 BrowserView, 모바일인경우 MobileView에 개발한 코드가 출력된다. isBrowser, isMobile은 조건으로 사용하면된다. PC 화면 모바일 화면 isMobile, isBrowser 예시 let initMapLevel = 7; if(isMobile){ initMapLe.. Nginx https 적용하기 openssl 사용, http https로 리다이렉트 openssl을 사용해서 nginx에 https를 적용시키려고 한다. 참고로 openssl로 자체 서명 ssl인증서를 통해 https를 하면 자체서명이기 때문에 브라우저에서 공식적으로 인증된 ca루트 인증서가 아니라고 경고가 뜨기때문에 경고가 싫다면 돈주고 ssl 인증서를 사야한다. ex)가비아, 카페24 또한 사전에 방화벽과 클라우드라면 보안그룹에서 443을 열어주어야한다. 먼저 nginx가 ssl적용이 가능한 모듈이 있는지 확인 # nginx -V 사진처럼 --with-http_ssl_module이 있어야한다. openssl을 사용하기 때문에 있는지 확인, 없으면 설치해주어야 한다. ( 우분투 => apt ) # openssl version 버전 정보가 나온다면 openssl이 설치되어 있다. ope.. Node.js Express 서버 express-device 디바이스 확인 express 프레임워크를 사용한다면 express-device 패키지를 사용해 디바이스를 체크할 수 있다. 참고 문서 : https://www.npmjs.com/package/express-device express-device 패키지 설치 npm install exress-device --save var device = require('express-device'); var app = express(); app.use(device.capture()); 참고한 문서를 보면 이렇게 했을때 request 객체에 device 속성을 사용할 수 있다고 한다. request.device에서 사용할 수 있는 프로퍼티는 두가지가 있다. type : 디아비스 타입을 리턴한다. 이 중에서 나는 desktop과 phon.. Node.js Express 서버에서 해외 ip 처리하기 배포되어있는 사이트에서 서버가 자꾸 꺼지는 이슈가 있어서 백그라운드로 실행 하지않고 콘솔을 지속적으로 확인했더니 무지성으로 계속 리퀘스트 요청이 들어오는걸 확인했다. 때문에 nginx에서 geoip를 이용해 해외 아이피를 처리하고싶었지만 유료인 nginx plus만 geoip 설정이 가능했다. 따라서 express 서버단에서 처리하기로 했다. https://xn--3e0bx5euxnjje69i70af08bea817g.xn--3e0b707e/jsp/statboard/IPAS/ovrse/natal/IPaddrBandCurrent.jsp KRNIC 한국 인터넷 정보센터에서 국가별 ip에 대한 csv파일을 얻을수 있다. DB에 넣어서 아이피 대역대를 조회해서 처리할 수 있지만 외부 api를 발견했다. https.. Node.js helmet 적용하기 npm의 helmet 패키지를 사용해 각종 공격에 대비할 수 있다. helmet 설치 npm install helmet --save 아래 페이지에 helmet 패키지에 대한 설명이 있다 https://www.npmjs.com/package/helmet var helmet = require('helmet'); app.use(helmet()); app.use(helmet())을 사용하면 helmet의 아래 기능을 모두 디폴트 값으로 사용하겠다는 의미다. 패키지 설명 페이지를 참고해 보면 app.use(helmet())과 아래 코드가 같은 의미인걸 알수있다. app.use(helmet.contentSecurityPolicy()); app.use(helmet.dnsPrefetchControl()); app.us.. 이전 1 ··· 4 5 6 7 8 9 다음
