[생활코딩|WEB_JavaScript#7] 반복문 下 : 배열과 반복문, 배열과 반복문의 활용 2020.02.06

---

본 게시글은 유튜브 생활코딩 온라인강의를 시청한 후 학습한 정보를 기록하는 목적의 게시글입니다.

생각의 흐름에 따라 작성된 게시글입니다. 가독성이 떨어질 수 있습니다.

생활코딩 유튜브

생활코딩

생활코딩 사이트

생활코딩

"어떤 문제가 우리 삶에서 중요하고 심각할 수록

그 문제를 해결해 주는 공부는 문제로부터 우리를 해방시켜줄겁니다."

(생활코딩 : Web1 -1 수업소개. 중)

---

#3. 배열과 반복문

앞에서 배웠던 '배열'과 '반복문'을 합성하는 시간을 가져보고자 합니다.

각각의 개념과 기능이 결합하여 얼마나 강력한 시너지 효과를 내는지 살펴보고자 합니다.

지금부터 등장 할 모든 코드들은 생활코딩 사이트에서 확인하실 수 있습니다.

 

#3-1.

<h1>Loop & Array</h1>
    <h2>Co workers</h2>
    <ul>
    <li>egoing</li>
    <li>leezche</li>
    <li>duru</li>
    <li>taeho</li>
    </ul>

자... 예시를 하나 가져왔습니다.

동료들의 명단을 출력해주는 아주 간단한 html코드입니다.

<ul>과 <li>태그를 이용하여 동료들의 명단을 표현해주고 있습니다.

하지만 만약, 저희가 관리하고 표현하여야 할 동료들의 명단이 1억명이라면 어떻게 될까요?

또, <li>태그가 아니라 아주아주 복잡하고 어려운 코드가 등장한다면요?

여기에 자주 수정이 일어나는 상황이라면 어떻게 해야할까요?

정답은 반복문과 배열에 있습니다.

 

#3-2.

<h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing','leezche','duru','taeho'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i < 4){
          document.write('<li>+coworkers[i]+</li>');
          i = i + 1;
        }
      </script>
</ul>

'coworkers'라는 변수를 선언하여, 그 변수에 4명의 인원을 담았습니다.

그리고 반복문을 통하여 변수를 호출, 선언된 순서대로 document.write로 웹문서에 출력해줍니다.

 <li>태그도 같이 되도록 +를 이용하였으니, 앞에서 보았던 HTML코드와 외견상으론 같은 형태를 유지할 수 있습니다.

반복문을 사용하여 변수를 호출 할 때,

반복문의 종결조건을 위하여 count로 사용될 정수 i를 0으로 선언해주었고,

반복문이 실행될 때 마다 i의 값이 1씩 증가하는 구조를 가지고 있습니다.

'배열[index]'의 형태로 배열에 index번째 담긴 요소를 호출할 수 있는데,

저희는 i가 그 index의 값과 같으므로 (최초 실행 시 첫 동료, 두번 째 실행 시 두번 째 동료...)

coworkers[i]의 형태로 코드를 구현할 수 있었습니다.

하지만 만약 지금의 cowrkers 명단에서 한 명을 제거하거나, 추가한다면 어떻게 될까요?

한 명을 제거 한다면 'Undefined'의 문자열이 출력될 것이고,

한 명을 추가 한다면 반복문의 종결조건인 (i < 4)때문에 이미 반복문은 종료되어

추가된 한 명의 명단은 확인할 수 없을겁니다.

데이터가 바뀌었다고 로직이 바뀌어 버리면 프로그래머로써 상단한 수치가 아닐 수 없습니다.

 

#3-3.

그렇다면, 반복문의 종결조건에서 배열이 가진 원소의 개수를 가져온다면,

앞서 말한 문제를 해결할 수 있을 것 같습니다.

<h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing','leezche','duru','taeho'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i < coworkers.length){
          document.write('<li>+coworkers[i]+</li>');
          i = i + 1;
        }
      </script>
</ul>

이와 같은 코드로 구현할 수 있겠네요 :)

이제 coworkes란 변수에 담긴 데이터가 어떻게 변한다 하더라도,

그 길이에 맞춰서 선언된 반복문으로 로직이 변하는 문제를 해결할 수 있습니다.

