[WebPage] 실전 웹 프로젝트 구축 !!(Client Part 3) - 웹 페이지 제작 강좌

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8"/>
        <title>Timeline Example</title>
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
        <link href="timeline.css" rel="stylesheet"/>
        <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target="#navMenu"> <span class="icon-bar"> </span> <span class="icon-bar"> </span> <span class="icon-bar"> </span> </a>
                    <a class="brand" href="#"> TimeLine Service </a>
                    <div class="nav-collapse" id="navMenu">
                        <ul class="nav center">
                            <li>
                                <a href="timeline.html">Home</a>
                            </li>
                            <li class="active">
                                <a href="#">Profile</a>
                            </li>
                            <li>
                                <a href="account.html">Account</a>
                            </li>
                        </ul>
                        <div class="btn-group pull-right">
                            <a class="btn" id="adminBtn">
                                <i class="icon-pencil"> </i>
                                Admin
                                <span class="caret"> </span>
                            </a>
                            <a class="btn" id="logoutBtn">
                                <i class="icon-user"> </i>
                                Logout
                                <span class="caret"> </span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- End of Navbar -->
 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
        <script src="timeline.js"></script>
        <script src="base64.js"></script>
        <script>
            $(document).ready(function() {
 
            });
       </script>
    </body>
</html>
 
Colored by Color Scripter
cs

기본 틀을 잡았으므로, 몸체를 작성하도록 하겠습니다.

프로필 왼쪽 부분부터 작성하도록 하겠습니다. Navbar가 끝나는 부분에 작성하세요.

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
41
42
        </div><!-- End of Navbar -->
        <!-- Start Profile -->
        <div class="container bg">
            <!-- Start of Container -->
            <div class="row-fluid">
                <!-- Start of Row -->
                <div class="span4">
                    <!-- Start of Span4 -->
                    <div class="well sidebar_nav">
                        <a href="#" id="profile" class="thumbnail"> <img src="http://bit.ly/QyPwPM"/> </a>
                        <hr/>
                        <div>
                            <i class="icon-home"> </i> Seryu-dong
                            <br/>
                            <i class="icon-map-marker"> </i> Gwonseon-gu
                            <br/>
                            <i class="icon-globe"> </i> Suwon, Korea
                            <br/>
                        </div>
                        <hr/>
                        <ul class="nav nav-list">
                            <li class="active">
                                <a href="#"> <i class="icon-white icon-envelope"> </i> Contact Information </a>
                            </li>
                        </ul>
                        <form class="contact">
                            <br/>
                            <div class="alert alert-info">
                                <h4>Country: </h4>
                                <span>Korea, Republic of</span>
                            </div>
                            <div class="alert alert-danger">
                                <h4>Number: </h4>
                                <span>(031)000-0000</span>
                            </div>
                            <div class="alert alert-success">
                                <h4>Email: </h4>
                                <span>zhfldi4@gmail.com</span>
                            </div>
                        </form>
                    </div>
                </div><!-- End of Span4 -->
Colored by Color Scripter
cs

작성된 부분을 확인해 보도록 합시다.

