대가는 결과를 만든다

이벤트 정의 함수 내에서 자주 쓰게되는 객체들 간단히 정리해본다. ELEMENT.addEventListener('click', function (e){ console.log(this); //event listener를 추가하는 dom element 객체 console.log(e.currentTarget);//위의 this와 동일 console.log(e.target);//클릭한 dom element 객체 console.log(this.parentNode);//클릭한 dom element의 부모 객체 }) 이어서 많이 사용하는 addEventListener의 이벤트 위임에 대해 정리한다. - addEventListener를 dom에 많이 부여할 수록 메모리를 차지하므로 페이지 성능에 영향을 줄 수 있다. ..

아래의 예시와 같이 사용할 수 있다. window.scrollTop=0; this.$refs['something'].$el.scrollTop=0; document.getElementId('something').scrollTop=0;

전자지도 위에 지리정보와 함께 좌표 등으로 표시되는 주요 시설물, 역, 공항, 터미널, 호텔, 백화점 등을 표현하는 데이터

1. 역사 94년 덴소 웨이브라는 도요타 자동차의 자회사에서 부품 구별하기 위해 개발하면서 시작됨. 기존 바코드의 가로방향 1차원적 표현 방식에서 정보를 더 담기 위해 2차원 코드를 개발. 빠르게 응답하고, 더 많은 정보를 담기 위해 탄생! QR은 Quick Response에서 유래했다능..! - 기존 바코드 : 20자내외 숫자 정보 저장 - QR 코드 : 숫자 최대 7089자, 문자 4296자 저장 2. QR코드의 구조 QR코드는 3가지 패턴으로 구성된다. 1. 위치 찾기 패턴 (Position) : 세 모서리에 크게 자리잡고 있는 사각형 : QR코드를 인식할 때 어느 방향에서도 위치를 빠르고, 정확하게 파악하기 위한 기준 역할 2. 얼라인먼트 패턴 (Alignment) : QR코드 인식시의 각도로 인..

안녕 위 p tag의 class에 b라는 class을 추가, 제거, 토글 하기 const aDom = document.querySelector('.a'); aDom.classList.add('b'); // => 안녕 //!!아래와 같이하면 아예 대체되버린다.!! aDom.className='b'; // => 안녕 //제거 aDom.classList.remove('b'); //토글 : 있으면 제거, 없으면 추가한다. aDom.classList.toggle('b');

EC2에 SSH로 접근제어를 위해 키페어(private-public)를 사용하는데, 하나의 키페어를 여러 개발자가 공유해서 쓸 수도 있겠지만, 필요에 따라 개발자별로 별도로 키페어를 관리하는 상황이 있을 수 있다. AWS EC2 웹 콘솔에서 '키페어'를 클릭해서 들어가면 생성했던 키페어 목록을 볼 수 있다. 처음 EC2를 생성했을 떄 키페어를 기본으로 생성하고 적용되게 되어 있다. 하지만 한번 EC2가 생성된 후의 키페어 추가(삭제)는 키페어를 발급한 후 직접 EC2에서 추가(삭제) 해주어야한다. 웹 콘솔에서 키페어 생성을 한 후 PEM, PPK 중 필요한 파일을 선택한 후 생성한다. 이 private key 파일은 처음 키페어를 생성했을 때만 얻을 수 있다. (윈도우 환경에서 putty를 이용한 접속을..

three.js 라이브러리를 npm으로 설치하고 webpack 환경에서 사용할 때 알아두어야 할 사항이다. three.js example에서 사용하는 control이나 여러가지 loader들을 import 해서 사용할 때 three/examples/js/ 디렉토리 이하에 있는 것을 import 해서 사용하면 " THREE is not defined " 에러가 발생한다. 해결방법! 결론부터 얘기하자면, three/examples/js 디렉토리에 있는 것이 아니라 three/examples/jsm에 있는 모듈들을 사용 해야한다. (npm에 별도로 import해서 쓸 수 있는 three-obj-mtl-loader 같은 모듈들이 있긴 하지만, 모든 모듈들이 있는 것은 아니기 땜에 근본적 해결책을 알아야 한다.)..

PWA란? Vue나 React Cli로 프로젝트를 만들면서 PWA대헤 아마 한두번씩 마주쳤을 것이다. PWA란 무엇일까? 간단하게 말해서는 웹과 네이트 앱의 이점들을 가지도록 개발된 짬뽕 웹 앱이라고 보면된다. 그럼 Web App과 Native App의 장점들을 한번 가볍게 짚어보자. - Web App : App을 설치할 필요 없이 웹페이지에 접속하면 된다. 링크로 공유가 용의하다. - Native App : 운영체제와 잘 통합되므로 성능이나 UX면에서 더 자연스럽고 부드럽다. 오프라인에서도 동작한다. 한번 설치 후에는 홈 아이콘으로 쉽게 접근 가능하다. 위에 나열한 두 방싱의 장점들을 다 포섭하고자 PWA가 나왔다고 보면된다. 위의 장점들 말고도 더 있을 수 있다. (PUSH 알림 기능 등) PWA는 ..