-
Reactjs 2020‧07‧15
컴포넌트 안에서 method 호출 or arrow 함수 호출 (feat. this 이슈)
예를 들어 클릭 이벤트에 state 의 값을 변경하려고 함수 호출하거나 메서드를 호출한다.ES6 문법의 arrow 함수 방식으로 호출할 경우는 증가 버튼을 클릭하면 onClick으로 handleInc 인 arrow 함수 호출하여 state 값을 변경하는 예제였다.이 것을 ES6 문법이 아닌 예전 방식으로 코딩하면 아래와 같다. constructor 안에서 이벤트 메서드를 this.handleInc = this.handleInc.bind(this); 이런식으로 this를 바인딩 해줘야한다.그렇지 않으면 number 가 undefined […]
-
Javascript, jQuery 2016‧03‧24
JS - youtube 재생 완료 이벤트 받기
유튜브 영상을 가져와서 사이트를 제작할 경우가 발생할 때 여러가지 인터렉션을 구현하게 된다. 그 중 영상의 재생이 끝났다는 이벤트를 받아와서 다른 행동이나 스크립트가 실행되도록 하고자 할 때 아래와 같이 스크립트를 작성한다. 시작 전 ie8 이하는 해당 기능이 되지 않는다. 이유는 html5를 지원하는 브라우저에서만 가능하기 때문이다. <div id="player"></div> html에 유튜브 영상을 넣을 div를 만들어 놓는다. 스크립트가 실행되면 […]
-
Javascript, jQuery 2012‧10‧18
jQuery-브라우저 창 사이즈 조절에 따른 이벤트 만들기
브라우저를 크기 조절에 의한 이벤트를 받아 명령을 내릴 때 주로 사용한다.기본 적으로 아래처럼 사용한다. 그런데 이렇게 사용하게 되면 브라우저를 조절하는 동안에 계속해서 작동하게 되어 오히려 브라우저 성능을 저하 시켜서 느려지게 된다.그래서 보통 실무에서는 아래처럼 사용했다. 이렇게 되면 사이즈를 조절이 끝난 0.5초 후에 작동되기에 마우스로 브라우저를 조절이 멈춘 0.5초 후에 작동되게 만든 것이다.
-
Javascript, jQuery 2012‧10‧15
jQuery-마우스 이벤트시 부모 div의 id 값 가져오기
마우스 오버의 경우를 예로 든다. $Btn.mouseover(function(){ console.log($(this).closest('div').attr('id')); } $ Btn에 마우스를 올리면 그 상위 div 중에 id 값을 얻을 수 있다.
-
App Design, Inspiration, UI Design 2012‧10‧11
앱 디자인 영감을 얻기 위한 아이폰 앱들의 화면 캡쳐
네이버앱 : 아이콘 디자인(테두리 역할) 과 검색어 리스트화 시킨 UI 참고 KB 국민은행 : 하단의 단조로운 아이콘, 본문의 어플 아이콘 모양의 UI와 해당 디자인 참고 네이버카페앱 : 상단의 탭 디자인, 하단의 아이콘 디자인 UI 참고 다음앱 (이벤트창) : 해상도에 적합하게 컨텐츠 배열, 배경과 버튼 디자인 참고 […]
-
WP Plugin 2012‧04‧11
메인 화면에 이미지가 슬라이드 되는 프로모션 만들기
플러그인 이름 : Promotion Slider 메인이나 원하는 페이지에 슬라이딩 이미지 프로모션을 추가하는 플러그인이다. 플러그인 설치하면, 관리자 페이지 (대시보드) 안에 좌측에 promotions 이라는 메뉴 생성됨. 1. 카테고리 생성 일단 프로모션 카테고리를 만들자. (대시보드 - promotions - Categories) 그리고 슬로그를 기억해두자. 2. 슬라이드 이미지 추가 new promotion 눌러서 이미지를 추가시키는데, Featured Image에 이미지를 넣는다. 활성화 시키란 말이다. (본문 삽입하지 […]