개발자 도담씨

이번엔 오랜만에 자바스크립트에 관련 된 개념을 가져왔다 ;D Debound와 Throttle이라는 친구들이다. 마켓팅 부서에서 사용자들이 페이지 스크롤을 얼마나 내려보는지 알고싶다해서 scroll event를 추가하던중에 만나게됐다.🖐 . . . [ Throttle ] Throttle을 검색해보니 뜻은 "조절판"이라고 되어있었다. 역시 이름을 참 잘 짓는 것 같다 :D Throttle은 이벤트를 일정 주기마다 발생하도록 만들어주는 친구다. 위에서 적었다 시피 난 스크롤 이벤트를 발생 시켜야했는데 window에 scroll 이벤트를 추가하니 스크롤 할 때 마다 이벤트가 발생하게 되면서 엄청난 양의 이벤트가 만들어 졌다. 이럴때 throttle을 사용하게 되면 일정시간 마다 스크롤이 발생하게 되니 부하가 덜..

깃허브나 나무위키의 비교처럼 이전버전과 현재버전을 차이를 표시하는 라이브러리를 하나 가져왔다. 사실 php로 직접 만들어볼려고 발버둥치다가 60%까지 했는데 또또 똑같이 정리안하고 멘땅에 해딩하다 엎었다 ;( 추후에 한번 만들어봐야겠다. ( 이러고 또 안한다? ) 소개할 라이브러리는 jsdifflib라는 친구다. 어느곳이나 그렇듯 깃허브에 설명이 되어있지만 ( 물론 영어로 ) 다음에 편하게 사용하기 위해 사용법을 정리하려한다. 해당 깃허브에서 JavaScript와 css를 댕근 다운받아 import 해줘야한다. // IF( viewType == 0 ) // 두창을 두고 양쪽 비교 // ELSE IF ( viewType == 1 ) // 창하나에 달라진 부분 표시 function diffUsingJS(vi..

포트폴리오를 만들때 보통 이메일 주소를 적어 놓는데... 항상 이메일을 그냥 보낼 수 있도록 하고싶은데 고작 포폴에 이기능 넣자고 php나 jsp의 백단을 구축해서 서버를 24시간 돌리고 싶진 않아서 구글링 하던중 찾은 emailJS라는 친구를 오늘 한번 소개해보려한다. https://www.emailjs.com/ Send email from Javascript - no server code required | EmailJS Send email directly from your client-side Javascript code – no server side code required. Add static or dynamic attachments, dynamic parameters, captcha code ..

Node.js라는 친구를 소개하고 멀티 채팅 구현글을 임시 저장해놓고 시간이 없다는 핑계로 일주일을 방치했더니 날아가버려서 다시 쓴다^^... 정리 잘해놨는데... 참고 블로그 - https://jinblog.kr/156 Socket.IO 문서 - https://socket.io/docs/ Node.js로 실시간 멀티채팅을 하기위해 뒤져보니 socket.io라는 친구가 필요했다. socket.io가 뭐야? 하고 검색을 해보니 웹소켓을 기반으로 실시간 웹 기술을 모아 하나의 API로 만든 Node의 모듈이다. 브라우저와 웹 서버의 종류, 버전을 파악해 기술을 선택해서 브라우저의 호환성은 좋은듯 하다 :) 신기해 계속 이어서 또 웹 소켓에 대해 검색 해봤다. 소켓을 검색 해보니 "응용 프로그램에서 TCP/I..

회사에서 만든 페이지의 디자인을 비슷하게 카피한 웹사이트가 나오면서 개발자분이 스크립트를 막아야겠다 하길래 궁금해서 검색해본 코드 :D 나중에 슬쩍 어떻게 한건지 물어봐야겠다. 우선 검색해서 찾아 놓은 코드이다. //개발자 도구 막기 $(document).ready(function(){ $(document).bind('keydown',function(e){ if ( e.keyCode == 123 /* 키코드 123 = F12 */) { e.preventDefault(); e.returnValue = false; } }); }); //우클릭 막기 document.onmousedown=disableclick; function disableclick(event){ if (event.button==2) { re..

저번에 포스팅 한거같은데..아닌가보다. 못찾겠다😋 요즘 웹사이트를 보면 스크롤에 따라 이벤트로 애니메이션을 준 것을 많이 볼 수있다. 예를 들면 LG그룹 홈페이지나, 스타벅스만 봐도 알 수 있다. 아래는 자바스크립트 코드다 :D /*스크롤에 반응하는 박스*/ $("#page .page_event_box").each(function(){ var box_offset=$(this).offset(); var box_top=box_offset.top; //if(window_scroll_top+window_height-50>box_top){$(this).addClass("active");} if(window_scroll_top=box_top){$(this).addClass("active");} //else $(th..

검색해보면 좋은 원페이지 스크롤 플러그인들이 많다... 잘 만들었지만.. 내가 원했던건 원페이지 스크롤과 일반 스크롤이 합쳐진 것.. 그러니까 원페이지로 잘 가다가 특정 부분에선 일반 스크롤이 되었으면 했던 것🤔 (할꺼면 다 똑같은 원페이지로 하지 ㅠㅠ) 유명했던 fullpage.js랑 하나 더 사용해봤지만 원페이지 스크롤에서 일반 스크롤로 넘어갈때 자연스럽지 않고 덜덜 거리는 현상이 생겨서 처음에 직접만들다가 실패하고 이번에 다시 차근차근 생각해서 만들어봤다. 매번 말하지만 아직 초보라 미흡한 부분이 많다. 피드백은 항상 감사하다 :) 전체 코드 ✌️ var total_section = 0; //전체 원페이지 수 var current_idx = 0; var screen_h = 0; // 화면 높이 va..

무한 스크롤을 검색 하니 대부분 전체 창에 대한 무한 스크롤 형식이 나와서 다음에 언젠간 또 검색하면서 찾을 태그의 무한 스크롤이니 포스팅으로 남겨 놓으려고 한다 ㅎㅎ... 회사 사수분이 사용하셨던 코드를 분석해보았다 :) // scroll $("#scroll_tag").scroll(function() { // 페이징을 위한 변수 ( *무시 해도 되는 부분 ) var page = $("[name='feed_page']").val(); var last_page = $("[name='feed_last_page']").val(); if(page == last_page) return; var innerHeight = $(this).innerHeight(); var scroll=$(this).scrollTop()..

자바스크립트 중 의사를 묻는 confirm boolean 형식의 return 값을 가지고 있다 :) var result = confirm('알림 문장'); if( result ) { // yes } else { // no }

제목에서도 적어 놨듯이 자바스크립트에서 클래스 패턴을 크게 3가지 알아 보려고한다!처음 디자인 패턴을 볼 때 인터넷에 있는 글을 프린트 해서 읽었었는데..정말 하나도 이해 못했었다...두번째 시도로 책을 읽고 공부한 것을 바탕으로 글을 쓰려고한다. 클래스 만드는 방법은 크게 오브젝트 리터럴 방식, 함수형 방식, 프로토타입 방식으로 총 3가지로 설명한다. 첫번째로 오브젝트 리터럴 방식부터 소개하겠다. 12345678var 인스터스 = { 프로퍼티: 초깃값, 메서드: function(){ }}cs 리터럴 방식은 객체 리터럴의 의미하는 { } 내부에 프로퍼티와 메서드를 정의하는 구조다.변수나 메서드를 만들때 ' : '을 사용하며 끝에는 세미콜론이 아닌 콤마( , )로 구분하니 주의 해야한다.리터럴 방식은 클래..