20210913 Jquery 짧게 맛보기.

DUUUPPAAN·2021년 9월 13일

교육 첫 달 202109

목록 보기

12/13

·월요일

-월요일은 항상 힘든 것 같다. 특히, 대면수업인데다가 잠도 설쳤는데, 7시에 기상하려니 정말 힘들었다. 그런데 신기하게도 집중력은 집에 비할 바가 아닌 것은 정말 신기하다. 장소, 환경, 분위기가 주는 무엇이 확실하게 존재하는 것 같다. 오늘은 저번 주 금요일날 짧게 맛봤던, Jquery의 기능들을 복습하고, 또 진도도 나갔다. 거의 하루만에 jquery의 자주쓰는 기능들을 맛봤고, 이제 java를 배우면서 또 만나게 되겠지만, 당분간은 안녕일 것이라고 하셨다.

-다른 학생들의 의견 중에, 그냥 보여주시고 넘어가셔서 이해하기 힘든 부분들이 많다는 의견이 많았다고 한다. 그래서 우선 문법을 설명해주시고, 어떤 기능을 하는지, 어떻게 작성해야 하는지 등등을 좀 더 세세하게 알려주시기로 하셨다. 다행이다. 정말 수업시간이 아니라 타이핑 시간인 것 같아서, 과연 내가 이 수업을 듣고 개발자로서의 역량을 다 해낼 수 있을까란 의문이 들었었는데, 오늘 수업의 방향은 확실히 내가 원했던 방향이었다. 적어도, 내가 생각이란 것을 하면서, 궁금증을 해소하면서 진도가 진행되었기 때문이다.

·Jquery와 Javascript

-처음엔 사실, javascript와 Jquery가 뭐가 다른지, 각각 왜 쓰는지 등등에 대해 의문점이 많았다. javascript와 Jquery 전부 구현 가능한 기능들이 각각 비슷한 경우도 있어서, 굳이 이걸 새로 배워서 적용해보는 이유가 단지 다른 사람들이 쓴 코드를 이해할 수 있어야하기 때문인가? 라는 궁금증이 생겼다. 그런데, 조금 진행해보니, Jquery로 쓰면 정말 좋은 부분이 확실히 있었다.
예를 들어,

<body>
	<div id="div1">div1</div>

 </body>

이 div 안에 텍스트를 50px로 바꾸고 싶다. 물론 제일 좋은 방법은 그냥 html이나 css에서 바꾸는 것이겠지만, 그 둘을 제외하고 오직 javascript와 Jquery 이 두가지만 비교한다면, Jquery가 훨씬 더 간결하다.

<head>
<script>
function ss(){
		var div = document.getElementById("div1");
		div.style.fontSize = "50px";
	}
</script>
</head>
<body>
	<div id="div1">div1</div>
	<script>
    			ss();
    </script>
</body>

이게 javascript로 50px를 만드는 방법이라면, Jquery는

<script>
	$(function(){
		$('#div1').css("font-size","50px");
	});
 </script>

딱 봐도 간결하다.
또한, 괄호 중괄호가 정말 많이 나와서, 쓸 때 주의해서 써야하지만, 기본적인 구조가 굉장히 직관적이다.
$().(); 이게 기본적인 구조다. 점을 기준으로 좌측의 것을 가져와서, 우측의 기능들을 실행한다. 가져오는 부분은 css, javascript와 크게 다르지 않아서 정말 편했다. 괄호를 잘 쓰는 것도 미리미리 괄호부터 채워놓고 안에 내용을 넣으면, 누락하거나 더 많아지는 것을 미연에 방지할 수 있었다.

·다양한 기능을 사용하기

-단순한 css의 적용부터 시작해서, hide(), show(), fadeIn(), fadeOut(), animate() 등을 저번 주의 복습 겸 실제로 학생들이 구상해서 직접 사용해봤다. 역시 머리로만 알고 있는 것보다 목표를 주고 그것을 생각하면서 써보니 훨씬 체화되는 느낌이었다.

