생활코딩 12일차 [21.01.27]

<배열과 반복문>

배열(Array)과 반복문(Loop)을 왜 같이 배울까? 같이 배우는 데에는 이유가 있지 않을까?

 

회사의 직원들을 나열하는 웹 페이지를 만든다고 예를 들어보고, 일단 4명이라고 가정하고 1차원적으로 나타내보자.

만약 수시로 직원을 채용하고 떠나보내고, 그리고 직원의 수가 1억 명이라고 가정을 해보자. 그러면 우리는 또 비효율성을 맞닥뜨리게 된다.

직원들의 명단을 Array로 만들고 이 Array만 수정해주면 밑에 직원들의 명단이 자동으로 나열(by Loop)되는 코드를 짜면 어떨까? 

추가로 직원들의 프로필 링크를 걸어두는 것 또한 어떨까?

 

① 직원들 명단(Array) 자동으로 나열(by Loop)

 

직원 4명의 명단을 coworkers라는 Array로 만들었고, 반복문을 통해 4명의 직원들을 리스트로 나열하였다.

여기서 살펴볼 것은 JS의 화면출력 코드 소괄호 안의 '<li>'+coworkers[i]+'</li>' 이다.

document.write()는 JS에서 화면 출력의 코드이다. 그리고 소괄호 안에는 출력할 문자를 따옴표를 통해서 적는다.

즉, 따옴표로 처리된 문자는 JS안에 있지만 외부로 HTML의 세계로 출력되는 코드이고,

     따옴표로 처리가 안 된 문자는 JS안의 코드여서 JS의 문법의 영향을 받는 코드이다.

리스트 태그인 <li>와 </li>에 따옴표를 처리해주는 이유는 화면으로 출력하여 HTML의 세계로 보내어 리스트 처리하기 위해서이다.

coworkers[i]는 coworkers라는 Array의 i번째 항목을 가리키는 코드이고 JS의 문법이기 때문에 따옴표 처리를 하지 않는다.

그리고 coworkers[i] 좌우에 +가 붙은 이유는, 이게 없다면 coworkes[i]가 아니라 좌우에 다른 문자들이 붙은 것이기 떄문에 컴퓨터가 coworkes[i]를 인식하지 못한다. 이를 구별해주기 위해서 +를 붙인다.

 

좋은 코드, 실력이 좋은 개발자란 무엇을 얘기할까? 효율성을 최대화하여 생산성을 높이는 코드, 이를 만드는 사람을 좋은 개발자라고 할 것이다. 직원들의 명단이 매주 바뀐다고 가정해보자. 반복문에서 (i<4)라고 되어있는데, 직원들의 수가 바뀔 때마다 밑의 숫자도 수정해주어야 할 것이다. 숫자 대신 Array의 수로 대체하면 밑의 코드들은 명단이 수정되어도 신경을 꺼도 되지 않을까?

coworkers.length로 대체해주고 Array에 명단만 수정해도 리스트들이 알아서 업데이트된다.

 

② 직원들 프로필링크 걸어보기

 

이때 유의할 점은, HTML의 세계로 출력해 HTML 문법의 영향을 받는 코드와 JS 문법의 영향을 받는 코드간의 구분을 잘 해서

+와 따옴표를 잘 쓰는 것이다.

<a href="www.a.com/'+coworkers[i]+'">'의 코드를 살펴보자.

링크를 걸어줄 웹 주소는 www.a.com/직원이름 이다. 링크를 걸어주는 a 태그는 HTML 문법의 영향을 받기 때문에 따옴표 처리를 해준다. 그리고 웹 주소 슬래쉬 뒤에 직원이름을 JS문법을 통해서 작성하기 때문에 +와 coworkers[i]로 처리한다. 그리고 뒤에 마저 적어주기 위해 작은 따옴표로 처리된 ">를 마저 써주면 JS와 HTML 합작의 a 태그가 완성된다.