머리가 나쁘면 적어놔야한다 머리가 나쁘면 적어놔야한다

1. 외부사이트의 html을 어떻게 가져올까 외부사이트 url을 통해 html 코드를 가져오고싶었다. 구글에서 찾아본것 중 vue에서 잘 돌아가는 것으로 적용했다. 아마 내가 vue가 처음이라 잘 적용을 하지 못하는 것도 있을 듯하다. 2. 예시 코드 자바스크립트 코드이다. test (url) { var optionAxios = { headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS', 'Access-Control-Allow-Headers': 'Content-Type, A..

생각없이 코딩하지말고 효율적인 코딩 방법을 생각하면서 개발해야겠다. 스크립트 디자인 패턴 찾다가 곁다리로. https://joshua1988.github.io/web-development/javascript/javascript-best-practices/ 여기서 나한테 필요하다고 생각하는 것들만 선별해서 가져왔다. 1. 삼항연산자 변수나 실행함수로 값을 받은적이 없어서 기록해둔다. //일반 var isArthur = true; var weapon; if(isArthur) { weapon = "Excalibur"; } else { weapon = "Longsword"; } //삼항연산자 var weapon = isArthur ? "Excalibur" : "Longsword"; // 두개 이상의 변수를 이용..

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%..

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 원하는 폴더에 뷰 프로젝트를 만들어주고 서버올리고 확인한다. 뷰프로젝트 만들때의 옵션이다. ..

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. 뷰티파이 설치시 문제 발생 쭉 잘 설치하다가 뷰티파이 설치할 때 문제..

동영상 해상도 변경시 해상도에 따른 동영상파일이 물리적으로 따로있기때문에, setPanorama 할 때 처음부터 재생이 된다. 이때 전 해상도의 시간을 저장해서 현 해상도의 영상이 재생될 때, 저장된 시간부터 재생이 될 수 있도록 해야한다. 1. 시행착오 panolensJS를 직접 수정하지 않고, 내가 만든 js를 통해서 컨트롤 하려했다. 하지만 setPanorama 하고 전후로 currentTime을 줘도 제대로 작동이 안되었다. 그렇다고 setTimeout을 주자니 정확한 문제해결이 아니라 다시 원복. setPanorama하고 모든 로직이 끝난 후 텍스처를 업데이트하기때문에 currentTime이 안먹는것 같았다. panolensJS 자체에서 setPanorama 부분을 수정해야할 것 같다. 2. s..

크롬은 전체화면을 막고있다. 전체화면하려해도 수초 안에 다시 돌아온다. 하지만, 360영상을 카드보드로 보려할때 핸드폰에서 전체화면이 안되면 상당히 거슬린다. 1. 시행착오 뭔가 스크립트로 전체화면을 유지하려 시도했는데 제대로 되지 않았다. 그렇다고 크롬을 쓰지말라고 할 수도 없고.. 거기다 pc와 안드, ios 크롬어플에서도 다 되어야하기 때문에 더 골치가 아팟다. 그런데 순간, f11누르는거랑 같은 기능을 하면 되는거 아닌가?!?!?!?!?! 2. 직접 해보자 // 엔터 누를경우 f11누른것과 같은 이벤트를 발생시킨다. document.addEventListener("keydown", function(e) { if (e.keyCode == 13) { toggleFullScreen(); } }, fal..

하나의 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 ..