React JS

React JS 공식사이트 https://reactjs.org/ 한국어 지원 사이트 https://ko.reactjs.org/ Facebook에서 개발한 자바스크립트 라이브러리(프레임워크가 아니다)이다. SPA(Single Page Application)이며 가상 DOM(Virtual DOM)을 활용한다. 다른 프레임워크나 라이브러리와 혼용이 가능하다 *장점 #Component 컴포넌트란 UI를 구성하는 개별적인 view 단위이다. 전체의 앱은 각 컴포넌트를 조립해서 만들어진다. 모듈화를 통해 유지, 보수가 용이하다는 점이 있다. 본인에게는 컴포넌트가 모듈화의 가이드라인을 제시해주는 것처럼 느껴진다. #JSX React에서 새로 도입된 자바스크립트 문법이고 React에서만 사용된다. JSX 문법을 사용하..

2022.04.15

Vue JS

Vue JS Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램(SPA)을 완벽하게 지원할 수 있습니다. Vue JS 공식사이트 https://vuejs.org/ https://kr.vuejs.org/ 공식 사이트에서 가이드문서를 볼 수 있다. https://kr.vuejs.org/v2/guide/ 설치방법 1. Vue.js 라이브러리를 연결해서 ..

2022.04.08

Angular JS

Angular JS란 https://www.w3schools.com/angular/default.asp https://angularjs.org/ 앵귤러JS는 자바스크립트 프레임워크들 중에서 최근 가장 주목 받는 프레임워크로 MVVM (Model View ViewModel) 패턴을 가장 잘 구현 하였다고 알려져 있다. 이를 이용하면 HTML기반에서 MVC(Model View Controller) 패턴을 적용하여 적은 소스 코드로 웹 어플리케이션을 쉽고 빠르게 만들 수 있다. 라이브러리가 아니고 프레임워크이므로 정해진 기본구조 위에 피룡한 기능을 갖다 얹기만 하면 된다. 즉, 건축을 하는 것이 아니고 지어진 건물을 구입하는 것이다. 현재 서버 측 스크립트는 프레임워크가 대세이고, 그 프레임워크가 바로 MVC..

2022.04.06

마우스 휠 중복 과다 제어 막기

ClearTimeout과 SetTimeout 으로 마우스 휠 중복 과다 제어 막기 var timeout; // 휠이벤트가 발생하면 window.onwheel = function(){ clearTimeout(timeout); //이전 휠 이벤트 제거 timeout = setTimeout(function(){ //다시 휠 이벤트 발생 0.1초후 // to do }, 1000); }; // section위에서 마우스 휠을 움직이면 $('section').on("mousewheel DOMMouseScroll", function(event,delta){ if (delta > 0 && cnt > 0 && wt>1024 && window.matchMedia("(min-width: 1024px)").matches) {..

2022.03.24

Service worker Navigation PreLoad

유튜브 동영상 iframe을 사용하게 되면 아래와 같은 에러메세지가 뜬다The service worker navigation preload request was cancelled before 'preloadResponse' settle. If you intend to use 'preloadResponse', use saitUntil() or responWith() to wait for the promise to settle. 아래 코드를 head에 삽입하면 해결~ 서비스 워커 Navigation Preload 에러 메시지 Chromium 기반 브라우저에서 서비스 워커 navigationPreload 배관을 사용하지 않고 사전 로드 브라우저 힌트를 사용하는 경우 브라우저 콘솔에 다음 오류 메시지가 표시될..

2022.01.21

jQuery 셀렉터, 요소 복사 및 잘라내기

아이템 순서대로 찾기 jQuery 셀렉터에 의해 리턴되는 각각의 아이템에는 인덱스 번호가 할당되며, 이 번호는 객체집합을 필터링할 때 사용할 수 있다. 인덱스 번호를 이용하여 요소 찾기 메소드, 셀렉터 설명 .eq() 인덱스 번호에 해당하는 요소를 리턴한다. :lt() 지정된 숫자보다 인덱스 번호가 작은 요소들을 리턴한다. :gt() 지정된 숫자보다 인덱스 번호가 큰 요소드를 리턴한다. 요소를 잘라내거나 복사하기 jQuery 객체집합을 얻게되면 이 페이지의 메소드들을 이용하여 해당 요소들을 제거하거나 복사할 수 있다. 잘라내기 메소드 설명 .remove() DOM 트리에서 조건에 일치하는 요소들을 제거한다. (하위요소 및 텍스트 노드들도 모두 제거) .detach() .remove() 메서드와 동일하지만..

2022.01.11