자스 (javascript) iteration

[ 이글은 2017년 04월 15일에 최종 수정되었습니다. ]
§

iteration 을 구글번역기 돌렸더니 “되풀이” 라고 번역이 되서. ㅋㅋㅋ

이 단어를 한글로 어떻게 표현해야 할지 몰라 그냥 iteration 이라고 놔둡니다.

[댓글에 요즘 코더들은 (퍼블리셔? 한국에만 있는 직종인건 아는데 정확하게 이분들이 어떤 코딩을 하는지는 잘 모르구요.) 자스 iteration 도 모른다는 글을 남기신 분이 계셔서 머리도 식힐겸 자스 (javascript) iteration 에 관해 짤막한 글을 써봅니다.]

자스 (javascript) 에서 iteration 이란 어떤 조건이 맞는경우, 같은 과정을 반복해서 하라는 명령문 입니다.

for (var i = 1; i < 10; i++) { 

위 스크립트는 1에서 시작해서 9 까지 9번 반복하라는 내용입니다. 10이 보이는데 왜 아홉번만 도냐구요?

“오.. 울 아빠 똑똑하네. iteration 은 0 에서부터 시작하니까 i<10 으로 써야 구구단 9 까지 출력되지."

라고 제가 구구단 차트 짜고 있는걸 보던 제 아들이 한마디 훈수둠. ㅋㅋㅋ

제 아들 말 대로 숫자는 0 에서 시작하니까요.

그러니까 i=0 이 첫번째고, i=1 은 사실 두번째 iteration 인겁니다.

암튼 이 for 는 단순히, “어떠어떠한 경우” 라는 뜻 입니다. 경우에 맞는 경우에만 iteration, loop 을 돌려야 하니까요.

일단 자스 (javascript) 를 전혀 모르는 웹디자이너 같은분들을 위한 간단한 설명부터 하겠습니다.

자스로 구구단 차트를 만들려면 두개의 값어치를 서로 곱셈해주면 됩니다.

2 X 1, 2 X 2, 2 X 3……. 9 X 9

자스에서 곱셈은 엑셀과 똑같습니다. * (키보드 8 + shift key)

그래서 5 X 2 = 10 을 자스로 쓰자면,

5*2 가 됩니다. 이 곱셈의 숫자를 알파펫으로 치환(?) 하고 웹문서에 표현을 하자면 이렇게 하면 됩니다.

var a = 5;
var b = 2;
var c =  a * b;
document.querySelector("#result").innerHTML = c;

네 jQuery 접해보신 분들은 이 10 이라는 결과물이 id 가 result 라는 이름의 element 에 들어가야 한다는게 이해되시죠? 이런식으로.

<div id="result"></div>

그럼 이제 div 나 테이블 을 짜서 이 곱셈의 결과물을 하나 하나 넣어줘야 할까요? 물론 그렇게 할수 도 있는데 개삽질이 되겠죠? 자스 (javascript) 로 이 과정을 반복하는 것이 바로 이 iteration 입니다. [물론 다른 언어에도 모두 iteration 기능이 존재합니다.]

개삽질은 하지 말아야 하니까, 곱셈을 반복해 넣어 보겠습니다. 아, 일단 그전에 9 개의 div 를 자동생성하겠습니다. 이런식으로.

for (var i = 1; i < 10; i++) {

    document.querySelector('#multiplication').insertAdjacentHTML('afterbegin', '<div class="wrapper">');

이글 제일 처음에서 설명드렸듯이, 1 부터 시작해서 10번반복되는 (하지만 1부터 시작하니 실제는 아홉번) iteration 입니다. multiplication 이란 이름의 div 에 wrapper 라는 클래스 명을 가진 div 를 집어 넣어라.
몇번? 9번. 알파벳 i 를 쓰는 이유는 이게 iteration 이란걸 강조하게 되니까 사용하는거고, 다른 이유는 없습니다. (a 도 되고 b 도 되고, 하지만 i 를 주로 쓰게 되는거죠.)

아, insertAdjacentHTML 은 jQuery 의 append, prepend 와 같은 기능을 하는 쌩 자스 명령어 입니다. wrapper 라는 div 를 언제? afterbegin, 즉 multiplication 이란 div 가 시작한 후 넣으라고 한 겁니다.

암튼, 이렇게 9개의 wrapper 라는 이름의 div 가 생성되었습니다.

그 다음에, 곱셈을 해줘야 겠죠? 제일 위 예제처럼 두개의 var (variable) 을 곱해줄건데, h*i, 이런식으로, 이것 역시 무한정 곱셈을 하지 않고, 9번만 해줘야겠죠? (안그러면 구구단이 아니니까요. ㅋㅋㅋ)

for (var h = 1; h < 10; h++) { // 9번 반복

뭘 곱한다? 두개의 var 을. h * i 그리고 이걸 어디에 넣는다? wrapper 라는 클래스명을 가진 div 에. 각 결과물의 클래스명은? cell.

document.querySelectorAll('.wrapper')[0].innerHTML += "<div class ='cell'>" + h * i + "</div>";

*jQuery 와 달리 쌩 자스에서는 id 냐 class 냐에 따라 querySelector 나 querySelectorAll 을 써야 합니다. (옛날 방식으로는 getElementById 나 getElementsByClassName)

이럼 구구단 차트 끝.

최종 결과물.

소스코드: https://hackya.com/tutorial/javascript/multiplication.html

우클릭, 저장하기 하시면 되구요.

**코드를 퍼다가 조금더 살펴보실 분들은/공부하실 분들은, 제가 왜 css 를 자스 (javascript) 에서 먹인 경우도 있고, html 의 css 로 먹인 경우도 있는지를 잘 생각해 보셨으면 좋겠습니다. (현업 front-end 작업하시는 분들이라면 이 부분도 상당히 중요합니다.)

이런 iteration 이 언제 필요하냐구요?

면접볼때 저같은 꼰대가 코딩스킬 확인한다며 이런거 짜보라고 할 때 필요합니다. ㅋㅋㅋㅋ 농담이고, 사실 iteration 은 UI 구축시 꼭 필요한 기술 입니다. 양식 (form), 슬라이더, 페이징등을 구축할때 필수적으로 사용되거든요.

그렇지만 front-end/UI 개발자로 일할때 iteration 을 쓰게 되는 경우가 드문이유는, 요즘 자스 (javascript) 는 Angular 같은 framework 나 library 에서 이 iteration 을 abstraction 으로 제공해 주기 때문에 굳이 내가 이걸 직접 짜게 되는 경우가 거의 없기 때문입니다.

한술 더 떠서 슬라이더 같은건 인스턴트 음식처럼 css 까지 다 완성되어 플러그인 형태로 제공되기도 하죠.

슬라이더 버튼의 예를 들어서 iteration 을 설명드릴까 생각하다 댓글에 구구단 얘기도 나왔고, 슬라이더 iteration 같은 경우는, 코딩자체가 몹시 길어져서 좋은 예제가 되지 못할 것 같아서 간단한 구구단 iteration 을 예제로 삼았습니다.

나중에 기회가 되면 (시간이 좀 있으면) 다른, 좀더 실질적인 iteration 에 대한 튜토리얼글을 작성하게 될지도 모르겠습니다.

Ω