ajax 동기식은 진정한 동기 방식이 아니다


안녕하세요.
고코더 입니다.



요즘은 백엔드와 프론트로 나눠져 있는 웹생태계 덕분에 ajax 사용이 많아졌습니다. 거의 필수적인 함수 입니다. 저도 처음 ajax를 만나고 이렇게 자주 사용할줄은 몰랐네요. 

 1. 그런데 ajax에 보면 항상 보이는 옵션이 있습니다. async 라는 옵션입니다. 많은 분들이 이 옵션으로 동기,비동기를 처리할 수 있는걸로 알고 있습니다. 하지만 맞는 말이기도 하고 틀린 말이기도 합니다. 사실 ajax 자체가 비동기 처리를 위해 사용되는건데 동기로 지정한다는게 약간 어불성설 같습니다. 




 2. 우선 사용법은 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script type="text/javascript">
var arryData = [];    //배열을 선언
 
    node = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
 
    node = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(node);    //배열을 unshift 맨 앞에 넣는다
 
 
    node = {
        "name"    :    'gc',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
    for (var i = 0; i < arryData.length; i++) {
        document.write(arryData[i].name);
        document.write(' , ');
        document.write(arryData[i].url);
        document.write('<br>');
    }
</script>
</head>
 
</html>
cs

 3. 그래서 해당 jqery 함수 설명을 찾아보았습니다.  결론적으로 ajax는 기본적으로 비동기를 사용하고 도메인간 요청이나 jsonp 와 같이 동기로 처리해도 소용 없는 것들은 자동으로 비동기로만 지원한다고 합니다. 그리고 그외에 동기 요청 할때는 브라우저를 일시적으로 잠궈서(Lock)을 걸어서 동기 처리를 한다고 하네요. 결론은 ajax가 처리하는 우리가 아는 동기 프로세스라기 보다는 일시중지를 이용하는 방식입니다.



마무리


ajax로 된 결과 값을 순차적인 로직에 담아야 한다면
sync : false 를 이용해서 동기처리를 활용하세요.










댓글을 달아 주세요


trigger() vs prop() ? select


안녕하세요.
고코더 입니다. 


자바스크립트로 셀렉트 박스를 선택을 변경하는 개발을 할때 유의할 점이 있습니다. 지난 시간에 prop()과 trigger()을 각각 이용하여 셀렉트 박스의 옵션을 변경하는 방법을 배워 봤는데요.
이번 시간에는 이 두개의 차이점을 설명하려고 합니다.



 1. trigger vs prop 


각 함수로 select 박스 옵션을 변경할때 용도를 정리해보겠습니다.

tirigger() :  사용자가 셀렉트 박스를 변경할때와 같이 이벤트를 발생시키고 싶을때 
prop() :  사용자에게 화면에만 해당 옵션을 보여줄때 이벤트가 발생하지 않음 

셀렉트 박스에서 chage 이벤트가 있다면 트리거를 사용해야 하며  그저 상태값만 이동 시키고 싶다면 prop을 이용합니다. 


 2. 예제


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function triggerChagne(){
    $("#gocoder").val('g').trigger('change');
}
function propChagne(){
    $("#gocoder").val("c").prop("selected"true);
}
function Chagne(){
    alert("변경됨");
}
 
</script>
</head>
<body>
 
     <select id="gocoder" onchange="Chagne()">
        <option value="">셀렉트박스 선택</option>
        <option value="g">Go</option>
        <option value="c">Coder</option>
     </select>
 
    <input type="button" onclick="triggerChagne();" value="trigger 셀렉트 박스 선택" />
    <input type="button" onclick="propChagne();" value="pro 셀렉트 박스 선택"  />
      
</body>
</html>
cs


예제에는 select 박스에 변화가 일어나면 이벤트를 발생시킬 수 있도록  change() 이벤트를 주었습니다. 
tirgger 버튼을 누르면 change() 이벤트가 발생하여 경고창이 발생합니다.

하지만 pro 버턴은 그저 셀렉트 박스 변경만 일어나고 change() 옵션을 체크하지 못합니다.


마무리


차이점이 후배님 명확하죠?
(후배가 물어봐서 글을 남겼습니다.)

댓글을 달아 주세요


prop()을 사용해 select 상태만 변경하기


안녕하세요.
고코더 입니다.



이번 시간에는 prop으로 셀렉트 박스의 상태 값을 변경하는 방법을 알아보겠습니다.
트리거는 사용자의 이벤트를 대신하는 느낌이라면 
prop은 현재의 화면에 보여주는 옵션 상태 값을 변경 합니다. 
가장 큰 차이는 change() 값에 바인딩 되지 않습니다

 1. 아래 소스를 한번 웹에서 보겠습니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function propChagne(){
    $("#gocoder").val("c").prop("selected"true);
}
 
</script>
</head>
<body>
 
     <select id="gocoder">
        <option value="">셀렉트박스 선택</option>
        <option value="g">Go</option>
        <option value="c">Coder</option>
     </select>
 
    <input type="button" onclick="propChagne();" value="pro 셀렉트 박스 선택"  />
      
</body>
</html>
cs

gocoder_propSelect.html


 2. 해당 파일을 웹에서 실행하신 다음 버튼을 클릭 합니다. 

 3. 그러면 왼쪽에 셀렉트 박스가 변경되어 있는걸 확인할 수 있습니다.  prop으로 할경우 방문자에게 특정 셀렉트 박스를 보여주고 싶지만 이벤트 발생이 되지 않을때 사용하면 좋습니다.


마무리


이벤트 종류가 많은 이유가 있습니다.

댓글을 달아 주세요


자바스크립트 트리거를 활용해 셀렉트박스 선택 값 변경


안녕하세요.
고코더 입니다.



자바스크립트로 프론트를 개발할때 특정 조건에 맞쳐 셀렉트 박스를 변경해야 하는 경우가 있습니다.
이때 사용자 대신 셀렉트 박스를 변경하고 싶다면 트리거를 사용하면 됩니다. 

 1.우선 아래 예제를 함께 살펴보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function triggerChagne(){
    $("#gocoder").val('g').trigger('change');
}
</script>
</head>
<body>
    <select id="gocoder">
        <option value="">셀렉트박스 선택</option>
        <option value="g">Go</option>
        <option value="c">Coder</option>
     </select>
</body>
</html>
cs

 1.해당 파일을 실행하면 화면과 같은 모습이 보입니다. 버튼을 클릭하면

 2.왼쪽 select box 가 변경 됩니다. 
$("#gocoder").val('g').trigger('change');
이 명령어가 해당 value 값을 가진 박스로 선택해주기 때문입니다.
트리거를 활용하면 chage 이벤트로 바인딩 됩니다.


마무리


트리거만 잘사용해도 편합니다.











댓글을 달아 주세요


슬라이드 쇼 애니메이션 가장 쉽게 구현 가능한 플러그인 


안녕하세요.
고코더 입니다. 


슬라드 쇼를 하는 기능에 플러그인은 참 많습니다.
많은 개발자들이 저마다에 방식으로
만들어 놓았습니다.


 1. 그런데 이번에 소개할 슬라이드 쇼 HTML은
가장 간단하게 구현 가능한 플러그인을 소개해드립니다. 
바로 COIN SLIDER 입니다.


 2. 얼마나 간단한지
제가 예제를 한번 만들어 보았습니다.

아래 코드를 참조해주세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/coin-slider/1.0.0/coin-slider.js"></script>
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/coin-slider/1.0.0/coin-slider-styles.css" type="text/css" />
 
<script type="text/javascript">
    $(document).ready(function() {
        coinslider({width:260,height:146,navigation:true,hoverPause:true,delay:1500,effect:'rain',sDelay:30});
    });
 
</script>
 
<Body>
 
<div id='coin-slider' >
    <a href="이미지 링크" target="_blank">
        <img src='이미지 주소' >
        <span>
        
        </span>
    </a>
    <a href="이미지링크" target="_blank">
        <img src='이미지 주소' >
        <span>
        
        </span>
    </a>
</div>
</body>
cs

 3. 이렇게만 하면 퀄리티 높은 슬라이드 애니메이션 
HTML이 완성 됩니다.
결과물은 제 블로그 오른쪽 아래에
파워블로거 활동이 슬라이드가 자동으로 되는데요
이 플러그인을 활용여 개발하였습니다.



 4. 그리고 해당 플러그인 안에 넣을수 있는
옵션 사항으로는 
아래를 참조해주세요.
$.fn.coinslider.defaults = {
    width: 565, // width of slider panel
    height: 290, // height of slider panel
    spw: 7, // squares per width
    sph: 5, // squares per height
    delay: 3000, // delay between images in ms
    sDelay: 30, // delay beetwen squares in ms
    opacity: 0.7, // opacity of title and navigation
    titleSpeed: 500, // speed of title appereance in ms
    effect: '', // random, swirl, rain, straight
    links : true, // show images as links
    hoverPause: true, // pause on hover
    prevText: 'prev',
    nextText: 'next',
    navigation: true, // show/hide prev, next and buttons
    showNavigationPrevNext: true,
    showNavigationButtons: true,
    navigationPrevNextAlwaysShown: false
};


마무리


블로그에 쓰기 딱 좋은 슬라이드 html 플러그인 


댓글을 달아 주세요


디자인 요소의 크기 변경


안녕하세요.
고코더 입니다.


jQuery에서는 선택한 요소의 크기의 값을 알거나
변화 시킬 수 있습니다. 

1. 바로 width()와 height() 메서드 입니다.
width() - 선택요소의 가로 크기를 가져오거나 변경한다.
height() - 선택요소의 세로 크기를 가져오거나 변경한다.

style 속성에 접근하지 않아도
간단한 명령어로 크기를 조절 가능 합니다. 

 2. 예제를 한번 살펴보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
 
      $(document).ready( function() {
        //해당 DIV 사이즈 조정
        $('#gocoder_size').width('300');
        $('#gocoder_size').height('300');
 
        alert($('#gocoder_size').width());
        alert($('#gocoder_size').height());
      });
 
    </script>
</head>
<body>
    <div id="gocoder_size" style="height:50px; width:50px;background-color: #000000">
    
    </div>
</body>
</html>
cs

gocoder_size.html



 3. 가로 세로 50px 크기를 
300PX로 바꾸고 해당 크기를 경고창으로 보여줍니다. 


아래 코드는 사이즈를 변경 시켰고
$('#gocoder_size').width('300');

아래 코드는 사이즈 정보를 가져왔습니다.
$('#gocoder_size').width();

 4. 실무에서 자주 사용하는 기능입니다.
저는 제 홈페이지 전자책 뷰어를 만들면서
전자책 디바이스의 해상도에 따라
뷰어 크기를 조정할 수 있게 하기 위해 사용하였습니다.



마무리


jQuery 사랑함






댓글을 달아 주세요


제이쿼리 이미지 드래그 드랍, 사이즈 조절


안녕하세요.
고코더 입니다.


jQuery UI를 쓸때 가장 많이 활용하게 되는
기능이 두가지가 있습니다.
바로 이미지 드래그와 리사이징 입니다. 

레이어 팝업을 만들거나
사용자에게 크기를 조절하게 
편의를 제공 하는 기능은 많이 씁니다.

그래서 이번 시간에
제이쿼리를 이용해 드래그와 리사이징을 동시에 배워보겠습니다.

1. 아래 소스를 웹사이트에서 실행해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#GoCoderImg1').resizable();        
            $('#GoCoderImg2').draggable();        
        });
    </script>
