·비대면 수업 금요일
-애초에 html css javascript jquery를 전부 배운다가 수업의 목적이 아니고, 어느정도는 이해하면서 어떤 기능을 하고, 어떻게 작성하는지에 대해 배우는 것이 목적이라고 하셨었다. 그래서 오늘 수업도 기능을 보는 것 위주로 진행했다.
-어제 들었던 의문은 바로 기능을 간단하게 설명해주시고, 먼저 만들어볼 시간을 주시거나, 사용법을 보여주시고, 다르게 작성해보는 시간을 주시지 않고 진행을 하는 것이 과연 맞는가였다. 오늘도 같은 방식으로 그냥 코드를 보여주면 따라서 타이핑해봐라, 이런 기능이다. 이렇게 동작한다 정도만 보여주셨다. 그래서 점점 이게 맞는 수업의 방향인가에 대해 궁금증이 있었다.
그런데 그 궁금증을 조금은 풀어주셨다.
큰 틀에서 어떻게 사용하는지는 알려줬으니, 중요한 개념들과 자주 사용하는 기능들에 대한 실습을 했고, 이제는 자주 사용하지는 않지만 어떤 기능들을 할 수 있고, 또 쓸 수 있는지를 알려주고 있는 것이니, 조금 지루해도 참으라고 하셨다. 그렇게 말씀하시면서, 애초에 이건 암기 과목이 아니라고 하셨고, 이 기능을 모른다? 그러면 인터넷에서 검색하면 된다고 하셨다. 아직 교수님도 기능을 전부 외우지 못해 생각이 나지 않으면 기능과 문법 등을 검색해본다고 하셨다. 그래서 중요한 것은, 이런 것들을 외우는 것보다, 내가 이런 목적을 달성하기 위해서 어떤 로직을 짜느냐, 그것을 머릿속에서, 또는, 제일 좋은건 펜과 종이 위에서 짜서 프로그램 차트를 작성할 수 있냐 없냐지, 이 자체의 기능들을 많이 외우고 있는 것이 중요한 부분이 아니라고 하셨다.
어떤 기능을 할 수 있는지 알고, 어떤 로직으로 목표를 향해 가야겠다를 알면, 문법은 그 다음이라는 것이다. 그리고 로직을 짜는 것을, 최대한 펜과 종이로 그려보는 것을 추천하셨다. 처음 시작부터 혼자 짜고 직접 보면서 코드로 풀어봐야 나중에 진짜 엄청나게 복잡한 일을 하면서도 해낼 수 있다고 하셨다.
그 말씀을 들으면서... 아 내가 완전 다른 과목들을 프로그래밍 쪽에 대입했구나... 나는 배운 것을 전부다 외우고 써보고 응용까지 해보고, 그걸 암기하고 원할 때 그냥 머릿속에서 꺼내서 써야 된다고 생각했다. 물론 그러면 좋겠지만, 더 중요한 부분은 암기보단 다른데에 있다는 것을 오늘 깨달았다.
·canvas 기능
<body>
<canvas id="mycanvas" width="500" height="300" style="border: 1px solid #d3d3d3">
</canvas>
<script>
var c = document.getElementById("mycanvas");
var obj = c.getContext("2d");
obj.beginPath();
obj.moveTo(20,30);/*x좌표, y좌표*/
obj.lineTo(150,70);
obj.lineTo(300,30);
obj.lineWidth=3; obj.strokeStyle="red"; obj.lineCap="round";
/*여기까진 안나타남*/
obj.stroke();
</script>
-처음 캔버스라는 기능을 들었을 때는 하얀 도화지가 연상됐다. 그리고 곧이어 진짜 그게 도화지라는 것을 알게 됐다. 실제로 도화지에 그림을 그리듯 이용하는 것이라니... 사실 포토샵으로 그리고 넣는 방식이 훨씬 더 낫지 않을까 하는 의문은 있었다.
-여기서 중요한 것은, id로 캔버스 전체를 받은 변수c에서 getContext()라는 메소드를 사용해 렌더링 컨텍스트를 불러야 한다고 한다. 정확하게 무슨 내용인지 이해하진 못했는데, 굳이 비유하자면 렌더링 컨텍스트가 색연필 같은 존재라고 이해하면 편하다고 한다. 텍스트로 캔버스 위에서 그림을 그리기 위해선 getContext("2d")의 과정을 거쳐야 그리기 함수를 쓸 수 있다고 한다.
이 캔버스에 있는 함수들로 여러가지를 해봤다. 동그라미도 그려보고 삼각형도 그려보고, 칠도 하고 겹쳐보기도 하고... 그래도 이게 굳이 필요한가에 대한 의구심은 계속 있었다. 다만 shadow기능과 도형정도의 결합이라면 꽤 그럴듯한 결과물도 만들어낼 수 있을것 같다는 생각이 들긴 했다.
· 배열
- 그 후에 배열에 대해 다시 한 번 설명해주셨다. 아쉽게도 내가 직접 찾아낸 배열의 의미보다는 그냥 배열은 이렇게 변수로 줄 수 있다. 나타낼 때 반복문과 함께 쓰면 좋겠다. 정도였다. 그래도 해당 복습내용을 진행하면서 독학했던 내용들이 생각나면서 그때 저렇게 출력한 것이 이런 의미구나를 생각했다.
<script>
var ff = new Array(Array('가나다','컴공','57','88'),
Array('라마바','물류','72','83'),
Array('사아자','통상','97','69'),
Array('차카타','간호','79','89'),
Array('데관','법학','00','00') );
for (i=0;i<5;i++ )
{ for (j=0;j<4 ;j++ )
{ document.write(ff[i][j]);
}document.write("<br>");
}
</script>예를 들어, 위의 경우를 보면, 마지막으로 출력된 것이, 배열에 있는 값들이다. 그런데 수업시간에 이런 질문을 한 학생이 있었다. 그냥 j가 필요없이
for (i=0;i<5;i++ )
{
document.write(ff[i]);
document.write("<br>");
}이렇게만 해도 같은 값이 출력된다고, 쉼표만 있을 뿐이지 결과가 똑같지 않냐고.
그러나 전혀 아니란 것을 난 알 수 있었다. 첫번째는 배열 속의 배열의 값들을 하나하나 빼서 그 데이터를 표시한 것이다. 인덱스가 [0][0]인 값부터 [5][4]의 값까지 뺀 것이라면, 후자는 그냥 배열5개를 나열한 것이다. 이게 왜 차이가 나냐고 물어본다면, 여러 답변을 할 수 있겠지만 가장 큰 차이는 이거다. table만 씌워보면 바로 알 수 있다.
for (i=0;i<5;i++ )
{document.write("<table border=5><tr>");
document.write("<td>"+ff[i]+"</td>");
document.write("</tr></table>");
}이랬을 때 결과는, 5행 1열의 표만 나온다. 위쪽에 table을 씌우면 당연히 5행 4열을 가진 테이블을 만들 수 있다. 이런식으로.
document.write("<table border=3>");
for (i=0;i<5;i++ )
{ document.write("<tr>");
for (j=0;j<4 ;j++ )
{ document.write("<td>"+ff[i][j]+"</td>");
}document.write("</tr>");
}document.write("</table>");아주 큰 차이다. 이걸 수업시간에 알려주시고 인덱스에 대한 개념과 함께 설명해주셨다면 더 좋았을텐데 싶었다. 다른 분들께 내가 알려드리는 것은 선넘는 것이니까 나중에 꼭 찾아보시길 바랄 뿐이다.
이렇게 해봄으로써 배열을 좀 더 잘 이해한 느낌이다.
·다음주에 잠깐 맛보게될 Jquery
-오늘 시간이 조금 남아서 jquery의 기능을 살짝 보았다. jquery가 훨씬 더 쉽다고 하셨는데, 보여주신 코드를 보니까 너무나 더 복잡하고 신경쓸 기호들도 많아보여서 사실 조금 더 걱정이 되었다.
<script>
$(function(){
$("#cat").css("background","pink");
$(".dog").css("background","skyblue")
});
</script>
<title>Document</title>
</head>
<body>
<ul>
<li>fox</li>
<li id="cat">cat</li>
<li>fish</li>
<li class="dog">dog</li>
<li>bird</li>
</ul><script src="../jquery-3.6.0.min.js"></script>
다음과 같이 jquery 공식 사이트에서 받는 js파일을 항상 지정해줘야 사용할 수 있다는 것도 조금 불편한 느낌이었다. 게다가, $기호는 상관없지만, 괄호와 중괄호가 너무 많아서 조금만 길어져도 헷갈릴 거 같았다...
그래서 사실 되게 걱정되어야 하는데, 걱정보다는 뭔가 신기했다. 물론 css를 직접 하는 것이 더 편하긴 하겠지만, jquery로 할 수 있는게 뭐가 있을지 설레기도 하고, 진짜 더 복잡해진만큼 더 많은 기능들을 구현할 수 있었으면 좋겠다는 생각도 했다. 애초에 편하고 쉽자고 이 길을 선택한 것이 아니기도 하고...
복잡한 감정이지만, 결론은 설렘가득이다.
더더더 진도를 나가서 빨리 시간이 흘렀으면 좋겠다.
내일은 주말이다. 이번 주에 배운 내용중에 진짜 기억해야하는 것들을 다시 복기하는 시간이 되었으면 좋겠다. 계획을 구체적으로 짜 놓진 않았지만, form을 받는 것들이나, if for을 이용한 여러가지들, 계산기를 만드는 방법, 주민번호 체크하기 등등을 중점적으로 꼭 한번씩 직접 로직을 짜서 만들어보려 한다. 프로그래머적인 사고를 가져보자!!! 파이팅!!!
- 운동은 꼭 하기! 주말에도 운동은 휴식이 없다
- 중요한 기능들 복기하기, 단 무작정 보면서 복습하지 말자!
- 휴식도 중요하다! 주말이라도 쉬는 시간을 갖자! 길게 보는 것도 중요하다!
- 영어 공부는 틈이 날 때마다!!!!