<h1>Loop & Array</h1>
    <script>
      var coworkers = ['egoing','leezche','duru','taeho'];
    </script>
    <h2>Co workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i < coworkers.length){
          document.write('<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
          i = i + 1;
        }
      </script>
</ul>

반복문을 잘 활용할 수 있다면,

<li>태그는 물론이거니와 복잡한 태그들 역시 응용할 수 있습니다.

지금까지 순수한 반복문과 배열의 결합에 대하여 알아보았습니다.

여기서 표현한 '순수한'은 "웹브라우저와 관계없이 어떻게 합성되는가?"를 말합니다.

이제 바로 이어서 웹브라우저에서 활용할 수 있도록 배열과 반복문을 살펴보겠습니다.

 

4. 배열과 반복문의 활용

SCRIPT

https://static.codepen.io/assets/embed/ei.js

See the Pen JavaScript#8 by nani6765 (@nani6765) on CodePen.

해당 코드는 생활코딩 사이트에서 확인하실 수 있습니다.

제가 생활코딩을 시청하며 제작한 코드와 원본 코드의 HTML은 차이가 조금 있지만,

오늘 우리가 알아보고자 하는 내용에 있어서는 똑같은 코드를 가지고 있으니, 이대로 진행하도록 하겠습니다.

생활코딩 유튜브를 시청해보면, 구글 콘솔창을 활용하여 그 개념을 하나씩 짚어주고 있습니다.

저는 영상이 아닌 텍스트와 사진으로 정보를 전달해야 하기에, 코드리뷰만 진행할 생각입니다.

그러니 자세한 설명이 필요하다면, 유튜브 영상을 확인하시는 것이 좋을 것 같습니다.

 

4-1.

저희는 배열과 반복문의 골자를 알고 있습니다.

저희의 목표는 night와 day모드로 변환 시 a태그, 즉 링크의 색깔을 바꿔주고자 합니다.

그렇다면 버튼이 클릭할 때마다, 모든 링크 태그에 CSS속성값을 재부여 한다면 가능할 것 같습니다.

반복문을 통해서 모든 링크태그를 변수에 담아두고, 반복문이 실행할 때 마다 a링크에 속성값을 부여하고,

그 반복문은 링크태기가 담긴 변수의 길이만큼 반복된다면 코드를 효율적으로 구현할 수 있을 것 같습니다.

아래와 같은 코드로 나타낼 수 있을 것 같습니다.

<script>
<input id="night_day" type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night'){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.value = 'day';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
      }
    } else {
      target.style.backgroundColor = 'white';
      target.style.color = 'black';
      this.value = 'night';

      var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'blue';
        i = i + 1;
      }
    }
  ">
  </script>

 

4-2.

<script>
var alist = document.querySelectorAll('a');
      var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
        }
</script>

야간모드/주간모드에서 style.color의 값이 powderblue 이냐, black 이냐 정도의 차이만 있기에,

기본적인 골격은 같습니다. 위 코드를 통해 한 줄 씩 코드를 알아보도록 하겠습니다.

먼저, 문서 전체에서 a태그를 선택해야 할 것 같습니다.

그 기능을 해주는 함수(=메소드, 명령)이 바로 document.querySelectorAll입니다.

이렇게 새로운 기능이 필요할 때마다 그 기능에 관련된 내용을 전부 암기하고 있어야 할까요?

정답은 아닙니다. 검색과 그 검색 과정 전부 소프트웨어를 만드는 것의 일부입니다.

검색 : JavaScript get element by css selector multiple

HTML DOM querySelectorAll() Method

검색 : document.querySelectorAll

Document.querySelectorAll()

document.querySelectorAll 이외에도 역시 document.querySelector를 통해 찾고자 하는 영역을 확인할 수 있습니다.

하지만 All은 찾고자 하는 영역을 지닌 모든 값을 가져오고, All이 없다면 하나만 가져오는 차이가 있습니다.

document.querySelector/document.querySelectorAll의 사용법은 검색결과를 참조해보시길 바랍니다.

 

4-3.

document.querySelector('a')

이 명령을 통해 우리는 문서에서 모든 a태그를 가져올 수 있고,

그 결과값을 변수 alist에 담았습니다.

실제로 var alist에는 쿼리셀렉터를 통해 선택된 모든 a태그가 담겨져 있습니다.

그 이후의 코드를 살펴보면 alist의 배열에 담겨져 있는 수만큼 반복이 이루어지는 것을 알 수 있습니다.

  var i = 0;
      while(i < alist.length){
        alist[i].style.color = 'powderblue';
        i = i + 1;
        }

따라서 위 코드를 살펴본다면,

index i가 초기 0으로 설정되어 있고, 반복문이 실행될 때마다 그 값이 증가하고 있습니다.

변수 alist의 index를 i로 설정하고 있으니 alist[0], alist[1]...의 순서로 모든 a태그를 호출할 것이고,

호출된 링크에 한해 style.color를 다시 지정해주는 것입니다.

하지만 모든 a태그가 호출될 것이니, 모든 a태그의 색을 변경하는 것으로 이해할 수 있겠습니다.

 

4.4

See the Pen JavaScript#8 by nani6765 (@nani6765) on CodePen.

이렇게 반복문과 배열을 학습하고, 실제로 웹사이트에 어떻게 작용하는지까지 알아보았습니다.

다음시간은 '함수'에 대하여 살펴 볼 예정입니다.