전체 글

[Elasticsearch] The bulk request must be terminated by a newline [\\n] 에러

1. 개요 elastic search의 자동완성 기능을 구현해보려고 샘플 데이터를 insert하는 도중, The bulk request must be terminated by a newline [\\n] 와 같은 에러가 발생했습니다. 2. 해결 방법 {"index":{"_index":"autocomplete_test_1","_id":"1"}} {"word":"스팀게임"} {"index":{"_index":"autocomplete_test_1","_id":"2"}} {"word":"스팀게임 추천"} {"index":{"_index":"autocomplete_test_1","_id":"3"}} {"word":"스팀게임 추천 2019"} {"index":{"_index":"autocomplete_test_1"..

[Mysql] 위도 경도 반경 구하기

1. 개요 지도에 관한 로직을 짤때 latitude, longitude 위도 경도 값을 구해서 radius, 위도 경도 값 기준으로 주변 5km, 10km의 위도 경도 리스트 또는 거리를 알고 싶을 때가 있습니다. 이러한 로직을 mysql에서 구현할 수 있을까 해서 찾아봤는데 stack over flow에서 친절하게도 작성된 sql이 있더군요. https://stackoverflow.com/questions/8850336/radius-of-40-kilometers-using-latitude-and-longitude Radius of 40 kilometers using latitude and longitude Possible Duplicate: Radius of multiple latitude/longit..

[Next.js] router query(props) 값이 비어있는 오류

1. 개요 Next.js에서 router를 사용해서 페이지 이동을 할때, query에 keyword를 담아서 페이지 이동을 시키려고 했습니다. search라는 페이지에 해당하는 tsx에서 props로 저 쿼리가 읽혀야 하는데 props.data에 값이 비어있었습니다... 2. 해결 방법 const router = useRouter(); const queries = router.query; // 전달받은 쿼리 내용 useEffect(() => { if (!router.isReady) return; console.log(queries) }, () => { }) }, [router.isReady]) 위와 같이 전달 받은 tsx에서 useRouter() 객체를 가지고 초기화를 해서 사용해야 합니다. 이유는 정적..

[ElasticSearch] received plaintext http traffic on an https channel, closing connection 에러

1. 개요 윈도우 환경에서 ElasticSearch를 설치하고 localhost:9200으로 열어보았을때, received plaintext http traffic on an https channel, closing connection 라는 오류가 발생하고 연결이 되지 않는 이슈가 있었습니다. 2. 해결 방법 [elasticsearch설치폴더]/config/elasticsearch.yml ... # Enable security features xpack.security.enabled: false xpack.security.enrollment.enabled: false # Enable encryption for HTTP API client connections, such as Kibana, Logstash..

[Node.js] Selenium 크롤링 사용

1. 개요 프로젝트를 진행하다보니 실제 프로젝트에 사용할 데이터가 필요할 때가 있는데, 이 데이터를 얻기 위해 자연스럽게 인터넷의 정보를 쉽게 얻어 올 수 있기 위해 크롤링을 사용해야 했습니다. 2. 패키지 먼저 폴더를 하나 생성하고 npm init -y 로 node.js 기반 패키지를 생성해줍니다. 사용할 라이브러리는 selenium으로 npm install selenium-webdriver 위의 패키지를 설치해줍니다. selenium 크롤링을 사용하기 위해서는 브라우저의 드라이버를 사용해야 합니다. http://chromedriver.storage.googleapis.com/index.html 저는 크롬 드라이버를 사용했기 때문에, 위의 링크에서 최신 크롬 드라이버를 받아주면 됩니다. 다운 받은 드라..

[React] Redux 사용하기(2) - 카운터 구현

1. 개요 첫번째 글에서 흐름을 설명했던 카운터를 실제로 구현해보겠습니다. 코드는 아래 블로그를 참고했습니다. https://react.vlpt.us/redux/04-make-modules.html 4. 리덕스 모듈 만들기 · GitBook 4. 리덕스 모듈 만들기 이번에는, 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보도록 하겠습니다. 리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 react.vlpt.us 2. 코드 작성 결과물은 위와 같습니다. 인풋 값으로 숫자를 입력받아 그 값만큼 현재값에서 +하거나 -하는 카운터 기능입니다. 프로젝트 폴더 구조는 위와 같습니다. module/counter.js /* 액션 타입 만들기 */ // Ducks 패턴을 따를땐 액션의 ..

[React] Redux 사용하기(1) - 개념과 흐름

1. 개요 React 기반으로 웹 프로젝트를 개발할때, 컴포넌트의 상태 관리를 해야할 경우가 생기는데, 이때 사용하는 것이 Redux입니다. 리액트의 꽃이라고 할 수 있고, 처음 접하는 사람에게 굉장히 러닝 커브가 높은 부분입니다.(저도 그랬습니다.) (상태 관리 하는 이유 : 리렌더링에 의한 자원 소모를 줄이기 위해서) 사실 Redux가 어렵기도 해서 사용하기 쉽게 라이브러리들이 개발이 되어서 MobX, xstate, recoil, zustand 등 여러가지 라이브러리가 등장하고, Redux를 굳이 사용하지 않아도 위 라이브러리로 간편하게 상태 관리를 할 수 있게 되었습니다. 하지만, 리액트 프로그래밍을 시작하는 사람으로서 어떤 맥락으로 상태관리가 이루어지는지 파악하는 것은 중요하다고 생각합니다. 2...

[Next.js] Proxy Axios 설정

1. 개요 Axios를 사용해 Next.js서버가 아닌 다른 도메인으로 url을 요청할 때가 있는데, 이때 프록시 설정을 하지 않으면 CORS 오류로 인해 호출이 되지 않는 경우가 있습니다. 또한, React에서 package.json에 프록시를 명시한 것과 다르게 Next.js에서 Proxy는 조금 다른 방법으로 설정을 해야만 했습니다. 2. 코드 Axios 호출 useEffect(() => { async function get() { try { const result: AxiosResponse = await axios.post("/redis/visit"); console.log(result.data) if (result) setVisitor(result.data) } catch (e) { } } ge..

[Nginx] Nginx Proxy Manager 설치

1. 개요 Nginx Proxy Manager를 재설치해야 하는 일이 빈번히 있어서 설치과정을 정리했습니다. Nginx Proxy Manager는 리버스 프록시, 리다이렉션, 보안 인증, SSL 인증서 관리를 GUI로 할 수 있게 도와주는 툴입니다. 가이드 참고 https://nginxproxymanager.com/guide/#features Nginx Proxy Manager Docker container and built in Web Application for managing Nginx proxy hosts with a simple, powerful interface, providing free SSL support via Let's Encrypt nginxproxymanager.com 2. doc..

[Nginx] SSL 설정(HTTPS 적용)

1. 개요 기존에 웹 사이트를 HTTP로 운영하고 있다가, 사용자의 정보같은 민감한 정보를 사용하게 될 경우에는 SSL 인증서를 사용한 보안처리를 해야합니다. 웹서버에 SSL 인증서를 사용해 웹사이트를 HTTPS로 열 수 있게끔 Nginx 프록시 서버에 SSL 인증서를 적용하는 방법을 확인해보겠습니다. 2. 준비물 도메인, SSL 인증서(chain key, private key) 도메인은 유료로도 발급할 수 있지만, 저는 개발용이기 때문에 무료로 도메인을 발급해주는 no-ip라는 사이트를 통해서 받았습니다. https://www.noip.com/ Sign In - No-IP × Please select your Language To view website content in your Language, p..