Language/JS
tensorflow.js 찍먹해보기 (이미지 분류 from 생활코딩)
안녕하세요 웹코기입니다. 시간이 지날수록 제가 사랑하는 JS의 영역이 넓어짐에 따라, 예전부터 관심있던 머신러닝 기술인 tensorflow.js을 드디어 맛보게 되었어요. 생활코딩을 통해 학습한 텐서플로우의 내용에 대해 공유합니다. 텐서플로우의 사용 방향 머신러닝 (기계학습) => 기계를 학습시켜서 인간의 판단능력을 기계에게 위임하는 기술 1. 텐서플로우를 이용해 해결하려는 문제는 ? '지도학습 영역의 회귀 문제' (말이 어렵다.. 내용을 풀어서 아래에 정리) 지도학습이 된 경우, 강아지의 이미지를 보고 '댕댕이'라는 결과를 도출할 수 있음. 그렇다면 '지도학습'의 두가지 방식 1. 회귀 => 맞추려는 정보가 숫자일 때 2. 분류 => 범주형일 때 '회귀와 분류' 가 가능한 여러 알고리즘 중 머신러닝은 ..
![브이월드) 내가 찍은 좌표대로 경로 이동하기 [결론 : 실패]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbj10Py%2Fbtq6QPrjUma%2FwGknRGAbaVLq1A9UiPKuok%2Fimg.png)
브이월드) 내가 찍은 좌표대로 경로 이동하기 [결론 : 실패]
cameraAction 객체를 사용해보자 안녕하세요 웹코기입니다. 요즘 사내 프로젝트를 위해서 브이월드에 대해 홀로 연구중입니다. 브이월드에는 'cameraAction' 객체안에 비행모드, 운전모드 등 지도위에서 실제로 달리는 듯한 카메라모션을 경험해볼 수 있습니다 !! 아래는 운전모드 코드샘플예제입니다. 공간정보 오픈플랫폼 오픈API (vworld.kr) 공간정보 오픈플랫폼 오픈API 웹지엘 3D지도 API 2.0 레퍼런스 웹지엘 3D지도 API 2.0 레퍼런스를 제공합니다. www.vworld.kr 내가 찍은 좌표 구간을 cameraAction 객체를 이용해 시뮬레이션해보자 저는 현재 실무에서 이 카메라액션을 이용해, 내가 찍은 여러개의 좌표대로 이 액션을 취하는 것을 목표로 하고 있습니다. 하지만 ..
websocket 사용하기 (라이브러리X)
안녕하세요 웹코기입니다. 저는 현재 사내에서 웹소켓을 이용해 실시간 채팅 기능을 구현하고 있습니다. 웹소켓은 개념 정도만 알고 있었는데, 역시 실제로 사용해보니 어떤 녀석인지 확 와닿더군요...!! 기존에 서버에서 통신할 땐 ajax나 axios만 사용했던 터라 단방향 통신에만 익숙했었는데요, websocket을 이용해 양방향 통신을 해보니 신세계네요 :) websoket.io나 다른 웹소켓 관련 라이브러리를 사용하면 더 편하게 사용할 수 있는 것으로 파악됐으나, 저는 사내 프로젝트가 프런트엔드 프레임워크나 nodejs를 사용하지 않은 이미 날 것(?)의 재료를 썼으므로, 저 또한 날 것의 websocket을 쓰기로 했습니다. 아래는 라이브러리를 전혀 사용하지 않고 작업한 소스입니다. 웹에 갖다 붙이면 ..
브이월드) x,y,z 좌표 값 가져오기 (webGL 3D)
안녕하세요 웹코기입니다 ! 요즘 브이월드를 이용해 사내 프로젝트를 개발 중입니다. 아래의 링크를 보면 코드 샘플 예시가 잘돼 있어서, 커스텀하기에도 큰 무리가 없을 줄 알았습니다만... 브이월드 커스텀을 위해 가장 필요하고 기본적인 X, Y, Z 좌표를 가져오는 것부터가 막혀서 애를 먹었습니다. 하지만 알아냈어요!! 그 내용을 공유하겠습니다 :) https://www.vworld.kr/dev/v4dv_opnws3dmap2exam_s001.do 공간정보 오픈플랫폼 오픈API 웹지엘 3D지도 API 2.0 코드샘플 웹지엘 3D지도 API 2.0 코드샘플을 제공합니다. www.vworld.kr 맵 초기화 그럼 좌표를 가져와봅시다. 우선 좌표를 가져오기 전에 기본적인 지도 생성부터 시작합니다. 지도 생성은 위 ..
브이월드) 정부제공 지도플랫폼 알아보기
안녕하세요 프론트엔드 개발자 웹코기입니다. 여러분은 지도하면 어떤 플랫폼이 떠오르시나요?? 주로 네이버 지도, 카카오 맵, 구글맵이 떠오르실 거라 생각합니다. 이번에 V world는 지도 플랫폼을 접하게 되었는데요, 눈에 띄는 장점이 있어 공유하고자 글을 씁니다. 브이월드란? 브이월드는 국가에서 제공하는 지도입니다. 본 사이트에서는 '민간 활용이 본 오픈 플랫폼의 궁극적인 목적'이라고 적어놓았는데요! 공식문서를 봤을 때, 사용하기 정말 편리하게 잘 정리가 되어 있다는 느낌을 받았습니다. 그리고 모두 자바스크립트를 이용해 작성되어 있기 때문에 기존 웹 개발자라면 어렵지 않게 접근이 가능합니다. 그럼 구체적으로 브이월드가 어떤 장점을 갖고 있는지 알아볼게요 브이월드 장점 브이월드는 국가정보를 지도 위에 표현..
JS로 호버해 img 변경시, 이미지 깜빡임 현상 없애기
CSS의 hover만으론 변경이 불가한 상황이 있어 JS로 처리했다. 하지만 이미지가 최초에 mouseenter했을 때 한번 깜빡거리는 문제가 발생했다. 이유는, mouseenter 했을 때의 이미지를 미리 불러오지 않고 뒤늦게 불러오기 때문이였다. 그래서 이미지를 미리 불러오는 작업을 했다. 이렇게 미리 호출하면, 깜빡임현상이 사라진다. logout_bg_hover.png가 미리 잘 불러와졌다 !!