</head>
<body>
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg1">
    <img src="https://t1.daumcdn.net/cfile/tistory/234774445960F69422" id="GoCoderImg2">
</body>
</html>
cs

gocoder_resizable_draggable.html


 2. 하나는 사이즈 조절이 가능하고
다른 하나는 드래그 드랍으로 이동이 가능 합니다. 



마무리


jQuery 덕분에 많은게 가능해졌네요


댓글을 달아 주세요


Div 반짝 거리게 하기 


안녕하세요.
고코더 입니다.


Div안에는 많은 것들을 담습니다.
사이트는 강조해야 할 Div가 존재하게 됩니다.

1. 얼마전에 만든 제가 만든 QR코드 만들기 사이트에
접속시에 해당 네모 DIV안에 이미지가 나타난다고 
알려주고 싶더군요


그래서 알아본 결과
jQuery UI에 제공하는 간단하고
강력력한 기능인 effect를 사용하는 방법이 있습니다.


 2. 아래에 코드를 웹에서 실행해보세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>    
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <script>
        $( document ).ready(function() {
            $('#GoCoderDiv').effect("highlight"1000);        
        });
    </script>
</head>
<body>
 
        <div id="GoCoderDiv">
            DIV 강조
        </div>
 
</body>
</html>
cs

 3. 아래처럼 Div가 강조되고 효과가 사라집니다.



