기본 콘텐츠로 건너뛰기

html click 이벤트가 모바일에선 300ms가 느리다!!?

안녕하세요 광흠입니다.


이번 포스팅은 "html 클릭 이벤트가 모바일에선 왜 느릴까?" 주제로 하겠습니다




일단 동영상을 한번 시청해보시면 차이를 아실거라 생각이 듭니다
(youtube에서 찾은 비교 영상입니다.)

왼쪽은 일반 click이벤트이고 우측이 touch 영상입니다.

육안으로도 확연히 차이가 심합니다.

자료를 찾아보니 모바일에서는 더블탭이 될지도 모르기 때문에 300ms를 대기 시간으로 둔다더군요 그래서 모바일에선 touch 이벤트가 존재합니다

종류는 아래 보시면 되겠습니다


  1. touchstart (스크린에 손가락이 닿았을때 발생한다)
  2. touchmove (스크린에 손가락이 닿아있고 움직일때 발생한다)
  3. touchend (스크린에서 손가락이 떨어졌을 경우 발생한다)
  4. touchcancel (시스템에서 이벤트를 취소시킬 때 발생하지만 브라우저마다 다르다)


이렇게 이벤트를 사용하여 반응형 웹 또는 모바일 웹을 제작할때 touch이벤트를 잘 사용하도록 하자.

여기서 주의할 점은 touch이벤트를 사용할때 컴퓨터의 웹에선 동작하지 않습니다.

그래서 click이벤트와 같이 사용을 해주셔야하는데요


1
2
3
4
5
6
7
8
9
10
11
12
13
//모바일에서 touch이벤트와 click이벤트가 같이 발생할때 click을 취소하는 펑션입니다.
function eventHandler(event, selector) {//
    event.stopPropagation();
    event.preventDefault();
    if (event.type === 'touchend'){
        selector.off('click');
    }
}
//위의 평션은 이렇게 이벤트와 element를 넘겨주시면 되겠습니다.
$(selector).on('touchend click'function(event) {
    eventHandler(event, $(this));
    nextMenu();
});


이상으로 포스팅을 마치겠습니다 ^^

감사합니다.

댓글

이 블로그의 인기 게시물

카카오톡 API 로그인 하기

안녕하세요 광흠입니다.

오늘 소개할 내용은 우리나라 대표 메신저 카카오톡 API를 사용한

로그인하는 방법을 소개 드릴까 합니다.

https://developers.kakao.com 해당 링크가 카카오톡 API 를 참고할 수 있는 곳입니다.



1. 사이트를 접속하시면 빨간 테두리에 노란색 화살표를 누르시면

초록색 테두리 (내 어플리케이션) 을 선택하실 수 있습니다.

선택해서 일단 들어가봅시다.







2. (내 어플리케이션)을 선택하고 들어오시면 해당 페이지가 뜨는데
빨간색 테두리 (앱 만들기)를 클릭하고 새로운 카카오 키를 받아봅시다!





3. (앱 만들기)는 간단하게 이름만 작성해서 일단 만드시면 됩니다.





4. (Create)버튼을 클릭하시면 이렇게 각각 쓰이는곳 마다 키를 발급하는데요
저는 웹에서 사용하기 때문에 javascript 키를 사용합니다.
(실제로 발급하시면 저기 빨간 테두리 공간에 키가 존재합니다)
키를 복사하시고 밑에 html에 "발급받은 키"공간에 넣어주시면되요




5. 여기서 플랫폼 추가를 누르셔서 어디서 사용할지를 작성을 해야해요

구글 로그인 연동

구글 로그인 연동이 2019년에 새롭게 재작성되었습니다 [최신 글 보기]

안녕하세요 광흠입니다.

이번에 포스팅 할 내용은 제목보시면 아시겠지만 google oauth2를 이용한 로그인 연동을

해볼텐데요.

우선 준비하실 부분이 몇가지 있습니다.

화면 보시고 따라오시면 금방 하실 수 있을겁니다 ^^

1. 구글 콘솔에서 프로젝트 생성 https://console.developers.google.com

처음 시작하시는 분들은 저처럼 아무것도 존재하지 않을거에요

그럼 프로젝트 만들기 버튼을 클릭해서 새로운 프로젝트를 생성해봅시다.




이번에 로그인 테스트이니 이름을 google-login-test로 해보겠습니다.

주의하셔야 할 점은 '프로젝트 이름'과 '프로젝트 ID'는 동일하면 생성이 되질 않습니다.


생성을 하시면 이 화면으로 오게 됩니다.

여기서 메뉴쪽 보시면

 API 및 인증 하위 메뉴에 사용자 인증 정보 메뉴를 클릭 해줍니다.



이 화면으로 오시면 새 클라이언트 ID 만들기 버튼을 클릭해주시면


생성해주시면 이렇게 '웹 애플리케이션용 클라이언트 ID' 라는 테이블이 하나 생성이 되는데요.



여기서 생성된 '클라이언트 ID' 를 잘 메모장에 적어둡시다.

여기까지하면 google api를 사용할 수 있게 준비가 되어있는데요.

그 후 https://developers.google.com/+/web/signin/ 여기 google 쪽 읽어보시고 거기에있는

예제 코드로 바로 사용하셔도 무방할 정도로 잘 정리되어있습니다.

여기서 주의할 점은 예제코드에 clientid 그대로 사용하시면 401 에러 나면서 로그인 못하실 꺼에요

꼭 위에 생성한 '클라이언트 ID'를 사용하시면 되겠습니다

이상 구글 로그인 연동 포시팅을 마치도록 하겠습니다 ^^

혹시 질문 있으시면 댓글로 달아주세요~

맥에서 ssh 터널링 하는 방법

이번에 작업하면서 터널링 열어서 접속 해야하는 경우가 발생하였다..
(사실 기존에는 ssh 접속만 했지 깊이 파보진 않아서.. 이번에 처음으로 터널링을 해보았다.)

회사에서 알려준 방법은 windows에서 putty로 하는 방법을 알려줬는데

putty 와 비교하면서 설명을 해보겠다.



회사에서 준건 이렇게 이미지를 받았다.

맥에서는 터널링서버IP와 포트 그리고 터널링을 이용하여 실제 접속하고싶은 IP와 포트를 알면된다.

터미널에서

$ ssh 터널링 접속 아이디@터널링서버 IP -p 22 -N -L 10555:실제 접속하고싶은 IP:22
이렇게 작성을 하시면 실제 터널링을 열어주게 된 것이다.


 사용된 옵션 : -p [number]  : number 포트번호로 접속한다.  -N : 원격 쉘을 실행시키지 않고 접속만 유지한다.  -L [로컬포트번호:호스트:호스트포트번호] : 로컬 포트번호로 listen 소켓을 열고 들어오는 패킷을 원격지에서 호스트:호스트포트번호로 전송한다.  [출처 http://blog.lael.be/post/845]

그런다음 새로운 터미널에서

$ ssh (실제 접속하고싶은 IP)에서 사용될 ID@127.0.0.1 -p 10555
이렇게 하면 터널링에 접속이 된다!