분류 전체보기

세미콜론으로 알아보는 프로그래밍 언어

;

쓰자!

C, C++, C#, Java, PHP 

(주로 C계열)


쓰지마!

Python, Visual Basic, Kotlin

(주로 스크립트 계열)


JavaScript


느 코드엔 minify 못하지?

어디서 감히 더러운 세미콜론을 코드에 넣을 수가 있어요???


The Semicolon War


vue-naver-maps

2018.10.29 01:21

vue-naver-maps

npm npm npm

네이버의 지도 API를 Vue로 간편하게 사용할 수 있게하는 라이브러리입니다.

이 라이브러의 목표는 사용자가 직접 지도 클래스를 다루지 않고도 자바스크립트 기본 타입만으로 다룰 수 있도록 하는 것입니다.

현재 지원하는 컴포넌트

  • naver-maps 네이버 지도
  • naver-marker 마커 컴포넌트
  • naver-info-window InfoWindow 컴포넌트

시작하기

설치 방법

yarn 사용을 권장드립니다.

  • yarn : yarn add vue-naver-maps
  • npm : npm install vue-naver-maps

네이버에서 발급된 지도 API키가 필요합니다. 
기본적으로 네이버 클라우드를 지원하며, 기존 오픈 API 사용시 useOpenAPI를 true로 바꿔줘야합니다.

  • main.js
    import naver from 'vue-naver-maps';
    Vue.use(naver, {
      clientID: 'Q3terhW342KFsdfC1M',
      useOpenAPI: true //OpenAPI 사용
    });
  • .vue파일
    <naver-maps :width="600" :height="400"></naver-maps>

이제, 600x400 사이즈의 지도가 뜨게됩니다.

기본 맵 옵션

<naver-maps :width="600" :height="400"  :mapOptions="mapOptions"></naver-maps>

mapOptions으로 아래와 같은 데이터를 넣을 수 있습니다.

단, lat(위도)과 lng(경도)는 필수 입니다.

mapOptions: {
  zoom?: Number(기본값은 10),
  lat: Number,
  lng: Number,
  zoomControl?: Boolean,
  zoomControlOptions?: {
    position: String
  }
}

zoomControlOptions의 position은 TOP_RIGHT등 기존 JS 라이브러리의 enum 이름을 사용합니다.

추가 옵션 설정하기

기존 js 라이브러리와 마찬가지로, map 객체에 setOptions(options)를 사용할 수 있습니다. 단, 맵이 로딩 된 후에만 사용이 가능합니다.

onLoaded(this)

지도를 효과적으로 컨트롤 하기 위해 onLoaded(this) callback 함수를 사용할 수 있습니다.

<naver-maps :width="600" :height="400" :mapOptions="mapOptions" :onLoaded="callback"></naver-maps>

지도가 로딩되면 호출됩니다. 또한 인자로는 naver-maps 컴포넌트의 this를 넘겨줍니다. this.map으로 네이버 Map 객체에 접근이 가능합니다.

naver-maps

naver-maps컴포넌트에는 기존의 js 라이브러리가 사용했던 메소드들이 있습니다. 예를 들면 기존에는 setCenter 함수를 map.setCenter(new naver.maps.LatLng(lat, lng)); 으로 수행해야 합니다. 하지만 naver-maps 컴포넌트에서는 this.setCenter(lat,lng)으로 사용할 수 있습니다.

현재는 개발 버전이라 naver-maps 컴포넌트에 사용가능한 모든 메소드가 포함되어 있지 않습니다. 이 경우에는 this.map으로 직접 접근해야합니다.

Methods

setOptions(options)

ParamType
optionsObject

setMapType(type)

ParamTypeDescription
typestringNORMAL, TERRAIN, SATELLITE, HYBRID

setZoom(level, useEffect)

ParamTypeDefaultDescription
levelnumbermust be int
useEffectbooleanfalse

setCenter(lat, lng)

ParamType
latnumber
lngnumber

fitBounds(lat, lng)

ParamType
latnumber
lngnumber

panTo(lat, lng)

ParamType
latnumber
lngnumber

panToBounds(lat, lng)

ParamType
latnumber
lngnumber

panBy(x, y)

ParamType
xnumber
ynumber

naver-marker

지도에 마커를 표시해줍니다.

네이버의 이벤트는 @name 으로 접근 가능합니다. 예) @click, @dbclick 등

<naver-maps :width="600" :height="400"  :mapOptions="mapOptions">
    <naver-marker :lat="37" :lng="127" @click="onMarkerClicked" :onLoaded="onMarkerLoaded"></naver-marker>
</naver-maps>
<script>
export default {
  data(){
    return {};
  },
  methods:{
    // naver-marker는 다음과 같은 체이닝이 가능합니다.
    onMarkerLoaded(vue){
      vue.marker.setDraggable(true).setCursor('').setClickable(true);
    },
    onMarkerClicked(event){
      console.log(event); // 네이버 event 객체
    }
  }
}
</script>

Methods

setClickable(clickable) ⇒ Marker

ParamType
clickableboolean

setCursor(cursor) ⇒ Marker

ParamType
cursorstring