마무리


사용자를 위한 개발자 배려


댓글을 달아 주세요



오른쪽 화면 위에 나타나는 javascript 네모난 팝업 레이어 박스 


안녕하세요.
고코더 입니다.


예전에 팝업 하면 무조건
window.open 을 통한 브라우저 자체 내장객체를 사용했습니다.
그런데 요즘은
반응형 이슈와 스마트폰에서 팝업을 무조건 막는 정책때메
레이어 팝업을 많이 사용 합니다.

이 layer 팝업중 가장 깔끔한 플러그인을 소개 해드릴려고 합니다.

▼직영하면  j 으르렁 대다 인가 ㅎㅎ

▼ 고코더 방문자와 구독자를 위해
직접 간단하게 코드를 작성했습니다.
그대로 HTML을 실행하면 화면이 실행 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>
<script type="text/javascript">
$.jGrowl("간단한 팝업,
고코더넷(gocoder.net),
IT익스프레스 (gocoder.tistory.com)", {
    life:1000,    //공지가 떠있는 시간 1000가 1초
    click: function(msg) {    //클릭시 이벤트를 만들 수 있다.
        alert("클릭시 이벤트");    
    },
    beforeOpen: function(e,m,o) {
        console.log("팝업창이 열리기 전", this);
    },
    open: function(e,m,o) {
        console.log("열렸을때", this);
    },
    beforeClose: function(e,m,o) {
        console.log("닫히기 전에", this);
    },
    closefunction(e,m,o) {
        console.log("닫혔을때", this);
    },
    animateOpen: {    //열렸을때 애니메이션
        height: "show",
        width: "show"
    },
    animateClose: {    //닫힐때 애니메이션
        height: "hide",
        width: "show"
    }
});
</script>
cs
▼ 결과 모습입니다.
요즘 홈페이지에서 유행처럼 쓰는 플러그인 입니다. 



