블로그

회사 업무 중 지도 시각화가 필요한 일이 있어 여태는 User들의 위경도값을 받아서 Point를 찍어주는 풍선 지도(Point Map 또는 Dot Map이라고도 하고 일컫는 용어가 다양한 것 같음)를 주로 사용했었다. 위경도값만 있으면 Google Data Studio에서 그릴 수 있었기 때문에 전처리를 크게 이용하지 않았는데, 이번에는 구와 동단위 지도 시각화가 필요하여 지역 지도(Region Map 또는 Choropleth Map)을 활용하려고 했으나... 데이터 스튜디오 도움말 중 지역 측정기준 참조 를 보니 미국, 캐나다 등만 지원이 되고 한국은 지원이 되지 않았다. 띠로리 ! 그래서 다른 방법을 찾다가 Python의 Plotly 라이브러리를 이용하여 진행하였다. 시각화를 시킬 데이터 뿐만 아니라..

폴리곤 그리기를 위해 필요한 포인트는 두 가지를 고려하였습니다. 폴리곤 입력값을 받아서 컴포넌트 간 전달을 어떻게 할지와 어떻게 변환해서 전달할지 두가지를 고민해야 했습니다. 1. 컴포넌트 간 props 전달 컴포넌트 간 입력값을 전달하기 위한 과정을 설명하기에 앞서, 컴포넌트를 어떻게 구성하였는지 설명하고자 합니다. 기획한 화면 구성은 App.js에서 MapContainer 컴포넌트를 불러오고 MapContainer 에는 텍스트를 입력하는 PolygonInput 컴포넌트와 지도를 불러오는 NaverAPIMap 컴포넌트로 구성하였습니다. ├── ... ├── public │ ├── index.html │ ├── ... └── src ├── App.js ├── components │ ├── DrawCont..

