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

해상도별 이미지 교체 window resize

반응형 웹사이트 제작 시 해상도 처리 및 감지 방법에는 2가지가 있다. CSS의 미디어쿼리 사용 Javascript의 $(window).width();와 if문 사용 CSS로는 미디어쿼리와 background 속성을 이용해 해상도별 이미지를 수정할 수 있지만 마크업을 수정할 순 없다. 이때 Javascript로 브라우저의 가로 값을 계산하여 해상도별로 마크업을 수정해줄 수 있다. resize event // jQuery $(window).resize(function(){ // script }); // JavaScript - addEventListener window.addEventListener('resize', function(event) { // script }, true); // JavaScript..

2022.01.11

클릭 시 Video 주소 바꾸기

클릭 시 Video 주소 바꾸기 a 태그의 링크값을 이용해 Javascript로 Video 주소 바꿔주기 HTML 비디오1 비디오2 비디오3 JS var video; //전역변수 선언 function changeVideo(linkBtn){ //linkBtn=>클릭한 a태그 video = document.getElementById('changeVideo'); //video태그 video.src = linkBtn.href; // 'movie/video01.mp4' video.load(); //연결된 비디오를 로딩한다. video.type = 'video/mp4'; //해당 코덱을 지정한다 video.play(); //비디오를 재생한다. return false; } //

2021.12.23