[javascript] 자동롤링되는 실시간검색어 만들기


데이터를 입히기 전, 자동롤링이 되는 실시간 검색어를 만들어보려합니다. 

일반 포털사이트(네이버,다음,네이트)같은 실시간 검색어창이 아니라 심플하게 단순한 한줄자리로 만들어보았는데요. 


먼저 </head> 안에 제이쿼리 스크립트를 넣어주세요. 




그다음, <body>에 해당 예제 뼈대를 만들어주시구요.





css로 디자인해주세요. <style></style>사이로 소스를 넣어주셔도 됩니다.

글꼴을 이쁘게 만들고 싶어서 나눔스퀘어 폰트를 넣었습니다만 취향에 따라 글꼴을 다르게 설정하셔도 됩니다.





마지막으로 <script></script> 사이로 스크립트를 넣어주시면 완성입니다.





완성화면은 아래를 참고해주세요.

jsfiddle에 소스를 넣었더니 스크립트가 잘 먹히지 않아서 html 안으로 넣은 점 참고 부탁드립니다.







[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&