[user agent switcher/Opera Mobile Emulator] 데스크탑에서 모바일화면보기


모바일용 페이지를 제작할 때는 모바일 내에서 구현이 되는지 핸드폰으로 확인하는 작업을 거칩니다.

그런데 핸드폰으로 확인하는 작업을 하자니, FTP로 해당 파일을 업로드해서 URL을 복사하고 

핸드폰으로 직접 확인하는게 손이 많이 가고 번거롭더라구요.


 데스크탑에서도 모바일 화면을 볼 수 있는 방법을 찾다보게 되었는데 의외로 많은 방법들이 있었습니다. 

그 중에서 써보니 가장 좋았고 지금도 쓰고 있는 것들을 소개하려 합니다.



1. 크롬 확장 프로그램 user-agent-switcher

(https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ko)



크롬을 쓰고 계시는 분들은 개발자도구에서 디바이스를 모바일 크기로 줄여 

확인하는 방법에 대해 알고 계시는 분들이 대부분일거라 생각하는데요. 


(모르시는 분들은 크롬에서 f12 누르시고 ctrl+shift+m을 누르시면 해당 페이지로 이동됩니다.)


저 같은 경우에는 웹용 페이지를 열었을 때, 모바일로 접속했을 시 

모바일 페이지로 전환되는 것까지 확인해야했기때문에 이 부분에서는 크게 도움이 되지 않았습니다. 


그래서 크롬 확장프로그램을 다운받게 되었는데요. 


크롬에서 위 URL로 접속하면 설치화면이 뜨게 됩니다. 

설치를 마치면 URL 바로 옆에 선글라스를 낀 아이콘이 생성이 되는데요. 

아이콘을 누르면 다양한 디바이스로 이동할 수 있는 메뉴들이 나옵니다.


 iOS > iphone6 를 누르시거나 Android > Android KitKat을 누르시면 되는데 

저 같은 경우에는 iphone6로 확인하는 편입니다. 


핸드폰으로 확인을 하지 않더라도 크롬에서 빠르게 확인할 수 있는데 

단지 핸드폰에서 보여지는 웹 화면 사이즈에 그대로 출력하는 지라 

핸드폰 화면에 맞춰 창크기를 줄여야하는 번거로움이 있습니다. 




2. 오페라 모바일 에뮬레이터

(https://www.opera.com/ko/developer/mobile-emulator)



위 방법이 크롬에서 확인할 수 있는 방법이라면 아래 방법은 프로그램을 아예 다운받아 사용할 수 있는 방법입니다. 


위 URL로 접속하시면 다운로드를 받을 수 있는 창이 뜨는데요. 

해당 창에서 운영체제(윈도우/맥/리눅스)에 맞게 다운로드받아주시고 설치를 하면 바탕화면에 해당 아이콘이 생성됩니다. 


프로그램에 접속하면 어느 모바일로 접속을 할지 선택창이 뜨게 되는데요. 

사이즈를 모른다면 custom을 선택하시고 Launch를 누르시면 해당 화면으로 넘어가게 됩니다. 


주소 입력 창에 만든 웹페이지를 드래그해서 넣으면 빠르게 모바일용으로 구현확인이 가능하죠. 




+


그 밖에 인터넷으로 접속해 확인하는 방법으로는 트로이(http://troy.labs.daum.net/) 사이트에 접속하여

디바이스 선택 후 확인하는 방법이 있습니다만 (이것도 크롬개발자도구때와 같이 사용목적이 달라서 저는 쓰고 있지 않습니다.) 

필요하신 분들은 해당 부분은 참고해두셔도 좋을 것 같습니다. 

 이전에 썼던 스크립트들을 정리하다가 만들어둔 팝업창을  Esc키로 끄는 구문을 다시끔 보게됐는데,

 그때는 스크립트를 넣기만 했었지 따로 소스를 자세히 볼 생각을 못했어서 이번 기회에 구문을 다시

 보면서 다시끔 공부를 하는 기분이 들었습니다.




 Esc로 팝업창을 닫는 스크립트는 아래와 같습니다.





 (이 아래 내용은 제가 공부 겸 메모로 적어놓은 구문풀이 내용임을 참고부탁드립니다)


 변수 key값이 e.keyCode ? e.keyCode : e.which; 구문 형태를 띄고 있는데,

 해당 구문은  조건부(삼항) 연산자로 e.keyCode가 true면 e.keyCode가 실행, false면 e.which가 실행된다고 합니다. 


조건부(삼항) 연산자는 if..else문의 단축형으로

 if..else문을 사용하면 너무 복잡해지는 식에서 사용된다고 하는데 

매번 보기만 해왔었지 이게 무슨 구문일지를 생각해오지 않았었다는게 다시끔 안습... 


(여기서 event.which는 키보드 키 또는 마우스버튼이 이벤트에 대해 눌러졌는지 반환합니다.)


if문에 쓰인 27의 경우는 keycode table에서 27이 Esc를 의미하기에 쓰인 값이며,

unbind는 이전에 연결된 이벤트 핸들러를 요소에서 제거하는 때에 쓰이는 메서드로 쓰인다고 하네요.



* 팝업 : https://codepen.io/tamak/pen/nquir?page=1&



[javascript] input에 숫자만 입력하기


input을 코딩할 때,  input type을 tel로 잡으면 숫자만 입력되겠지 하는 안일한 생각을 하던 때가 있었습니다.  

tel이 사용자로부터 입력되는 데이터가 전화번호일때 사용되는 type이라는 내용설명을 제멋대로 생각해버린 실수였었는데요.


( tel = 전화번호쓸 때 쓰는거 = 숫자만 입력되는거 라고 생각했던 탓이었죠;; )


input에 숫자만 입력하기 위해서는 숫자만 입력할 수 있도록 

javascript를 코딩해야한다는 걸 뒤늦게 알고 쓰기 시작했는데 해당 스크립트는 아래와 같습니다.







input에 들어가는 onkeydown과 onkeyup은 onkeypress와 같은 역할을 하고 있는데, 

다른 점이 있다면 shift와 enter 키를 인식하지 못하는 onkeypress와는 달리 

onkeydown과 onkeyup은 shift, alt, control, capslock 등의 키도 모두 인식이 가능하다는 점이죠. 

(한영변환,한자 등의 특수키는 인식하지 못합니다.)


- onkeydown : 키보드자판 누를때 발생하는 이벤트

- onkeyup :  키보드자판을 눌렀다 뗄 때 발생하는 이벤트



javascript 내용을 보시면 if구문에 숫자들이 열거되어 있는 부분을 볼 수 있는데, 

이 숫자들은  키코드값으로 각각의 숫자들이 키코드값을 의미합니다. 


예를 들어, 48은 숫자 0, 57은 숫자 9를 의미합니다. 

code >= 48 && code <= 57 의 의미는 즉 숫자 0과 같거나 크거나 수자 9와 같거나 작은 것을 의미하게 되겠죠.


해당 키코드값은 아래 url에서 확인해보실 수 있습니다.

* keycode table : http://www.foreui.com/articles/Key_Code_Table.htm



 아, 그리고 모바일에서는 javascript를 적용하지 않아도 input type을 tel로 적용해두면 

숫자만 입력이 가능하다하니 이 부분 참고하시면 좋을 것 같습니다.