다음으로는 프로필 오른쪽 부분을 작성하겠습니다. Span4가 끝나는 부분에 작성하세요.

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
        </div><!-- End of Span4 -->
        <div class="span8"><!--Start of Span8 -->
            <div class="editbtn">
                <a class="btn btn-large" id="editBtn">Edit Profile</a>
            </div>
            <div class="hero-unit heromargin">
                <h1 id="bigid"> </h1>
                <h3 id="bignickname"> </h3>
                <h2 id="bigcomment"> </h2>
            </div>
        </div><!--End of Span8 -->
        <div class="span8"><!-- Start of Span 8 -->
            <ul class="nav nav-list">
                <li class="active">
                    <a href="#">
                        <h4>Comment</h4>
                    </a>
                </li>
            </ul>
            <div class="inside">
                <input type="text" style="width: 98%" id="comment"/>
            </div>
        </div><!--End of Span8 -->
        <div class="span8"><!-- Start of Span 8 -->
            <ul class="nav nav-list">
                <li class="active"><a href="#">
                    <h4>Other Information</h4>
                </a></li>
            </ul>
            <div class="tabbable inside"><!--Start of Tabbable -->
                <ul class="nav nav-tab">
                    <li class="active"><a href="#tab1" data-toggle="tab">Summary</a></li>
                    <li><a href="#tab2" data-toggle="tab">Nickname</a></li>
                    <li><a href="#tab3" data-toggle="tab">Country</a></li>
                    <li><a href="#tab4" data-toggle="tab">WEB</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active center" id="tab1">
                        <span class="label label-info" id="labelnick">
                            Nickname
                        </span>
                        <span class="label label-success betwwen" id="labelcountry">
                            Country
                        </span>
                        <span class="label label-important between" id="labelurl">
                            URL
                        </span>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <input id="nickname" type="text" style="width: 95%" />
                    </div>
                    <div class="tab-pane" id="tab3">
                        <input id="country" type="text" style="width: 95%" />
                    </div>
                    <div class="tab-pane" id="tab4">
                        <input id="web" type="text" style="width: 95%" />
                    </div>
                </div>
            </div><!-- End of Tabbable -->
            <hr/>
            <div class="inside center">
                <a class="btn btn-large btn-danger" href="#" id="cancelBtn">Cancel</a>
                <a class="btn btn-large btn-info between" href="#" id="saveBtn">Save</a>
            </div>
        </div><!-- End of Span 8 -->
    </div><!-- End of Row -->
</div><!-- End of Container-->
Colored by Color Scripter
cs

화면 확인없이 바로 CSS를 작성한 뒤 확인하겠습니다. timeline.css 를 열어 아래 코드를 추가하세요.

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
/* profile */
.editbtn {
    float: right;
    margin: 20px;
}
.heromargin {
    margin: 15px;
}
.hero-unit h1 {
    color: #5b7dc1;
    font-size: 80px;
}
.hero-unit h3 {
    color: #5b7dc1;
    margin-left: 200px;
}
.hero-unit h2 {
    color: #5b7dc1;
    font-style: italic;
    margin-top: 20px;
    margin-bottom: -20px;
    margin-left: 20px;
}
.nav-list h4 {
    font-style: italic;
    font-weight: normal;
    font-size: 28px;
}
 
cs

아래처럼 완성된 화면이 나오게 됩니다.

마지막으로 스크립트 부분을 작성하여 데이터를 로드하겠습니다. timeline.js에 작성하세요.

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
var doGetProfile = function() {
    $.ajax({
        type: 'GET',
        url: baseUrl + 'api/profile/',
        beforeSend: function(req) {
            req.setRequestHeader('Authorization', loginstring);
        },
        success: function(data) {
            fillProfile(data);
        },
        error: function(msg) {
            alert("Fail to get data!");
        }
    });
};
 
var fillProfile = function(data) {
    $("#bigid").html(data.username);
    $("#bignickname").html("A.K.A " + data.nickname);
    $("#bigcomment").html(data.comment);
    
    $("#comment").val(data.comment);
    $("#nickname").val(data.nickname);
    $("#country").val(data.country);
    
    $("#web").val(data.url);
    $("#labelnick").html("Nickname: " + data.nickname);
    $("#labelcountry").html("Country: " + data.country);
    $("#labelurl").html("URL: " + data.url);
};
 
Colored by Color Scripter
cs

작성된 스크립트를 매핑하여 제대로 데이터가 전달되는 지 확인해 보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
        <script>
            $(document).ready(function() {
                getLoginString();
                doGetProfile();
                
                $("#adminBtn").click(goAdmin);
                // $("#saveBtn").click(doSetProfile);
                // $("#cancelBtn").click(doCancel);
                $("#logoutBtn").click(doLogout);
                
                $("input[type=text]").attr("disabled", "disabled");
                $("#editBtn").toggle(function() {
                    $("input[type=text]").removeAttr("disabled");
                }, function() {
                    $("input[type=text]").attr("disabled", "disabled");
                });
                
                $("#profile").click(function() {
                    alert("profile clicked");
                });
            });
       </script>
Colored by Color Scripter
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
31
32
var doSetProfile = function() {
    var nickname = $("#nickname").val();
    var comment = $("#comment").val();
    var country = $("#country").val();
    var url = $("#web").val();
    
    $.ajax({
        type: 'POST',
        url: baseUrl + 'api/profile/',
        data: {
            nickname: nickname,
            comment: comment,
            country: country,
            url: url
        },
        beforeSend: function(req) {
            req.setRequestHeader('Authorization', loginstring);
        },
        success: function(data) {
            alert('OK');
            location.reload();
        },
        error: function(msg) {
            alert("Error!");
        }
    });
};
 
