·제이쿼리 마지막
-사실 마지막이라고 하기엔 제이쿼리 자체를 3일 정도에 빠르게 배우는 시간이었어서 시작과 동시에 끝인 느낌이 강했다. 그리고 또한 메소드 위주의 빠른 진행이었기 때문에, 제이쿼리를 엄청나게 잘한다? 그건 아니다. 그냥 따로 인터넷에서 메소드를 찾아보고 예제 정도만 보면 내가 사용할 수 있을 정도는 배웠다는 수준이다. 물론, 배움에는 끝이 없어서 다 배웠다란 개념이 있을 순 없겠지만, 그래도 필요할 때 필요한 기능을 찾아보고 적용할 수 있을 정도는 배웠다는 생각은 든다. 아직 조금 어렵긴 하지만...
·금요일 수업의 업로드가 일요일에...
-금,토 몸이 좋지 않았다. 그래서 체력적으로 쉼이 필요했고 코드를 보고 연습하고 곱씹어보지도 않았는데, 벨로그를 작성한다는 것은 연습없이 그냥 글만 올리는 형태라 하고 싶지 않았다. 다행히 일요일인 오늘엔 상태가 좋아졌고 잠을 많이 자서 아침부터 복습할 수 있었다. 깃허브와 깃에 대한 여러 영상도 보면서 깃을 통해 깃허브에 업로드 하는 것도 해봤는데 역시 처음 접하는 명령어는 익숙하지 않은 것 같다. 그래도 어느정도는 성공했다. java파일을 올리는 것이 문제인데, 이클립스로 올리는 부분은 조금 더 찾아보려고 한다.
·제이쿼리 마우스 이벤트 관련 메소드
-마우스 관련 이벤트는 이미 많이 해본 .on("click",function(){});의 형태가 있지만, 그건 지금까지 사용한 메소드들이 화면에 나타나거나 변화를 알아차리기 위한 버튼의 요소가 필요해서 사용한 것이었지 마우스 이벤트를 배우는 용도는 아니었다.
-on 메소드의 두 가지 사용법.
그동안은 $().on("click", function(){});의 형태로 사용했었지만, 사용형태가 하나 더 있었다.
1- $("button").on("mouseenter mouseleave", function(){});
2- $("button").on({mouseenter: function(){}, mouseleave : function(){} });-1번의 형태는 지금까지 사용했던 익숙했던 방식이다. 다만 click이 들어가는 요소에 두 가지가 올 때 띄어쓰기로 구분해준다는 것은 새로 알게 된 사실이다. 그리고 2번째의 형태는 아예 {}로 각각의 기능을 따로따로 구현하는 것이다. 사실 두 가지 형태라고는 했지만, 1번의 구조는 각각에 기능을 부여한다기 보다는 두 가지 상황 중 어떤 상황에서든 동일한 기능을 수행하는 하나의 function을 정의하는 것이고, 두번째는 각각의 상황마다 하나씩의 function을 정의하는 것이기 때문에 엄연히 다르다고 할 수 있다. 물론, 위의 형식이 아니라 각각을 전부 따로 써줄 수도 있다. 그러나 만약 저렇게 쓴다면, 두 효과가 더 깔끔하게 보이고 코드의 간결성을 확보할 수 있다.
-on의 위치에 오는 one은?
one은 표면상의 의미처럼 on이 하는 기능을 단 한번만 수행하는 것이다. 예를 들면
$(function(){
//one 메소드- 연결된 이벤트 핸들러가 한번 실행 후 다시 실행되지 않음
//on메소드랑 같은 인자를 받고, 같은 형식임.
$("button").one("click", function(){
$("#text").append("버튼을 클릭했음<br>");
});
});-위의 경우에, one 부분에 on메소드를 사용한다면, 버튼을 클릭할 때마다 id가 text인 곳 아래에 "버튼을 클릭했음"이라는 문장이 계속 찍힌다. 그러나 one이라면 버튼을 처음 눌렀을 때, 딱 한번만 해당 문구가 찍히고 그 다음부터는 기능하지 않는다. 물론 이 때, 버튼이 더이상 기능하지 않는다는 것을 비주얼적으로 알려주기 위해 addClass의 기능을 활용해서 Class 이름을 주고, 해당 클래스에 미리 css를 만들어놔서 text-decoration: line-through; opacity: 0.5;이런 느낌의 css를 준다면 훨씬 더 알아보기 쉽게 할 수 있다.
-one이 아니라 off를 사용해서 해당 기능을 꺼버릴 수 있다!
$(function(){
//off()메서드는 해당 선택자에서 선택한 요소에서, off뒤의 인자에 대한 이벤트를 제거
$("#clickBtn").on("click", function(){
$("#text").append("버튼을 클릭했습니다.<br>");
});
$("#removeBtn").on("click", function(){
$("#clickBtn").off("click");
//clickBtn에 대한 click이벤트 off();
});
});
-위의 경우 clickBtn의 기능을 removeBtn에 정의된 off()로 "click"이벤트를 끌 수 있다. 한번만 실행하지는 않지만, 기능을 없애면 더이상 실행이 되지 않는다.
-mouseenter mouseleave, hover()
mouseenter와 mouseleave는 "click"과 같은 부분에 들어가는 하나의 인자로 사용할 수 있는데, 마우스를 선택자에서 선택한 영역에 올리거나 그 영역을 빠져나갔을 때(클릭과 다르게 위치만 이동한 경우)의 이벤트를 만들 수 있다. hover는 mouseenter와 mouseleave의 기능을 합친 메소드라고 보면 된다.
$(function(){
$("button").hover(function(){
$("#text").append("마우스가 버튼 위에 올라갔거나 나갔습니다.<br>");
});
/*
$("button").on("mouseenter mouseleave", function(){
$("#text").append("마우스가 버튼 위에 올라갔거나 나갔습니다.<br>");
});
*/
});-위의 예에서 hover로 정의된 버튼의 이벤트와 밑에 주석처리 된 on메소드의 기능은 똑같다. 즉, 굳이 mouseenter와 mouseleave의 각각의 기능을 처리할 필요가 없는 상황에서는 hover가 훨씬 더 간결한 코드를 제공해준다.
-dblclick()메소드는 이름만 봐서는 조금 낯설게 느껴졌는데 dbl이 double의 줄임말로 결국 더블클릭 이벤트를 만드는 요소이다.
$("button").dblclick(function(){
$("#dblClickEvn").css("color", "red");
$("#clickEvn").css("color", "black");
});-이런식으로 사용할 수 있다.
·제이쿼리 input관련 메소드
-focusin과 focusout
input박스에 커서가 깜빡거리는 기능을 하고 싶을 때, focus()란 기능을 사용해봤다. 그 기능을 생각하면 focusin과 focusout의 기능을 대충 짐작할 수 있는데, 커서가 깜빡거리는 상황을 인풋박스에 줬을 때가 in이고 커서가 해당 인풋박스를 나갔을 때를 out이라고 생각하면 된다. 이건 사실 크게 와닿지는 않았는데, 나중에 주민번호를 입력하고 해당 주민번호가 맞을 경우, 주민번호에서 알아서 생년월일을 찾아서 입력해주는 회원가입예제를 만들면서 바로 저 기능이 왜 필요한지 깨달았다.
·제이쿼리 사라짐, 나타남
-show() hide() fadein() fadeout() slideUp() slideDown()등의 기능이 있고, 뒤의 4개는 인자로 속도에 영향을 주는 초를 입력할 수 있다. 1000이 1초이기 때문에 0.5초의 경우 500을 넣어주는 식으로 사용할 수 있다.
$(function(){
$("#slideUpBtn").on("click", function(){
$("#divBox").slideUp(500);
});
$("#slideDownBtn").on("click", function(){
$("#divBox").slideDown(1000);
});
});예를 들면 위와 같은 식이다.
·대망의 회원가입 예제, 제이쿼리를 최대한 활용!
-사실 금요일 수업은 이 하나로 끝이라고 보면 된다. 굉장히 길고 굉장히 신경을 많이 써야하기 때문에 사실 정말 프로젝트를 할 때는 집중하고 또 시연하고 해야하는 부분인 것 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<script src="../javascript/jquery-1.12.4.min.js"></script>
<script>
var hobbyCheck = false;
function checkMember()
{
var getIntro = $("#intro").val().replace(/\s|/gi,'');
var hobbyCheck = false;
var getMail = RegExp(/^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/);
var getCheck= RegExp(/^[a-zA-Z0-9]{4,12}$/);
var getName= RegExp(/^[가-힣]+$/);
var fmt = RegExp(/^\d{6}[1234]\d{6}$/); //형식 설정
var buf = new Array(13); //주민등록번호 배열
//아이디
var tt = $.trim($("#tbID").val()); //공백제거
if($.trim($("#tbID").val()) == "")
{
alert("아이디를 입력 하세요.");
$("#tbID").focus();
return false;
}
if(!getCheck.test($.trim($("#tbID").val())))
{
alert("아이디를 정규표현식에 맞춰 입력 하세요.")
$("#tbID").val("");
$("#tbID").focus();
return false;
}
//비밀번호
if($.trim($("#tbID").val()) == $.trim($("#tbPwd").val()))
{
alert("비밀번호와 아이디가 같습니다.");
$("#tbPwd").val("");
$("#tbPwd").focus();
return false;
}
if($.trim($("#tbPwd").val()) == "")
{
alert("비밀번호를 입력 하세요.");
$("#tbPwd").focus();
return false;
}
if(!getCheck.test($.trim($("#tbPwd").val())))
{
alert("정규표현식에 맞춰 입력 하세요.")
$("#tbPwd").val("");
$("#tbPwd").focus();
return false;
}
if($("#tbPwd").val() != $("#tbPwd2").val())
{
alert("비밀번호가 잘못 입력 되었습니다.");
$("#tbPwd").val("");
$("#tbPwd2").val("");
$("#tbPwd").focus();
return false;
}
//이메일
if($.trim($("#mail").val()) == "")
{
alert("이메일을 입력하세요.");
$("#mail").focus();
return false;
}
if(!getMail.test($.trim($("#mail").val())))
{
alert("이메일 표현식이 잘못되었습니다. 다시 입력하세요.");
$("#mail").val("")
$("#mail").focus();
return false;
}
//이름
if($.trim($("#name").val()) == "")
{
alert("이름을 입력하세요.");
$("#name").focus();
return false;
}
if(!getName.test($.trim($("#name").val())))
{
alert("이름의 표현식을 확인하세요.");
$("#name").val("");
$("#name").focus();
return false;
}
//주민번호
if($.trim($("#pnum").val()).length != 6)
{
alert("주민번호 앞자리를 입력 하세요.");
$("#pnum").val("")
$("#pnum").focus();
return false;
}
if($.trim($("#nnum").val()).length != 7)
{
alert("주민번호 뒷자리를 입력 하세요.");
$("#nnum").val("")
$("#nnum").focus();
return false;
}
if(check_jumin() == false)
{
return false;
}
//관심분야
for(var i = 0; i < $('[name="hobby"]').length; i++)
{
if($('input:checkbox[name="hobby"]').eq(i).is(":checked") == true)
{
hobbyCheck = true;
break;
}
}
if(!hobbyCheck)
{
alert("관심분야는 하나이상 체크하셔야 합니다.");
return false;
}
return true;
}
//주민번호 확인 함수
function check_jumin()
{
var jumins3 = $("#pnum").val() + $("#nnum").val();
//주민등록번호 생년월일 전달
var fmt = RegExp(/^\d{6}[1234]\d{6}$/); //포멧 설정
var buf = new Array(13);
//주민번호 유효성 검사
if (!fmt.test(jumins3))
{
alert("주민등록번호 형식에 맞게 입력해주세요");
$("#pnum").focus();
return false;
}
//주민번호 존재 검사
for (var i = 0; i < buf.length; i++)
{
buf[i] = parseInt(jumins3.charAt(i));
}
var multipliers = [2,3,4,5,6,7,8,9,2,3,4,5];// 밑에 더해주는 12자리 숫자들
var sum = 0;
for (var i = 0; i < 12; i++)
{
sum += (buf[i] *= multipliers[i]);// 배열끼리12번 돌면서
}
if ((11 - (sum % 11)) % 10 != buf[12])
{
alert("잘못된 주민등록번호 입니다.");
$("#pnum").focus();
return false;
}
}
$(function(){
$("#nnum").on("focusout", function(event){
if($("#pnum").val().length == 6 && $("#nnum").val().length == 7)
{
var jumin = $("#pnum").val() + $("#nnum").val();
var birthYear = (jumin.charAt(6) <= 2) ? "19" : "20";
birthYear += $("#pnum").val().substr(0,2);
var birthMonth = $("#pnum").val().substr(2,2);
var birthDay = $("#pnum").val().substr(4,2);
$("#year").val(birthYear);
$("#month").val(birthMonth);
$("#day").val(birthDay);
}
});
});
</script>
</head>
<body>
<form name="form1" action="sample_1.html" method="post" onsubmit="return checkMember()">
<h2 align="center">회원가입</h2>
<table align="center" border="3" cellspacing="0" >
<tr>
<td colspan="5" height="30" align="center" bgcolor=#000000" span style="color:white;">회원기본정보</td>
</tr>
<tr>
<td width="100">아이디:</td>
<td colspan="4"><input type="text" name="tbID" id="tbID"> 4~12자리의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td>비밀번호:</td>
<td colspan="4"><input type="password" maxlength=12 name="tbPwd" id="tbPwd"> 4~12자리의 영문 대소문자와 숫자로만 입력</td>
</tr>
<tr>
<td>비밀번호확인:</td>
<td colspan="4"><input type="password" maxlength=12 name="tbPwd2" id="tbPwd2"></td>
</tr>
<tr>
<td>메일주소:</td>
<td colspan="4"><input type="text" name="mail" id="mail">예)id@domain.com</td>
</tr>
<tr>
<td>이름:</td>
<td colspan="4"><input type="text" name="name" id="name"></td>
</tr>
<tr>
<td colspan="5" height="30" align="center" bgcolor=#000000" span style="color:white;">개인신상정보</td>
</tr>
<tr>
<td>주민등록번호:</td>
<td colspan="4"><input type="text" name="pnum" id="pnum" maxlength=6>-
<input type="password" name="nnum" id="nnum" maxlength=7>
</td>
</tr>
<tr>
<td>생일:</td>
<td colspan="4"><input type="text" name="year" id="year" style="width:70px" readonly disabled> 년
<input type="text" name="month" id="month" style="width:70px" readonly disabled> 월
<input type="text" name="day" id="day" style="width:70px" readonly disabled> 일
</td>
</tr>
<tr>
<td>관심분야:</td>
<td colspan="4">
<input type="checkbox" name="hobby" value="1">컴퓨터
<input type="checkbox" name="hobby" value="2">인터넷
<input type="checkbox" name="hobby" value="3">여행
<input type="checkbox" name="hobby" value="4">영화감상
<input type="checkbox" name="hobby" value="5">음악감상
</td>
</tr>
<tr>
<td width="100" height="100">자기소개:</td>
<td colspan="4">
<textarea name="intro" id="intro" cols="50" rows="5"></textarea>
</td>
</tr>
</table>
<p align="center">
<input type="submit" value="회원가입">
<input type="reset" value="다시입력">
</p>
</form>
</body>
</html>그리고 조금 결이 다르지만, 금요일의 기억을 더듬어서 내가 직접 따로 만들어본 코드도 같이 올리겠다. 물론 어떻게 보면 굉장히 중복일 수 있는데, 내가 조금 디테일을 추가해보았다. 예를 들면, 생년월일을 입력할 때, 월과 일에 해당하는 부분이 0으로 시작하면 0을 입력하지 않고 바로 뒤의 자리만 입력하는 식의 로직을 추가했다. 주민번호에는 03으로 입력되지만 0으로 시작하기 때문에 3만 입력하는 식이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 my ver</title>
<script src="../javascript/jquery-1.12.4.min.js"></script>
<style>
#memInfo, #personInfo{
color: white; background-color: black; font-size: 20px; font-weight: bold;
}
</style>
<script>
$(function(){
$("#rightjumin").focusout(function(){
var genderNum = $("#rightjumin").val().substring(0,1);
var year = $("#leftjumin").val().substring(0,2);
var zeroConfirm = $("#leftjumin").val().substring(2,3);
var zeroConfirm2 = $("#leftjumin").val().substring(4,5);
if(genderNum == 1 || genderNum == 2 )
{
$("#year").val("19"+year);
}else
{
$("#year").val("20"+year);
}
if(zeroConfirm == 0)
{
$("#month").val($("#leftjumin").val().substring(3,4));
}else{
$("#month").val($("#leftjumin").val().substring(2,4));
}
if(zeroConfirm2 == 0)
{
$("#day").val($("#leftjumin").val().substring(5,6));
}else{
$("#day").val($("#leftjumin").val().substring(4,6));
}
});
});
function isEmail(asValue)
{
var regExp = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
return regExp.test(asValue);
}
//주민번호 확인
function jmcheck(){
var ffjm = document.form1.leftjumin.value + document.form1.rightjumin.value;
if(comp(ffjm)==true){
return true;
}else{
return false;
}
}
function comp(jumincomp){
var jumintotal = 0;
var juminadd = "234567892345"/*12자리까지 곱해야됨. i가 0부터 시작*/
for (var i = 0; i < 12; i++) {
jumintotal= jumintotal+ parseInt(jumincomp.substring(i,i+1)) * parseInt(juminadd.substring(i,i+1));
};
jumintotal= 11-(jumintotal%11);
if(jumintotal==11){jumintotal=1;}
else if(jumintotal==10){jumintotal=0;}
if(jumintotal==parseInt(jumincomp.substring(12,13))) return true;
}
function validate(){
//아이디 정규표현식
var idPattern = /^[a-zA-Z0-9]{4,12}$/;
//비밀번호 정규표현식
var pwdPattern = /^[a-zA-Z0-9]{4,12}$/;
//이름 패턴 한글과 영문 대 소문자를 사용하세요. (특수기호, 공백 사용 불가) – 최소3글자 이상: 얘는 length로 할거임
var namePattern = /^[가-힣]*$/;
//이메일 패턴
var emailPattern = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
var idResult = idPattern.test($("#userId").val());
var pwdResult = pwdPattern.test($("#pwd1").val());
var emailResult = emailPattern.test($("#email").val());
var nameResult = namePattern.test($("#name").val());
//아이디 체크
if($("#userId").val().trim() == "")
{
alert("아이디를 입력해주세요.");
$("userId").focus();
return false;
}
if(!idResult){
alert("아이디는 4~12자리의 영문 대소문자와 숫자로만 입력할 수 있습니다.");
$("#userId").val("");
$("#userId").focus();
return false;
}
//비밀번호 체크
if($("#pwd1").val().trim() == "")
{
alert("비밀번호를 입력해주세요");
$("pwd1").focus();
return false;
}
//비밀번호는 아이디와 같으면 안됨
if($.trim($("#userId").val()) == $.trim($("#pwd1").val()) )
{
alert("비밀번호는 아이디와 같을 수 없습니다.");
$("#pwd1").val("");
$("pwd1").focus();
return false;
}
if(!pwdResult)
{
alert("비밀번호는 4~12자리의 영문 대소문자와 숫자로만 입력할 수 있습니다.");
$("#pwd1").val("");
$("pwd1").focus();
return false;
}
//비밀번호 확인 체크
if($("#pwd2").val().trim() == "")
{
alert("비밀번호 확인을 입력해주세요");
$("pwd2").focus();
return false;
}
if($("#pwd1").val() != $("#pwd2").val())
{
alert("비밀번호와 비밀번호 확인이 일치하지 않습니다.");
$("#pwd2").val("");
$("pwd2").focus();
return false;
}
//이메일 체크
if($("#email").val().trim() == "")
{
alert("이메일을 입력해주세요.");
$("email").focus();
return false;
}
if(!emailResult)
{
alert("이메일을 정확하게 입력해주세요.");
$("#email").val("");
$("#email").focus();
return false;
}
//이름 체크
if($("#name").val().trim() == "")
{
alert("이름을 입력해주세요.");
$("name").focus();
return false;
}
if($("#name").val().length <2)
{
alert("이름은 2글자 이상 입력하셔야 합니다.");
document.form1.name.value = "";
$("name").focus();
return false;
}
if(!nameResult)
{
alert("이름은 한글로만 입력해주세요.");
$("#name").val("");
$("#name").focus();
return false;
}
//주민번호 체크
if(!jmcheck())
{
alert("주민번호가 정확하지 않습니다.");
document.form1.leftjumin.focus();
return false;
}
//체크박스 최소 1개이상 체크했는지 여부 확인
var num = $("input:checkbox[name=intres]:checked").length;
if(num < 1)
{
alert("관심분야를 입력해주세요.");
return false;
}
if(confirm("회원가입하시겠습니까?"))
{
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<table style="width: 200;" align="center" border="3" cellspacing="0">
<legend align="center"><h1>회원가입</h1></legend>
<form name="form1" action="sample_11.html" method="post" onsubmit="return validate()">
<tr>
<th colspan="5" id="memInfo">회원기본정보</th>
</tr>
<tr>
<td width="100">아이디:</td>
<td colspan="4">
<input type="text" maxlength="12" placeholder="아이디 입력란" id="userId" name="userId"> 4~12자리의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr>
<td width="100">비밀번호:</td>
<td colspan="4">
<input type="password" maxlength="12" placeholder="비밀번호 입력란" id="pwd1" name="pwd1"> 4~12자리의 영문 대소문자와 숫자로만 입력
</td>
</tr>
<tr>
<td width="100">비밀번호확인:</td>
<td colspan="4">
<input type="password" maxlength="12" placeholder="비밀번호 확인 입력란" id="pwd2" name="pwd2">
</td>
</tr>
<tr>
<td width="100">메일주소:</td>
<td colspan="4">
<input type="text" placeholder="이메일 입력란" id="email" name="email">
</td>
</tr>
<tr>
<td width="100">이름:</td>
<td colspan="4">
<input type="text" maxlength="6" placeholder="이름 입력란" id="name" name="name">
</td>
</tr>
<tr>
<th id="personInfo" colspan="5">개인신상정보</th>
</tr>
<tr>
<td width="100">주민등록번호</td>
<td colspan="4">
<input type="text" maxlength="6" id="leftjumin" name="leftjumin">-
<input type="password" maxlength="7" id="rightjumin" name="rightjumin"> 예)123456789
</td>
</tr>
<tr>
<td width="100">생일:</td>
<td colspan="4">
<input type="text" readonly disabled id="year" name="year" size="5">년 <input type="text" readonly disabled id="month" name="month" size="5">월<input type="text" readonly disabled id="day" name="day" size="5">일
</td>
</tr>
<tr>
<td width="100">관심분야:</td>
<td colspan="4">
<label><input type="checkbox" name="intres" value="컴퓨터">컴퓨터</label>
<label><input type="checkbox" name="intres" value="컴퓨터">인터넷</label>
<label><input type="checkbox" name="intres" value="컴퓨터">여행</label>
<label><input type="checkbox" name="intres" value="컴퓨터">영화감상</label>
<label><input type="checkbox" name="intres" value="컴퓨터">음악감상</label>
</td>
</tr>
<tr>
<td width="100">자기소개:</td>
<td colspan="4">
<textarea name="intro" id="intro" cols="70" rows="5"></textarea>
</td>
</tr>
</table>
<br>
<div align="center">
<input type="submit" value="회원가입">
<input type="reset" value="다시입력">
</div>
</form>
</body>
</html>-사실 javascript보다 조금 헷갈리기는 하지만, name을 통해서 접근하는 것보다 id를 통해서 제이쿼리 선택자를 사용하면 코드가 더 간략해지기는 하는 것 같다. 그런데, 괄호가 너무 많아지는 부분이 있어서 오히려 어느부분에서는 그냥 자바스크립트로 하는게 길긴 하지만 더 편하고 더 가독성이 있지 않나 싶기는 하다. 일장일단이 있는 것 같다. 그래서 사실 완전히 자바스크립트로 만드는 것도 완전히 제이쿼리를 통해 만드는 것도 아닌 각각의 이점을 살려서 조합해서 만들면 어떨까 싶기도 하다. 만약 프로젝트를 하게 된다면, 이런식으로 조금 각각의 장점만 가져와서 사용하면 어떨까 싶다.
·주말의 소중함
-그래도 주말이 있어서 잃었던 체력도 회복하고, 또 못했던 복습의 시간도 주어져서 정말 좋다. 아픈 것도 이렇게 쉴 때 아파야 한다! 앞으로 프로젝트까지도 얼마 남지 않았고, 월요일부터 오라클을 다운받아서 데이터베이스에 대한 수업이 진행된다. 정신차리고 열심히 임해야지! 그리고 금요일날 다른 학원동기분들과 같이 식사하는 작은 자리를 갖게 되었는데, 다들 팀 프로젝트가 끝난 후에도 따로 프로젝트를 하나 더 진행해서 두 개 정도의 포트폴리오를 준비하고 싶다는 의견을 내비쳐서 정말 대단하면서도 꼭 같이 해야겠다는 생각을 했다. 그러기 위해선 실력이 더 뒷받침 되어야하니까! 더 열심히! 파이팅!