setDraggable(draggable) ⇒ Marker

ParamType
draggableboolean

setAnimation(animation) ⇒ Marker

ParamType
animation&#x27;BOUNCE&#x27; | &#x27;DROP&#x27;

setIcon(icon) ⇒ Marker

ParamType
iconstring | ImageIcon | SymbolIcon | HtmlIcon

setOptions(options) ⇒ Marker

ParamType
optionsMarkerOptions

setPosition(position) ⇒ Marker

ParamType
positionCoord | CoordLiteral

setShape(shape) ⇒ Marker

ParamType
shapeMarkerShape

setTitle(title) ⇒ Marker

ParamType
titlestring

setVisible(visible) ⇒ Marker

ParamType
visibleboolean

setZIndex(zIndex) ⇒ Marker

ParamType
zIndexnumber

naver-info-window

<naver-info-window :onLoaded="onWindowLoad" :isOpen="info" :marker="marker">
  <h1>Hello, World!</h1>
</naver-info-window>

OnLoaded

지도가 로딩되면 호출됩니다. 또한 인자로는 naver-info-window 컴포넌트의 this를 넘겨줍니다.

  • this.infoWindow으로 네이버 InfoWindow 객체에 접근이 가능합니다.
  • this.map으로 네이버 Map 객체에 접근이 가능합니다.

Example

<template>
  <naver-maps :height="400" :width="600" :mapOptions="{lat:37,lng:127,zoom:10}" :onLoaded="onLoad">
    <naver-marker :lat="37" :lng="127" @click="onMarkerClicked" :onLoaded="onMarkerLoaded"></naver-marker>
    <naver-info-window :onLoaded="onWindowLoad" :isOpen="info" :marker="marker"><h1>Hello, World!</h1></naver-info-window>
  </naver-maps>
</template>

<script>

  export default {
    name: 'HelloWorld',
    data() {
      return {
        info: false,
        marker: null,
      }
    }, methods: {
      onLoad(vue) {

      },
      onWindowLoad(vue) {

      },
      onMarkerClicked() {
        this.info = !this.info;
      },
      onMarkerLoaded(vue) {
        this.marker = vue.marker;
      }
    }
  }
</script>


'npm' 카테고리의 다른 글

vue-naver-maps  (0) 2018.10.29
업비트 API upbit-api v0.5.0 출시  (0) 2018.09.09
업비트 API upbit-api 0.3.0 출시  (0) 2018.09.09
yahoo-exchange 2.1.0 Release  (0) 2018.09.02
region-name-kr 1.0.0. Released  (0) 2018.08.28
yahoo-exchange 2.0.1 Released  (0) 2018.08.25

Nuxt.js에서 Dynamic Routes를 사용하고 그대로 배포하면 404페이지가 뜨게 됩니다.

이 경우에는 파이어 베이스의 설정을 변경하면 됩니다.


hosting 폴더에 있는 firebase.json 파일을 아래와 같이 고쳐주세요.

"rewrites":[
{
"source":"**/*",
"destination": "/index.html"
}
]

일반 경로(예: /login 등)를 제외하고는 index.html로 연결됩니다. 그러면 이제 nuxt.js에서 라우팅 처리를 하게됩니다.



'Web Programming' 카테고리의 다른 글

firebase에서 nuxt.js dynamic routes 사용하기  (0) 2018.10.23
심플한 로그인 및 회원가입  (0) 2018.09.22

니시혼간지에서 금각사로 가는 방법은 205번 버스를 타면됩니다. 

버스로 30분 정도 걸립니다.


205번 버스를 타시려면 七条通에 버스정류장이 있습니다. (히가시혼간지에서 니시혼간지로 이동할 때 간 도로입니다.)

내리는 버스 정류장은 金閣寺道(Kin-kaku-ji-michi)입니다.


교토 여행의 단점은 저 버스입니다. 버스에서 30분동안 서서가는 것도 일입니다.

게다가 교토는 도로가 좁습니다. 막힌다는 소리입니다. 게다가 물론 이건 좋은거지만, 느긋느긋합니다. 우리나라처럼 막 미리 일어나거나 하지도 않습니다.

Huawei | Nexus 6P | Not defined | Unknown | 1/214sec | F/2.0 | 0.00 EV | 4.7mm | ISO-60 | Flash did not fire | 2018:01:21 12:08:34

들어가면 보이는 데입니다. 입장료는 400엔입니다.

Huawei | Nexus 6P | Normal program | Center-weighted average | 1/1072sec | F/2.0 | 0.00 EV | 4.7mm | ISO-84 | Flash did not fire, auto mode | 2018:01:21 12:12:19

사실 교토하면 생각나는 곳이기도 해서 많이 가긴 하는데 2번째에는 갈 필요는 없는 곳입니다.

그야말로 금으로 덕지덕지 치장한 곳입니다. 1950년대에 재건하면서 한 몇 백kg을 발랐다고 합니다.

한마디로 한번 보고 이게 금각사구나 하는 것만 느낍니다. 옛스러운 미가 하나도 없어요..

Huawei | Nexus 6P | Not defined | Unknown | 1/876sec | F/2.0 | 0.00 EV | 4.7mm | ISO-60 | Flash did not fire | 2018:01:21 12:16:16