React Native를 Expo로 접속을 하는데 아래와 같은 에러가 발생하였다. Something went wrong. Sorry about that. You can go back to Expo home or try to reload the project. 하단의 View error log를 살펴보니 아래와 같은 에러가 발생하였다. 192.168.25.3 (port 19000)이 작업 중인 컴퓨터 IP, 192.168.25.2가 접속을 시도하는 휴대폰 IP이다. 구글링으로 해결방법을 찾아봤을 때 윈도우의 경우 방화벽 문제 때문인 것을 알 수 있었다. 아마 VM 같은 것들이 IP 에 혼선을 주는 것 같았다. 그래서 인바운드 규칙에 포트 19000-19001을 허용해주고, `REACT_NATIVE_PACK..

만든 결과물 링크 : Drawing Polygon 회사에서 DB 내 상권 등의 폴리곤을 확인할 일이 많아서 지도 위에 레이어로 그려주는 툴을 만들 수 있지 않을까 싶어서 만들게 되었다. 네이버 지도 API를 사용하였고 GeoPolygon 좌표값들을 WKT(경도, 위도) 형태로 입력하면 숫자 부분만 읽어서 , 로 구분하여 위경도 값을 지도 상에 그려주도록 설계하였다. 테스트 값으로 소상공인시장진흥공단 상권 에 있는 POLYGON ((127.039452 37.495138, 127.039172 37.495735, 127.033527 37.494008, 127.034194 37.492618, 127.035835 37.493117, 127.035443 37.493923, 127.035641 37.49398, 12..

React에서 SVG에 마우스오버(hover)되면 색깔이 바뀌게 하고 싶었으나 구현이 잘 되지 않았다. 설명에 앞서 SVG란 단순히 jpg, png와 같은 이미지라고 생각했는데 Scalable Vector Graphics : 스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식이다. 사전적 정의를 살펴보니 HTML, CSS, JS와 함께 동작하는 XML마크업 언어였다. 내가 이용할 SVG파일도 vscode에서 열어보니 코드 형태로 되어있었다. 다시 본론으로 돌아와서 svg파일을 React에서 사용하기 위해 아래와 같이 ReactComponent 형태로 import하였다. import { Link } from "rea..

0. 전제조건 node.js가 설치되어있어야 하고 설치되지 않았다면 https://nodejs.org/ko/ 에서 다운로드 받도록 하자. 1. svelte-app.zip 다운로드 Svelte REPL에 들어가서 download zip file 클릭으로 svelte-app.zip을 다운로드한다. 2. svelte-app.zip 압축 풀기 VSCode에서 해당 폴더를 연다. 3. 패키지 설치 해당 프로젝트 폴더에서 터미널을 열고 아래와 같이 입력 $ npm install 4. 개발환경으로 서버를 시작 $ npm run dev 이 코드는 다음에 시작할 때도 위와 같이 입력하면 된다! 5. http://localhost:8080 로 접속 Hello World! 화면을 만나볼 수 있다. 참고로 Svelte tut..

현재 4명의 구성원으로 프로젝트 작업을 진행중인데 백엔드는 Django, 프론트엔드는 React로 기술스택을 정했으나 4명의 환경을 일치시키기 위해 도커를 이용하게 되었다. 나만 윈도우 ㅠㅠ 한 분이 감사하게도 도커 환경 구축을 해주셔서 (능력자..!) github를 통해 다운받아서 진행하게 되었는데 이번에 git 서브모듈이라는 걸 처음 알게 되었다. $ git clone --recursive https://github.com/username/repo.git 검색해보니 위와 같이 --recursive 옵션으로 submodule을 포함하는 git 저장소를 한번에 clone할 수 있는데 나는 그것도 모르고 각각 따로따로 git clone 을 진행하였다(ㅎㅎ) docker에서 프로젝트 저번 미팅 시간에 ubu..

오늘은 프로젝트 제안서 작성과 프로토타입을 제작했다. 프로젝트 제안서의 경우 이번에 처음 써봤는데 친구가 써서 거기에 내가 맡은 부분을 좀 더 작성했다. 그리고 페이지 제작에 앞서 프로토타입을 만들어봤는데(정확하게는 와이어프레임일수도) 툴은 카카오오븐을 사용했다. 다른 툴과의 비교 전에도 프로젝트 때 카카오오븐을 써봤는데 쉽고 간편해서 이번에도 카카오오븐을 이용했다. 사실 피그마나 Adobe XD를 사용해볼까 고민을 해봤는데 피그마를 처음 써봐서 그런지 아직은 좀 낯설었다. 카카오오븐에서는 간편하게 컴포넌트나 아이콘을 쉽게 가져다 쓸 수 있는데 피그마의 경우 Iconify라는 플러그인을 따로 설치해야 아이콘을 쓸 수 있었고, 버튼이나 툴팁 같은 요소 또한 마찬가지로 바로 이용할 수는 없어서 조금 서치가 ..

예전에 분석 프로젝트로 대선 후보 지지율 예측을 시도한 적이 있는데 지금 다시 해보면 어떨까 싶어서 좀 더 업그레이드된 버전으로 계획을 해볼까한다. (항상 머리로만 생각하고 글로 남겨두지를 않아서 이번에는 계획서를 작성해두고 실행해보려고 한다.) 이번 대선 후보 지지율 예측 프로젝트는 분석을 넘어서 동적인 페이지로 만들어보고자 한다. 이름하여 대선 후보 지지율 예측 페이지 제작 프로젝트! 요즘 JS나 React를 공부했었는데 백엔드와 통신할 수 있는 REST API나 GraphQL 등 HTTP를 통한 상호작용을 시도해보고 싶었기 때문이다. 이번 대선 날짜는 2022년 3월 9일. 정확히 한 달이 남은 시점에 어떻게 구현할지 고민해보다가 한때 크롤링 공부도 했었고 현재도 파이썬 공부를 하고 있는 친구에게 ..

1. React 컴포넌트는 반드시 대문자로 시작해야 한다 JS에서는 function을 소문자로 적었었는데 React에서는 컴포넌트로 사용하기 때문에 에러가 발생하였다. 그 이유를 구글링으로 찾아본 결과, ReactDom.render 시 엘리먼트 자리에 소문자로 시작하는 것은 DOM태그로 인식하기 때문에 사용자가 직접 작성한 컴포넌트를 엘리먼트 자리에 넣어 실행할 경우에는 대문자로 시작해야 정확히 인식한다. 라고 하는데 ReactDOM이 렌더링 시에 소문자는 html 일반 태그로 인식하기 때문에 대문자로 컴포넌트를 구분한다는 것은 이해가 됐다. 근데 'ReactDom.render시' 라는 말을 정확하게 이해하고 싶었다. 2. ReactDOM이란? React를 사용하기 위해서는 먼저 React와 ReactD..