기타치는 개발자의 야매 가이드

오브젝트를 생성하고 특정 데이터의 개수에 따라

속성을 추가적으로 생성해야 하는 경우가 있으나 

속성의 이름을 지정하지 못해 곤란해 했던 경우가 있다.

일반적인 오브젝트의 속성 추가는

위와 같이 이루어 지지지만 데이터의 개수만큼 time뒤에 들어가는 숫자가 바뀌어야 한다면

아래와 같이 작성을 해주면 된다.

자바스크립트로 화면을 구현하다 보면 같은 행동을 반복하게 하는 애니매이션이나 로직을 구현해야 하는 경우가 종종 생긴다.

간단한 예로 디지털 시계 같은걸 구현한다던가 

매시간마다 데이터를 계속해서 요청을 한다던가

이럴때 setInterval 함수를 사용한다.

방법은 간단하다.

setInterval(실행할 function이름,반복할시간단위);

ex) setInterval(getChartData,1000);

getChartData라는 펑션을 1초마다 반복한다는 것이다.

getChartData 대신에 펑션을 직접 입력해도 된다

setInterval(function(){

alert('1초가 지났어요');

},1000);

위처럼 해도 무방하다

추가로 반복을 멈추고 싶을땐

var interval = setInterval(getChartData

,1000);

위와같이 선언후 실행하다

멈추고 싶을떄

clearInterval(interval);

해주면 된다.

/*-----------------------------------------<create PopUp> ---------------------------------------------*/

 $(".layerPopup").click(function (event){ // 버튼 클릭시 실행 이벤트

  var height=0;

  var width=0;

// var cssUri = $(this).attr("data-css");

 var mappingUri = $(this).attr("name"); //클릭한 객체의 name값에 요청할 URL을 미리 넣어놓고 사용

//  alert(mappingUri);

     var s_w =$(document.body).width();

     var w=500;

     var left = s_w/2 - w/2;

     if(s_w/2 < w/2)

     left=0;

     // create wrapper

     var wrapper=$("<div />");

     wrapper.css({

    width:"0px",

    height:"0px",

    border:"2px solid #000",

    background:"#fff",

    position:"absolute",

    left: left,

    top:"100px",

     });

     var screenH = $(document).height();

     // create screen & run animation

        var screen = $("<div />");

        screen.css({

           width:"100%",

           height:screenH,

           background:"#000",

           position:"absolute",

           left:"0px",

           top:"0px",

           opacity:"0",

            zIndex:22

        }).animate({opacity:"0.5"},500,function(){

        $(document.body).append(wrapper);

        // setting CSS

           var link = document.createElement("link");

            link.setAttribute("rel","stylesheet");

            link.setAttribute("type","text/css");

          //  link.setAttribute("href", cssUri);

            document.getElementsByTagName("head")[0].appendChild(link); 

          //  alert(mappingUri);

            // Load popUp Page

            wrapper.load(mappingUri,function(){

            // load popUp Page's size

                var first=wrapper.children("div").eq(0);

                console.log(first);

                 width= first.outerWidth();

                 height = first.outerHeight();

                 console.log(width);

             left = s_w/2 - width/2;

             if(s_w/2 < w/2)

             left=0;

                 screen.attr("id","screen");

                 wrapper.attr("id","newWapper");

                 wrapper.animate({

                 width:width,

                 "z-index":"23",

                 left:left

                 },500)

                 .animate({

                     height:height

                     },500);

                 // remove popUp Page&screen

              $("#screen").click(function(){

             wrapper.animate({

                     width:"0px"

                     },500)

                     .animate({

                         height:"0px"

                         },500,function(){

                         screen.animate({

                             opacity:"0"

                             },500);

                         wrapper.detach();

                         screen.detach();

                         });

            });

             });

        });

        $(document.body).append(screen);

        // resizing

        $(window).resize(function() {

        s_w =$(document.body).width();

         var left = s_w/2 - w/2;

         if(s_w/2 < w/2)

         left=0;

           wrapper.css({left: left });

      });

     });

/*-----------------------------------------</create PopUp> ---------------------------------------------*/

ajax를 사용해 화면을 전환하거나 페이지를 이동하는 경우

생각치 못했던 문제에 봉착했다

뒤로가기가 안된다는것!!!!!

사이트 내부를 이리저리 왔다갔다 하다 뒤로가기를 눌럿는데 바로 메인으로 점프 해버리는 상황이 발생한 것이다.

그렇다고 전부 갈아 엎어버릴수도 없고 이것저것 찾아보던 와중

해쉬뱅(hashbang) 이라는 것과 Pjax 라는 것을 발견했다

어떻게 사용해야 하는지 이리저리 블로그를 뒤져보고 스택오버플로우를 뒤져봐도

당췌 어떻게 사용해야 하는지 모르다가 클라이언트 쪽의 대리님의 도움으로 어느정도 감이 잡혔다.