▼ 해당 3개의 참조와
1
2
3
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.6/jquery.jgrowl.css"/>
cs
▼ 이 스크립트 한줄만 필요 합니다. 
$.jGrowl("간단한 팝업,고코더넷(gocoder.net),IT익스프레스 (gocoder.tistory.com)");

사용법도 간단하고 기능이 안정적입니다.


마무리


홈페이지의 공통으로 사용하는
팝업이 필요하면 이게 딱이네요




댓글을 달아 주세요


jquery img src selector


안녕하세요.
고코더 입니다.


개발을 하던 중에 이미지의 src 속성 
이미지의 주소를 선택하여 수정할 일이 생겼는데
쓸모가 많은 방식인거 같아 
블로그를 남겨드립니다.

제이쿼리에서 img의 src 속성으로 당연히 선택을 할 수 있습니다.
제 블로그에 있는 이미지 주소를 사용해 말씀드리겠습니다.

https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg


▼ 이미지 src를 선택하는 3가지 방법입니다.

1
2
3
4
5
6
7
8
9
10
11
1. 이미지 주소 전체를 넣어 검색
    - 하나의 이미지만 선택할때 유용 합니다.
    ex) $("img[src='https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg']")
2. 이미지 주소 앞 에서부터 매칭.
    - 같은 폴더 기준이나 같은 URL의 이미지만 선택할때 유용 합니다.
    ex) $("img[src='https://tistory1.daumcdn.net']")
 
 
3. 이미지 주소 뒤 에서부터 매칭.
    - 이미지 파일명을 사용하여 선택할때 유용 합니다.
    ex) $("img[src$='epantheo.jpg']")
cs

▼ 제가 작성한 예제 파일도 한번 확인해보세요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script>
    function src_selector1(){
      $("img[src='https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg']").css("width","200");
    }
    function src_selector2(){
      $("img[src^='https://tistory1.daumcdn.net']").css("width","300");
    }
    function src_selector3(){
      $("img[src$='epantheo.jpg']").css("width","400");
    }
    </script>
</head>
<body>
    <img src="https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg" width="100">
    <br>
    <input type="button" onclick="src_selector1();" value="src 전체 이름으로 선택">
    :: https://tistory1.daumcdn.net/tistory/2778128/skin/images/epantheo.jpg
    <br>
    <input type="button" onclick="src_selector2();" value="src 앞에서부터 검색으로 선택">
    :: https://tistory1.daumcdn.net
    <br>
    <input type="button" onclick="src_selector3();" value="src 뒤에서부터 검색으로 선택">
    :: epantheo.jpg
    <br>
</body>
</html>
cs

▼ 웹상에서 확인한 화면 입니다. 


특정 이미지만 선택하여
작업이 필요할때 src로 선택하면 다른 CSS의 속성과 얽히지 않게 코딩이 가능합니다.



마무리


블로그 스킨 수정할때 딱 좋더라고요


댓글을 달아 주세요