개발
-
수직 가운데 정렬개발/코딩관련 2020. 2. 20. 17:39
1. 가운데 정렬 div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 여러가지 방법으로 해봤지만 이 방법이 제일 편하고 쉽고 예외가 적다. 부모div의 사이즈가 변경되어도 가운데정렬이 된다. 그리고 수평, 수직 가운데정렬을 손쉽게 할 수 있다. table이고 inline이고 다 필요없이. 2. 가로 가운데 정렬 텍스트 중앙정렬같이 좌우에 여백이 있고 가운데 정렬하는 방법 div{ position: absolute; left: 50%; transform: translate(-50%, 0); } 3. 세로 가운데 정렬 상하로 여백이 있는 수직 가운데 정렬 div{ position: absolute; top: 50%..
-
vuejs + firebase 처음 시작하기개발/웹사이트 혼자 만들기 2020. 2. 13. 16:52
0. 개요 회사 내부망이기도 했고, 서버리스로 빠르게 개발하고 웹사이트를 확인하고 싶어서 vue.js + firebase를 선택했다. 1. 개발환경 구축 이전에 node, vue-cli, yarnm, git까진 다 설치 되어있기때문에 설명은 패스한다. 명령어만 간략히 남겨둔다. //노드 버전확인 노드는 사이트에서 다운 $ node -v //vue-cli 설치 & 버전확인 $ npm i -g @vue/cli $ vue --version //yarn 설치 & 버전확인 $ npm i -g yarn $ yarn -v //git 버전확인 git은 사이트에서 다운 $ git --version 1.1 vue + vuetiry 원하는 폴더에 뷰 프로젝트를 만들어주고 서버올리고 확인한다. 뷰프로젝트 만들때의 옵션이다. ..
-
node.js vue.js express.js 처음 해보기개발/웹사이트 혼자 만들기 2020. 2. 12. 14:41
NEMV(Node.js, Express.js, MongoDB, Vue.js) 0. 개요 늦은감이 있지만, 요즘 많이 쓰는 것들을 새로 배우고 싶어서 짬날때 조금씩 공부하려한다. nodejs로 서버만들고 vue.js 사용해보고싶고, jquery는 없애고싶었다. 요즘스타일, 요즘 트렌드를 접하고자한다. https://fkkmemi.github.io/nemv/nemv-007-vuetify-install/ 모던웹(NEMV) 혼자 제작 하기 3기 - 7 뷰티파이 설치 뷰티파이 설치에 대해 알아보기 fkkmemi.github.io 이 강의를 보고 진행했으며, 이 글은 저 강의를 진행하면서 만났던 에러나, 몰랐던 부분 등등을 정리할 계획이다. 1. 뷰티파이 설치시 문제 발생 쭉 잘 설치하다가 뷰티파이 설치할 때 문제..
-
동영상 해상도 변경해도 이어서 보기개발/개발관련 2020. 2. 10. 17:34
동영상 해상도 변경시 해상도에 따른 동영상파일이 물리적으로 따로있기때문에, setPanorama 할 때 처음부터 재생이 된다. 이때 전 해상도의 시간을 저장해서 현 해상도의 영상이 재생될 때, 저장된 시간부터 재생이 될 수 있도록 해야한다. 1. 시행착오 panolensJS를 직접 수정하지 않고, 내가 만든 js를 통해서 컨트롤 하려했다. 하지만 setPanorama 하고 전후로 currentTime을 줘도 제대로 작동이 안되었다. 그렇다고 setTimeout을 주자니 정확한 문제해결이 아니라 다시 원복. setPanorama하고 모든 로직이 끝난 후 텍스처를 업데이트하기때문에 currentTime이 안먹는것 같았다. panolensJS 자체에서 setPanorama 부분을 수정해야할 것 같다. 2. s..
-
크롬 전체화면개발/코딩관련 2020. 1. 23. 16:15
크롬은 전체화면을 막고있다. 전체화면하려해도 수초 안에 다시 돌아온다. 하지만, 360영상을 카드보드로 보려할때 핸드폰에서 전체화면이 안되면 상당히 거슬린다. 1. 시행착오 뭔가 스크립트로 전체화면을 유지하려 시도했는데 제대로 되지 않았다. 그렇다고 크롬을 쓰지말라고 할 수도 없고.. 거기다 pc와 안드, ios 크롬어플에서도 다 되어야하기 때문에 더 골치가 아팟다. 그런데 순간, f11누르는거랑 같은 기능을 하면 되는거 아닌가?!?!?!?!?! 2. 직접 해보자 // 엔터 누를경우 f11누른것과 같은 이벤트를 발생시킨다. document.addEventListener("keydown", function(e) { if (e.keyCode == 13) { toggleFullScreen(); } }, fal..
-
panolens 360 영상 재생 및 멈춤개발/개발관련 2020. 1. 9. 16:24
하나의 360 동영상인데, 일정시간 재생되고 내가 설정한 지점에서 멈추고, 이때 poi가 화면에 나온다. poi 클릭 시 내가 원하는 부분으로 영상이 이동되어 재생되어야한다. (앞으로든 뒤로든) 1. 시행착오 끝 소스 웹에서 360동영상이 재생이 되고 내가 설정한 시간에 동영상이 멈춰야한다. 여러 시행착오 끝에 정리한 소스이다. (참고만 할 수 있게 정리) videoTime1 : function() { this.video1_setTime = setTimeout("videoTime1()",1000); // 1초후에 자기자신을 호출 this.video1_time = (this.video1).videoElement.currentTime; if(this.f_플래그1 == 0 && this.video1_time ..
-
panolens threejs cache 미리 다운받기개발/개발관련 2019. 12. 23. 17:34
panolens를 이용해서 360이미지 여러개를 이었는데, 다음 이미지로 넘어갈때마다 사진 용량이 커서 오래 기다려하는 문제가 있었다. 미리 캐시에 올리게 되면 처음만 오래걸리지 캐시에 올라가고 나서부턴 속도가 개선될 것 같아서 방법을 찾아보기로했다. 1. 일단 구글링 해보자 서비스워커를 써야할 것 같다. 워커어쩌고는 옛날꺼고 문제도 많고 여러 브라우저에서 막히고 있다. 서비스워커는 구글디벨로퍼 사이트에서 어떻게 사용하는건지 나와있다. 해봤는데... panolens에선 이미지가 미리 다운이 안받아진다. 그래서 panolens를 열어봤더니 three.cache관련해서 소스가 뭔가 있다. 이부분을 좀 더 파야할 것 같다. 서비스워커는 panolens에서는 안될것같다. 2. threejs cache 일단 구글..
-
letsencrypt 인증서 갱신하기개발/개발관련 2019. 12. 20. 11:40
1. 인증서 갱신 일단 letsencrypt 폴더를 찾아야한다. 나는 ~ 밑에 있었다. (우분투14버전) ./certbot-auto renew --dry-run 위와 같이 돌리면 시뮬레이션으로 돌려볼 수 있다. 80포트 어쩌고 에러는 톰캣이 80포트로 돌아가고 있기 때문에, 톰캣을 끄고 다시 실행하면 잘 돌아간다. 인증서 갱신된거 우분투에서 날짜 확인하고 톰캣 시작하고 사이트 들어갔는데... 적용이 안되어있다. 2. standalone 방식으로 다운받았을 때, 인증서 갱신 일단 과거에 standalone 방식으로 다운을 받았다. 찾아보니, 형변환이 필요하다고 한다. 인증서 폴더로 이동해서 도메인 폴더 밑으로 들어간다. cd /etc/letsencrypt/live/aaaa.com 확장자 명이 crt, ke..