GOLD

Huawei | Nexus 6P | Not defined | Unknown | 1/827sec | F/2.0 | 0.00 EV | 4.7mm | ISO-60 | Flash did not fire | 2018:01:21 12:16:15Huawei | Nexus 6P | Normal program | Center-weighted average | 1/125sec | F/2.0 | 0.00 EV | 4.7mm | ISO-84 | Flash did not fire, auto mode | 2018:01:21 12:21:43

정원은 볼만 합니다.

Huawei | Nexus 6P | Normal program | Center-weighted average | 1/130sec | F/2.0 | 0.00 EV | 4.7mm | ISO-60 | Flash did not fire, auto mode | 2018:01:21 12:25:43

안에 부처님이 있는 거 같은 석탑입니다.

Huawei | Nexus 6P | Normal program | Center-weighted average | 1/1282sec | F/2.0 | 0.00 EV | 4.7mm | ISO-60 | Flash did not fire, auto mode | 2018:01:21 12:27:08

풍경은 좋습니다. 

Huawei | Nexus 6P | Normal program | Center-weighted average | 1/303sec | F/2.0 | 0.00 EV | 4.7mm | ISO-64 | Flash did not fire, auto mode | 2018:01:21 12:27:11

Huawei | Nexus 6P | Normal program | Center-weighted average | 1/43sec | F/2.0 | 0.00 EV | 4.7mm | ISO-631 | Flash did not fire, auto mode | 2018:01:21 13:15:43

점심시간이라 원래 시장가서 먹으려고 했는데 다들 배고팠기에 아까 내린 버스정류장 근처에 있는

㐂福庵金閣寺みち店이라는 음식점에서 먹었습니다.

여기서 중요한 건 가격이 비쌉니다. 저게 900엔인가 했습니다.


WebStorm 2018.2.5 Update

2018.10.19 23:22

Typescript : 프로젝트 외부의 파일에 대한 링크로 인해 발생하는 성능 문제 해결

Docker : 도커 도구창에서  pull image를 선택하면 나오는 NPE 해결

User Interface. Focus : 경로 대화 상자에서 찾기가 때때로 반응하지 않는 문제 해결

No subsystem : Gnome-Shell이 ​​경로 확인 작업에서 바꿀 때 충돌하는 문제 해결

Git : 이름이 이미 있는 경우 github 토큰을 만들 수 없는 문제 해결

JRE : IM 해결 방법이 더 이상 작동하지 않는 오류 해결

'IT' 카테고리의 다른 글

WebStorm 2018.2.5 Update  (0) 2018.10.19
블러드 코인 추천인  (0) 2018.10.08
한국인 이메일 및 비밀번호 유출  (0) 2018.10.04
iPhone 12세대 정식 공개!  (0) 2018.09.13
const zero = num => num < 10 && num >= 0 ? "0" + num : num;
const dateKo = date => `${date.getFullYear()}${zero(date.getMonth() + 1)}${zero(date.getDate())}${zero(date.getHours())}${zero(date.getMinutes())}${zero(date.getSeconds())}초`;

자바스크립트 날짜(Date)를 한글로 표시하는 함수입니다.

xxxx년 xx월 xx일 xx시 xx분 xx초로 나오게 합니다. 인자값의 타입은 Date입니다.

const zero = num => num < 10 && num >= 0 ? "0" + num : num;

0 이상 10 미만이면 숫자의 앞에다가 0을 붙여주는 함수 입니다.

블러드 코인 추천인

2018.10.08 21:39

블러드 코인 추천인 : shinjaeheon

'IT' 카테고리의 다른 글

WebStorm 2018.2.5 Update  (0) 2018.10.19
블러드 코인 추천인  (0) 2018.10.08
한국인 이메일 및 비밀번호 유출  (0) 2018.10.04
iPhone 12세대 정식 공개!  (0) 2018.09.13

인구 관련 시스템

2018.10.08 12:48

USGS에는 PAGER라는 시스템이 있는데, 영향에 대해 분석해준다.


MMI 진도 1에는 몇 명의 사람들에게 영향을 미치는지,

MMI 진도 5가 느껴지는 도시 X의 인구수는 얼마인지,

예상 사망자 수의 확률

예상 경제적 손실 액수등을 알려준다.


이와 같은 시스템을 구축 하려고한다.


그러면, 시뮬레이션을 돌렸을 때, N명이 영향을 받았음 등을 표시해줄 수 있을꺼라 생각된다.


'Earthquake' 카테고리의 다른 글

인구 관련 시스템  (0) 2018.10.08

규모 

Mw 8.4 

깊이 

12km

위치 

시코쿠 해안 

유튜브 주소

https://www.youtube.com/watch?v=SG5J1061aZ0 




아무래도 단일 규모 8.9는 확률이 낮다고 생각했다. 이미지 생성 알고리즘에 문제가 있어서 이를 대규모로 수정해야되서 아예 뺐다.

그리고 역시 CPU를 과도하게 잡아먹어서 렉이 걸린다.



+ Recent posts

티스토리 툴바