var doCancel = function() {
    location.reload();
};
 
Colored by Color Scripter
cs

다음 스크립트 부분의 주석을 제거해주세요.(profile.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
 
        <script>
            $(document).ready(function() {
                getLoginString();
                doGetProfile();
                
                $("#adminBtn").click(goAdmin);
                $("#saveBtn").click(doSetProfile);
                $("#cancelBtn").click(doCancel);
                $("#logoutBtn").click(doLogout);
                
                $("input[type=text]").attr("disabled", "disabled");
                $("#editBtn").toggle(function() {
                    $("input[type=text]").removeAttr("disabled");
                }, function() {
                    $("input[type=text]").attr("disabled", "disabled");
                });
                
                $("#profile").click(function() {
                    alert("profile clicked");
                });
            });
       </script>
 
Colored by Color Scripter
cs

8. 마지막으로 계정 페이지(account.html)를 구현하겠습니다.

기존의 template.html 을 복사한 뒤, 아래처럼 간단히 nav 바까지 작성하도록 하겠습니다.

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
41
42
43
44
45
46
47
 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8"/>
        <title>Timeline Example</title>
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
        <link href="timeline.css" rel="stylesheet"/>
        <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target="#navMenu"> <span class="icon-bar"> </span> <span class="icon-bar"> </span> <span class="icon-bar"> </span> </a>
                    <a class="brand" href="#"> TimeLine Service </a>
                    <div class="nav-collapse" id="navMenu">
                        <ul class="nav center">
                            <li>
                                <a href="timeline.html">Home</a>
                            </li>
                            <li class="active">
                                <a href="profile.html">Profile</a>
                            </li>
                            <li>
                                <a href="#">Account</a>
                            </li>
                        </ul>
                        <div class="btn-group pull-right">
                            <a class="btn" id="adminBtn"> <i class="icon-pencil"> </i> Admin <span class="caret"> </span> </a>
                            <a class="btn" id="logoutBtn"> <i class="icon-user"> </i> Logout <span class="caret"> </span> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- End of Navbar -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script src="bootstrap/js/bootstrap.js"></script>
        <script src="timeline.js"></script>
        <script>
            $(document).ready(function() {
 
            });
       </script>
    </body>
</html>
Colored by Color Scripter
cs

nav바 밑부터 몸체를 작성하도록 하겠습니다.

ID를 나타내는 부분과 Friend List 부터 작성하도록 하겠습니다.

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
<div class="container bg"><!-- Start of Container -->
    <div class="row-fluid">
        <div class="span12">
            <div class="inside">
                <h1>Account</h1>
                <h4 class="between">Python/Django</h4>
            </div>
            <h3>Change your personal information</h3>
        </div>
    </div><!-- ENd of row -->
    <div class="row-fluid">
        <div class="span12">
            <div class="inside center">
                <h2>ID</h2>
                <div class="write">
                    <input type="text" id="username" disabled="true"/>
                </div>
            </div>
        </div>
    </div><!-- ENd of row -->
    <div class="row-fluid">
        <div class="span12">
            <div class="inside">
                <h2> Friend List </h2>
                <ul class="nav nav-tabs nav-stacked" id="listarea">
                </ul>
                <li id="ignoreTemplate" style="display:none;">
                    <a>
                        <button class="btn btn-mini btn-info right10 ignoreBtn">
                            <i id="icon"> </i>
                        </button>
                        <span id="name" name="name"> </span>
                        <span id="ignored">:ignored </span>
                    </a>
                </li>
            </div>
        </div>
    </div>
    
</div><!-- End of Container -->
Colored by Color Scripter
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
31
32
            <div class="row-fluid">
                <div class="span6 accountbox">
                    <div class="inside">
                        <h3>Old password</h3>
                        <input type="text" id="oldpassword" style="width:95%;"/>
                        <h3>New password</h3>
                        <input type="text" id="newpassword" style="width:95%;"/>
                        <div class="center">
                            <a class="btn" href="#" id="chkPwBtn">Check Password</a>
                            <a class="btn between" href="#" id="setPwBtn">Set Password</a>
                        </div>
                    </div>
                </div>
                <div class="span6 accountbox">
                    <div class="inside">
                        <h2>Name</h2>
                        <input type="text" id="getname" style="width:95%;"/>
                        <div class="center">
                            <a class="btn" href="#" id="getNameBtn">Get name</a>
                            <a class="btn between" href="#" id="setNameBtn">Set name</a>
                        </div>
                    </div>
                </div>
            </div><!-- End of Row -->
            <div class="row-fluid">
                <div class="span12 center">
                    <div class="inside">
                        <a class="btn btn-large btn-info" href="#" id="refreshBtn">Refrest</a>
                    </div>
                </div>
            </div><!-- ENd of Row -->
        </div><!-- End of Container -->
Colored by Color Scripter
cs

다음 CSS를 추가한 뒤, 페이지를 확인 하겠습니다.

1
2
3
4
5
6
7
8
/* account */
.accountbox {
    height : 250px;
}
.right10 {
    margin-right : 10px;
}
cs

Password와 Name 정보를 받아오기 위한 자바스크립트를 작성하도록 하겠습니다.

패스워드 관련 함수I입니다.

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
41
42
43
44
 
var doCheckPassword = function() {
    $.ajax({
        type: 'POST',
        url: baseUrl + 'api/user/checkpassword/',
        data: {
            password: $("#oldpassword").val()
        },
        beforeSend: function(req) {
            req.setRequestHeader('Authorization', loginstring);
        },
        success: function(data) {
            alert(data.status);
        },
        error: function(msg) {
            alert("Fail to get data!");
        }
    });
};
 
var doSetPassword = function() {
    $.ajax({
        type: 'POST',
        url: baseUrl + 'api/user/update/',
        data: {
            password:$('#newpassword').val()
        },
        beforeSend: function(req) {
            req.setRequestHeader('Authorization', loginstring);
        },
        success: function(data) {
            alert("OK");
            loginstring = "Basic " + Base64.encode(username + ":"+ $("#newpassword").val());
            setLoginString();
            $('#oldpassword').val($("#newpassword").val());
            $('#newpassword').val("");
        },
        error: function(msg) {
            alert(msg.responseText);
        }
    });
};
 
 
Colored by Color Scripter
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
31
32
33
34
35
 
 
var doGetName = function() {
    $.ajax({
        type : 'GET',
        url : baseUrl + 'api/user/name/',
        beforeSend : function(req) {
            req.setRequestHeader('Authorization', loginstring);
        },
        success : function(data) {
            $("#getname").val(data.name);
        },
        error : function(msg) {
            alert("Fail to get data!");
        }
    });
};
 
var doSetName = function() {
    $.ajax({
        type : 'POST',
        url : baseUrl + 'api/user/name/',
        data: {name: $("#getname").val()},
        beforeSend : function(req) {
            req.setRequestHeader('Authorization', loginstring);
        },
        success : function(data) {
            alert("OK!");
        },
        error : function(msg) {
            alert("Fail to set data!");
        }
    });
};
 
Colored by Color Scripter
cs

account.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
        <script>
            $(document).ready(function() {
                getLoginString();
                
                $("#adminBtn").click(goAdmin);
                $("#logoutBtn").click(doLogout);
                
                $("#username").val(username);
                
                $("#chkPwBtn").click(doCheckPassword);
                $("#setPwBtn").click(function() {
                    if ($("#newpassword").val() != "")
                        doSetPassword();
                    else 
                        alert("Fill the new password form.");
                });                
                
                $("#getNameBtn").click(doGetName);
                $("#setNameBtn").click(doSetName);
 
            });
       </script>
 
 
 
Colored by Color Scripter
cs

이름을 가져올 시, 해당 계정의 first name을 가져오는 것이므로 firstname이 설정이 되어있어야 공백으로 나타나지 않습니다.

9. Ignore 리스트를 뿌리는 기능을 구현하겠습니다.

timeline.js에 작성합니다.

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
41
42
43
44
45
46
47
48
49
50
 
 
var doGetUserList = function() {
    $.ajax({
        type: 'GET',
        url : baseUrl + 'api/user/list/',
        beforeSend : function(req) {
            req.setRequestHeader('Authorization', loginstring);
        },
        success : function(data) {
            myIgnoreList = [];
            $('#listarea').html("");
            
            for (var i in data) {
                if (username == data[i].username) 
                    myIgnoreList = data[i].ignores;
            }
            
            for (var i in data) {
                if (username != data[i].username) 
                    doAppendIgnored(data[i], myIgnoreList);
            }
        },
        error : function(msg) {
            alert("Fail to get data!");
        }
 
    });
};
 
var doAppendIgnored = function(data, ignoreList) {
    var isIgnored = $.inArray(data.user, ignoreList);
    
    node = $('#ignoreTemplate').clone();
    $('#name', node).html(data.username);
    $('.ignoreBtn', node).attr("value", data.user);
    
    if (isIgnored == -1) {
        $("#ignored", node).html("");
        $('#icon', node).removeClass().addClass('icon-plus');
    } else {
        $('#ignored', node).html(": Ignored");
        $('#icon', node).removeClass().addClass("icon-minus");
    }
    
    node.show();
    $('#listarea').append(node);
    
};
 
Colored by Color Scripter
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
        <script>
            $(document).ready(function() {
                getLoginString();
                
                $("#adminBtn").click(goAdmin);
                $("#logoutBtn").click(doLogout);
                
                $("#username").val(username);
                
                $("#chkPwBtn").click(doCheckPassword);
                $("#setPwBtn").click(function() {
                    if ($("#newpassword").val() != "")
                        doSetPassword();
                    else 
                        alert("Fill the new password form.");
                });                
                
                $("#getNameBtn").click(doGetName);
                $("#setNameBtn").click(doSetName);
 
                doGetUserList();
            });
       </script>
 
Colored by Color Scripter

마지막으로 무시하기 위한 함수를 구현하겠습니다. account.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
41
42
43
44
45
46
47
48
49
50
51
52
 
<script>
    $(document).ready(function() {
        getLoginString();
 
        $("#adminBtn").click(goAdmin);
        $("#logoutBtn").click(doLogout);
 
        $("#username").val(username);
 
        $("#chkPwBtn").click(doCheckPassword);
        $("#setPwBtn").click(function() {
            if ($("#newpassword").val() != "")
                doSetPassword();
            else
                alert("Fill the new password form.");
        });
 
        $("#getNameBtn").click(doGetName);
        $("#setNameBtn").click(doSetName);
 
        doGetUserList();
 
        $(document).on("click", ".ignoreBtn", function(e) {
            var id = parseInt($(this).val());
            var isIgnored = $.inArray(id, myIgnoreList);
 
            if (isIgnored == -1)
                myIgnoreList.push(id);
            else
                $.ajax({
                    type : 'POST',
                    url : baseUrl + 'api/profile/',
                    data : {
                        ignore : "[" + myIgnoreList.toString() + "]"
                    },
                    beforeSend : function(req) {
                        req.setRequestHeader('Authorization', loginstring);
                    },
                    success : function(data) {
                        alert("OK");
                        doGetUserList();
                    },
                    error : function(msg) {
                        alert("Fail to set data");
                    }
                });
        });
 
        $("#refreshBtn").click(doCancel);
    });
</script>
Colored by Color Scripter
cs

작성된 기능은 + 버튼을 누르면 해당 사용자가 무시되는 방식입니다.

여기까지해서 모든 구현이 끝났습니다.

* 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다

저작자표시

'Web > WebPage' 카테고리의 다른 글

[WebPage] 실전 웹 프로젝트 구축 !!(Client Part 2) - 웹 페이지 제작 강좌 (0)	2015.07.11
[WebPage] 실전 웹 프로젝트 구축 !!(Client Part 1) - 웹 페이지 제작 강좌 (0)	2015.07.09
[WebPage] 실전 웹 프로젝트 구축 !!(Server Part 2) - 웹 페이지 제작 강좌 (0)	2015.07.09
[WebPage] 실전 웹 프로젝트 구축 !!(Server Part 1) - 웹 페이지 제작 강좌 (0)	2015.07.08
[WebPage] 실전 웹 프로젝트 구축 !!(실전 예제) - 웹 페이지 제작 강좌 (0)	2015.07.07
[WebPage] 4. 웹 프로그래밍의 필수요소, JavaScript와 jQuery - 웹 페이지 제작 강좌 (1)	2015.07.07

ABOUT ME

Palpit's Techlog Palpit's Techlog

'Web > WebPage' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Web > WebPage' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바