그리고 나는 야매개발자 답게 제대로된 해쉬뱅이나 pjax방법을 사용하지 않고 꼼수를 부렸지만

해결은 했다 

먼저 해쉬뱅은 URL에 #! 을 붙여서 (앵커라고 하는것 같다) 사용 하는 방법인데 이해도 못하겠고

URL창이 지저분해 보여 패스하고 

history.pushState를 사용하는 방법을 이용했다.

전자의 경우 어느정도 브라우저에 자유로운 방법이고

후자는 익스플로러 10 이상 버전과 파폭 크롬에서만 동작 하는 방법이다

다행이도 클라이언트가 익스플로러는 최신 버전을 사용한다고 하여 마음 놓고 사용할 수 있었다.

방법은 간단하다!!!

history.pushState(데이터,타이틀,URL);

history.pushState를 사용하는 방법인데 

원래대로 라면 저기에 html데이터라든지 URL을 넣는다는지 하는 방법을 사용하지만

제대로된 사용법을 알기엔 경험과 능력이 미천하여 꼼수를 부렸다

저 히스토리에 데이터 라고 써있는 인자를 

var data = event.originalEvent.state;

이것으로 불러 올 수가 있는데 이 방법을 응용했다

일단 

페이지가 이동하는 이벤트에 

history.pushState(데이터,타이틀,URL); <- 데이터 부분에 Ajax로 요청하는 URL을 넣는다

그러면 페이지를 이동하는 이벤트가 발생할때마다 히스토리에 URL이 쌓이게 된다.

아래 펑션은 브라우져에서 뒤로가기나 앞으로 가기 이벤트가 발생했을때 실행되도록 하는 함수이다

$(window).bind("popstate", function(event) {

    var data = event.originalEvent.state;  // 이부분으로 뒤로가기 할때마다 아까 저장한 히스토리 스택에 쌓인 URL을 불러 온다

    if(data){ // 데이터가 있으면 해당 데이터를 ajax로 다시 요청해 화면에 뿌려준다!!!!

// 아래 코드는 필자가 켄도UI의 스플리터기능으로 화면을 뿌려주기에  작성한 것이다

// 다른 사람들은 각자 화면을 요청하는 AJAX펑션을 넣으면 되겠다.

    var splitter = $("#layout-vertical").data("kendoSplitter");

splitter.ajaxRequest("#article-pane",data);

    }

    else{

    // 히스토리에 정보가 없을경우 메인화면으로 보내준다.

    var url = "/메인화면";    

    $(location).attr('href',url);

    }

아주 간단하게 해결이 되었다!!!!

주의할점은 

if(data){ // 데이터가 있으면 해당 데이터를 ajax로 다시 요청해 화면에 뿌려준다!!!!

// 아래 코드는 필자가 켄도UI의 스플리터기능으로 화면을 뿌려주기에  작성한 것이다

// 다른 사람들은 각자 화면을 요청하는 AJAX펑션을 넣으면 되겠다.

     var splitter = $("#layout-vertical").data("kendoSplitter");

splitter.ajaxRequest("#article-pane",data);

    }

이부분에서 화면이동 하는 펑션으로 보내주는 경우 그 펑션엔

history.pushState(데이터,타이틀,URL);

이게 없어야 한다

이유는 뒤로가기를 했는데 거기다 또 히스토리에 뒤로가기한 URL을 저장해 버려 꼬이는 경우가 생기기 때문이다.

제 포스팅이 도움이 되었나요? 

그렇다면 공감하기 한번 눌러주세요 블로거에게 큰 힘이 됩니다

문자열을 자르기가 있다는걸 알고 있지만

함수 이름은 너무나도 잘 잊어먹게 된다. 

그리고 아주 자주 사용하는 함수이고 매우 유용한 함수이다 

var string = 'hello yamea programer'

var strArr = string.split('-');

문자열에서 - 라는 문자를 기준으로 잘라서 배열로 담는다.

string.substring(시작인덱스,끝인덱스);

첫글자는 0이다

string.substr(시작인덱스,길이)

위와 동일하지만

시작인덱스 부터 길이 만큼 자른다는 것

자바스크립트를 사용하면서 문자열에 데이터를 넣다보면 특수문자 때문에 구글링은 하는 경우가 많다.

이 포스팅을 보는 당신도 바로 그와 같은 경우겠지 

어디서 퍼와서 어딘가에 저장했던 글인데 어디서 퍼온건지 기억이 안나지만 저위에 아이디가 있는걸 보아 저분이 

작성하신 글인거 같다.. 블로그 하기 전에 복사해서 보관하던 건데

혹시나 저분이 이 포스팅을 언짢아 하신다면 바로 내리고 사과하겠습니다.

포스팅이 도움이 되셨다면 마우스를 조금만 움직여서 

공감하기를 눌러주세요 블로거에게 큰 힘이 됩니다~!