Javascript Part 3

강사: 이고잉 (소프트웨어 엔지니어 / 생활코딩 운영자)

학습 내용

지난 시간에 공부한 loop에 대해 집중적으로 복습한 다음 첫 수업에 만든 웹사이트에서 daylight button code를 loop 형식으로 작성하였다. 다시 말해, anchor tag를 querySelector로 지정하던 방식에서 anchor tag의 id를 loop와 querySelectorAll로 지정하는 방식으로 변경하였다.

<input type="button" value="night" id="daynight" />

<script>
    let button = document.querySelector("#daynight");
    let limb = document.querySelector("body");
    let groupA = document.querySelectorAll("a");
    document
      .getElementById("daynight")
      .addEventListener("click", function () {
        if (button.value === "night") {
          limb.style.backgroundColor = "black";
          limb.style.color = "white";
          for (let i = 0; i < groupA.length; i = i + 1) {
            groupA[i].style.color = "white";
          }
          button.value = "day";
        } else {
          limb.style.backgroundColor = "white";
          limb.style.color = "black";
          for (let i = 0; i < groupA.length; i = i + 1) {
            groupA[i].style.color = "black";
          }
          button.value = "night";
        }
      });
  </script>

이어서 function의 정의와 장점, 용례를 살펴보았다. function은 서로 관계가 있는 code group화하여 정의한 것을 의미한다. function을 사용하면 (1) code가 간결해지고 (2)가독성이 좋아질 뿐만 아니라 (3)여러 위치에 있는 code를 동시에 조작하여 유지보수가 편해진다. 또한 function에서는 code 입력 종료와 출력을 분리시키는 명령어 return을 사용할 수 있다. 일반적으로 code의 기능이 분리될수록 활용도가 높아지기 때문이다. 마지막으로 객체지향에 대해서 학습하였다. 객체지향은 서로 관계가 있는 variable과 function을 group화하여 정의하는 방법론을 일컫는다.

난관과 해결방안

개인적으로 학습한 지 오래된 JavaScript 문법과 개념이 등장하여 code 작성 방식과 구체적인 활용방법이 낯설게 다가왔다. 주말을 이용하여 주간에 학습한 많은 내용을 꾸준히 반복하여 체화할 수 있도록 노력하겠다. 이고잉 강사님은 반복해서 code를 작성하다가 더 이상 작업 시간이 줄어들지 않을 때가 해당 언어의 native에 가까워지는 과정이라고 말씀하셨다. 무던하고 즐거운 학습을 이어갈 수 있도록 스스로를 관리해야겠다.

Day 3 review

JS function

JS function application

JS object

소감

이고잉 강사님은 단기간에 빠르게 진도 나갈 수 밖에 없는 현실적인 상황을 걱정하면서도 JavaScript를 구동하는 핵심 원리가 conditional statements와 loop임을 강조하셨다. 즉, function과 객체지향은 복잡다단해진 핵심 내용을 정리하는 일종의 보조 서랍이라고 생각하셨다. 이에 따라 본인도 이고잉 강사님의 guide에 따라 핵심 원리를 먼저 명확하게 체득한 다음 여러 보조 문법을 연마하겠다고 다짐하였다.