-추가적으로 배운 내용들도 상당히 많았다. 너무 많아서 일일이 다 코드를 올리기엔 글이 너무 길어질 것 같아서 간단하게 배운 목록들을 적어보자면, val(), text(), html(), empty(), remove(), attr(), val(), addClass(), removeClass(), append(), appendTo(), click(), hover(), focus(), blur(), each() 등을 배웠다.

단순하게 사용하면 정말 쉬웠지만, 변수를 선언해서 변수로 해당 기능을 실행하는 것은 조금 헷갈리긴 했다. 그래도 계속 사용하니, 변수 선언으로도 잘 사용할 수 있게 되었다.

또한 마우스이벤트와 같은 기능들과, addClass removeClass의 기능들이 합쳐져서 평소에 자주 보던 기능들을 실제로 구현하는 것도 재미있었다.
예를 들면, 검색창에 커서를 두면, 검색창의 색이나 테두리가 변하는 기능들도, Jquery로는 아주 쉽게 만들 수 있었다.

<!DOCTYPE html>
<html lang="kor">
 <head>
  <meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <title>document</title>

  <style>
	input{border: 3px solid green; background: blue;}
	.active{border: 3px solid red; background: skyblue;}
  </style>
 <script>
$(function(){
	$('#input1').focus(function(){
			$(this).addClass('active');
	});
	$('#input1').blur(function(){
			$(this).removeClass('active');
	});
});
 </script>
 </head>
 <body>

		<input type="text" id="input1">
 
 </body>
</html>

이런식으로 커서가 input박스에 갔을 때와 다른 쪽을 눌렀을 때를 확연하게 달리해서 편의성을 개선할 수 있었다. 그리고 개인적으로 each()의 기능도 정말 훌륭하다고 생각한다. javascript로 하거나 each()가 없이 그냥 쓴다면, 몇 십줄이 넘는 코드도 순식간에 몇줄로 줄일 수 있을 정도의 엄청난 기능이었다.

·주의할 점 몇 가지!

-Jquery를 사용할 때, 내가 했던 가장 큰 실수들을 여기에 몇 가지 적겠다. 나중에 혹시나 Jquery를 사용하려할 때, 이 실수들을 제일 먼저 읽었으면 한다.
1. 괄호와 세미콜론을 놓침.
어떤 기능을 쓸지, 어떤 변수를 불러올지, 어떤 부분을 어떻게 처리할지 생각하는 것도 중요하지만, 애초에 문법적인 틀을 다 채우고, 그 문법의 빈 부분을 채우면서 진행하는 것이 더 실수를 줄이는 것 같다. 실제로, 골격을 다 갖춘 상태로 작성하니까 실수가 훨씬 줄었다.

$(function(){
	$().();
});

최소 이 정도의 골격정도는 정도는 잡아두고 시작하는 습관도 좋을 것 같다.

css를 Jquery로 적용할 때, margin을 그냥 top이나 left로 주면 적용이 안되는 경우가 대부분이었다. 수업시간에도 적용이 안되는 것이 확인됐는데, 내가 직접 인터넷에 찾아본 결과, 많은 분들이 marginTop, marginLeft로 주고 계셨다. Jquery로 css를 적용해 margin을 줄 때 주의하자!
animate()를 복습하려고 월요일 아침부터 코드를 몇번이나 작성하고 지웠다. 사실 코드에는 문제가 없었는데, position을 css에서 반드시 설정해야 한다는 것을 까먹었다. 절대적 위치나 상대적 위치를 설정하지 않으니, animate를 사용해도 잘 돌아갈리 없었다.

이 세가지가 오늘 가장 두드러진 나의 실수다. 앞으로 이 세 부분은 정말 조심하면서 Jquery를 작성했으면 한다.

오늘 수업이 끝나고 저녁까지 복습을 했고, 내일 오전에 또 복습을 해주신다고 하니, 더더더 잘 익히고 모르는 부분은 끝까지 물고 늘어지자. margin을 스스로 찾은 것처럼!!!