마커는 간단하다.
포지션과 맵을 인자로 받고
포지션은 위도와 경도를 가진다.
양식에 맞춰서 넣어주기만 하면 완성!
포지션 ( 위도와 경도 )
var myLatLng = { lat: latitude, lng: longitude };
맵
map = new google.maps.Map(document.getElementById("map"), {
center: myLatLng,
zoom: 15
});
마커
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Hello World!"
});
watch는 데이터가 특정 조건일 때를 감지하여 그 때 동작들을 수행할 수 있다.
예를 들면
data() {
number: null,
}
이렇게 있다면
watch : {
number(value, oldValue){
if( value ===0){
number = 1;
}
}
}
이런식으로 함수로 선언하는데, 첫 번째 인자는 현재 값, 두번째 인자는 바뀌기 전 값이 들어간다.
| Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법 (0) | 2020.03.14 |
|---|---|
| Vuex 사용법 (0) | 2020.02.19 |
| Vue.js에서의 Vuex, EventBus (0) | 2020.02.18 |
| Vue 객체, 배열을 index 값으로 바꾸기 (0) | 2020.02.17 |
| Vue.js로 만든 프로젝트를 firebase 로 배포하기 (0) | 2020.01.30 |
MariaDB와 node.js & express를 이용한 aws ec2에서 배포한 와이파이 저장 서비스,
카페에서 공부하다가 갑자기 꽂혀서
저녁 9시부터 새벽 1시 40분까지
중간에 쉰 것 빼면 약 4시간 정도 걸린 서비스를 만들어봤다.
웹에서 짜니까 웹에 최적화되게 나와서,
막상 모바일에서 돌리니까 글자 크기 너무 작아가지고,
UI 찾아서 좀 맞추느라 시간 더 뺏겼다.
DB 모델이나 그런건 급하게 만드느라 대충 만들어서 나중에 제대로 다시 짜서 데이터 넣어야겠다.
ec2 너무 느려서 답답해서 힘들었당,,
확실히 로컬 서버가 아니면 잘 돌아가는지 로그 보기가 좀 힘든 것 같다,,
실제 배포 단계에서는 로그를 보고 디버깅하는 것에 대한 배움이 부족한 거 같다,,
4시간 한 것 치곤 만족스러운 결과 ㅎㅎ
git에 공개로 배포할라했는데, DB 비밀번호가 js 파일에 담겨 있길래 private으로 올렸다,,,
올릴 때 이런 거 고려 잘 하고 올려야겠다.
git 사용할 때, 아직 부족한 점이 많은 것 같다... 깃 안에 깃 또 init해서 문제 생기고,,
제일 문제는 merge할 때 익숙하지 않아서 이 방법 좀 잘 익혀야겠다.
아래는 실제로 배포 중인 서비스 ㅎㅎ
ec2 노는 게 아까워서 만들어봤당
http://ec2-52-13-31-111.us-west-2.compute.amazonaws.com:8085/
비밀번호 저장소
비밀번호 저장소 wifi 버튼을 누르면 비밀번호 목록이 나와요 *현재 Wifi만 구현되어 있음 & 장난치지 마세요* 화장실 wifi
ec2-52-13-31-111.us-west-2.compute.amazonaws.com:8085
| GoogleMap Place SearchBox를 이용한 위치 검색 추가 (0) | 2020.03.21 |
|---|---|
| 드래그 앤 드롭으로 위치 정보 반영 (0) | 2020.03.10 |
| 마커 여러 개 넣고... 앞으로는? (0) | 2020.02.22 |
| 데이터 베이스를 어떻게 짜야할까 (0) | 2020.02.17 |
| Google map 사용기 + 비밀번호 저장소 계획 (0) | 2020.02.17 |
배열에 값을 채운다.
사용법은 array가 있을 때
array.fill( 값, 시작 , 끝);
array = [ 1, 2, 3, 4] 일 때,
array.fill( 5, 1, 2) 라고 하면
1번째부터 2번째까지 5로 채우는 것이므로
array = [ 1, 5, 5, 4] 이렇게 된다
array.fill(5, 1) 처럼
끝을 입력 하지 않을 시, 배열의 끝까지 채우게 되서
array = [ 1, 5, 5, 5] 가 된다.
시작과 끝을 입력하지 않으면 배열의 모든 값을 바꾸게 된다.
array.fill(5) 를 하면
array = [ 5, 5, 5, 5] 가 된다.
| javascript 배열 일부만 복사 slice (0) | 2020.02.24 |
|---|---|
| javascript sort 함수를 사용하여 정렬하는 법 (0) | 2020.02.24 |
| Javascript 메모리 생존 주기 ( 계속 추가 및 수정 중) (0) | 2020.02.19 |
| JavaScript SetTimeout 사용법 (0) | 2020.02.18 |
| javascript ... spread operator 문법 (0) | 2020.02.14 |
...이 구글 검색에서 검색을 도와주는 기호로 사용되서 검색되지 않는다,,,ㅠㅠ
-2020.05.17 수정 및 추가
요즘 code를 저장하기 편한 노션에 글을 저장해서 이 글 써놓고 잊고 있었다 ㅠㅠㅠ
하지만 결국 이름을 알아냈다
이름하야 spread operator
혹은 spread syntax 라고도 부른다.
간단하게 설명하자면 배열을 원소 단위로 찢은 다음, 새로운 원소로 넣는 것이다.
a라는 배열이 있고, b라는 변수가 있을 때,
var c = [...a,b]
이렇게 하면 c는 a라는 배열 뒤에 b라는 원소가 붙은 새로운 배열이 되게 된다.
물론 [...a,...a] 이렇게도 사용 가능하다.
spread syntax는 정말 여러 용도로도 가능한데 나중에 설명하겠다.
대표적으로는 복사(정확히는 얕은 복사)를 할 때 많이 사용한다.
let a = [1,2,3]
let b = a
라고 하게 되면, a와 b는 같은 리스트가 된다.
단순히 값만 같은게 아니라, 이름만 다를 뿐 같은 리스트를 가르킨다.
정확히 말하면 b가 a를 참조를 하고 있다는 것이다.
그래서 b[0] = 4 라고 바꾸게 되면
a랑 b 둘다
[4,2,3]
이 된다.
그래서 배열을 복사해야할 필요가 있는 알고리즘 문제 같은 것을 풀 때 많이 짜증나는데,
이런 문제를 해결하는 방법은 spread operator를 사용하면 된다!
let b = [...a] 이렇게 말이다.
물론 얕은 복사가 되어서 object를 복사할 때 깊은 복사를 하고 싶을 때는 다른 방법을 써야하지만...
일단은 배열은 이걸로 충분하다.
지금보니까 spread syntax에 대해 내가 잘 몰랐고, 정말 대충 설명해놨구나를 느낀다..ㅠㅠ
나중에 더 추가해야겠다. ㅠㅠ
| javascript 배열 일부만 복사 slice (0) | 2020.02.24 |
|---|---|
| javascript sort 함수를 사용하여 정렬하는 법 (0) | 2020.02.24 |
| Javascript 메모리 생존 주기 ( 계속 추가 및 수정 중) (0) | 2020.02.19 |
| JavaScript SetTimeout 사용법 (0) | 2020.02.18 |
| javascript fill() 함수 (0) | 2020.02.15 |
일단 firebase에 프로젝트를 만든다.
그 후 터미널 창에
npm install -g firebase-tools 입력하여 설치, (띄어쓰기 주의 firebase와 -tools 사이에는 띄어쓰기가 없다)
만약 error가 뜬다면 sudo 명령어로 권한 받아서 설치를 해야해서 문제가 생길 수 있으므로
sudo npm install -g firebase-tools 로 설치한다.
그리고 npm run build로 dist 폴더를 갱신 혹은 생성한다.
참고로 필자는 package.json의 스크립트 부분은
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
이렇게 되어있다. dist 폴더가 생성되지 않는다면 참고해서 변경
그리고 dist내에 index.html이 있다면 실행시켜봐서 자신의 만든 vue 앱이 잘 돌아가는지 확인
만약 index.html이 없다면 최상위 폴더에 있는 index.html을 복사해서 dist폴더 내에 넣는다.
그리고 index.html 내에 있는 경로 중 "dist/build.js" 이렇게 경로가 설정되어 있는 부분을 에서
dist를 지워서 "build.js"로 수정해준다.
필자 같은 경우 body부분에 있는 부분을 수정했다.
<body>
<div id="app"></div>
<script src="build.js"></script>
</body>
그리고 vue 최상위 폴더로 가서 명령어
firebase init
그리고 세팅을 해야한다
처음에 database와 hosting 선택
두번째로 existing project에서 만들어놓은 프로젝트 선택
세번째 rules는 그냥 엔터로 기본값으로
pubilc directory를 물으면 dist 입력
configure ...뭐시기뭐시기 /index.html 을 물으면 y
rewrite /index.html 물으면 n
세팅 끝
그리고 이제 명령어
firebase deploy
치면 배포 성공!!
| Vuex 오류 “TypeError: Cannot read property ‘state’ of undefined” 해결법 (0) | 2020.03.14 |
|---|---|
| Vuex 사용법 (0) | 2020.02.19 |
| Vue.js에서의 Vuex, EventBus (0) | 2020.02.18 |
| Vue 객체, 배열을 index 값으로 바꾸기 (0) | 2020.02.17 |
| Vue.js watch: {} (0) | 2020.02.16 |
배포 = deploy , deploying
여러개 = multiple ex) 여러 인자 = mulitple arguement
수정 = modify
| JavaScript를 간단하고 빠르게 코딩 하는법 (0) | 2020.06.13 |
|---|---|
| Geoloaction 정확도 올리는 법 (0) | 2020.02.16 |
| vector의 string을 printf하는법 (0) | 2018.07.27 |
| cin cout 입출력 속도 높이기 (0) | 2018.07.23 |
| Tuple 사용법 : vector나 queue 이용할 때 접근법 (0) | 2018.07.20 |
1. add
git add --all
전체 파일을 stage에 올린다.
git add 파일이름
원하는 파일만 stage에 올린다.
2. commit
git commit
커밋을 남긴다. 명령어를 입력하면 commit을 입력하는 창이 나온다.
3. push
git push origin master
| git stage에 잘못 올린 것들 없애버리기 (0) | 2020.02.27 |
|---|---|
| Github 기존에 있던 프로젝트 github에 올리기 (0) | 2020.02.27 |
| Github 시작하는법 (0) | 2020.01.24 |