Language
브이월드) 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는 지도 플랫폼을 접하게 되었는데요, 눈에 띄는 장점이 있어 공유하고자 글을 씁니다. 브이월드란? 브이월드는 국가에서 제공하는 지도입니다. 본 사이트에서는 '민간 활용이 본 오픈 플랫폼의 궁극적인 목적'이라고 적어놓았는데요! 공식문서를 봤을 때, 사용하기 정말 편리하게 잘 정리가 되어 있다는 느낌을 받았습니다. 그리고 모두 자바스크립트를 이용해 작성되어 있기 때문에 기존 웹 개발자라면 어렵지 않게 접근이 가능합니다. 그럼 구체적으로 브이월드가 어떤 장점을 갖고 있는지 알아볼게요 브이월드 장점 브이월드는 국가정보를 지도 위에 표현..
react에서 SNS로그인 시 token, id 가져오기 (카카오, 네이버, 구글)
안녕하세요 프런트엔드 개발자 웹코기입니다. 오늘은 react에서 카카오, 네이버, 구글 로그인에 필요한 데이터 id 또는 token을 가져오는 방법을 알아보겠습니다. 우선 이 정보를 가져와야 백단과 통신해 로그인을 진행할 수 있습니다! 저는 세 가지 모두 npm라이브러리를 이용해 쉽게 가져와봤습니다. 1) 라이브러리 설치와 import 우선 첫 번째로 세 가지의 라이브러리를 모두 설치합니다. yarn add react-naver-login react-kakao-login react-google-login 그리고 사용할 JS파일에 import 해줍니다. import NaverLogin from 'react-naver-login'; import KakaoLogin from 'react-kakao-login'..
React Native로 2개월간 사내 앱 프로젝트 작업한 후기
안녕하세요 최근 퍼블리셔에서 프론트엔드 개발자로 전향한 웹코기입니다. 프론트엔드 개발자로 입사 후 React Native(이하 RN)를 이용한 프로젝트 앱을 약 2개월간 진행하게 되었는데요 이 RN은 나에게 천국과 지옥을 선물했습니다. 어느새 애증의 관계가 되어버린 RN에 대해 저와 같은 시행착오를 덜 겪으셨으면 하는 바람에서 이 글을 작성하게 되었습니다. 웹 환경에만 익숙했던 제가 RN을 사용하게 되었을 때의 생각을 반영하고 있기 때문에 제 생각이 편향적일 수도 있지만, 저와 비슷한 상황이시라면 분명 도움이 되실 거라 생각합니다. React Native, 여러 장점이 있는 정말 좋은 기술이라고 생각합니다. 하지만 제가 필요한 부분에선 확실히 알고 작업을 시작한 것이 아니었기 때문에 지옥을 맛보기도 했는..
JS로 호버해 img 변경시, 이미지 깜빡임 현상 없애기
CSS의 hover만으론 변경이 불가한 상황이 있어 JS로 처리했다. 하지만 이미지가 최초에 mouseenter했을 때 한번 깜빡거리는 문제가 발생했다. 이유는, mouseenter 했을 때의 이미지를 미리 불러오지 않고 뒤늦게 불러오기 때문이였다. 그래서 이미지를 미리 불러오는 작업을 했다. 이렇게 미리 호출하면, 깜빡임현상이 사라진다. logout_bg_hover.png가 미리 잘 불러와졌다 !!
SASS 테스트기 ( sass meister )
SASS 테스트기 https://www.sassmeister.com/ SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com SASS는 vscode 등에서 설치를 해야 사용할 수 있는데, sass meister로 바로 테스트해 볼 수 있어 유용하다.