자스 (javascript) iteration

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

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 에 대한 튜토리얼글을 작성하게 될지도 모르겠습니다.

Tags: , , , , , ,

카테고리: ,

Ω
  • bastcode

    그리고 개발자들은 그 다음 미션도 같이 내죠. ㅎㅎ

    자 그럼 정렬 기준을 바꿔서 출력해봐!

    우어어… 그러니깐 왼쪽이… 출력… 다음이… 다음줄… 어라?

    여차저차 해결 하면

    그 다음은 마방진이닷! 마방진 5*5 으로 만들어봐!
    이러면 다들 검색해서 마방진 소스 찾아냄 [하도 많이 내도 유명한 문제]

    그럼 전 여기다 씨익 웃어주고는 한마디 하죠.

    마방진을 정렬 시켜봐.

    근데 사실… 구구만 정렬까지만 할줄 알면 나머지는 그저 유희에 지나지 않습니다.
    알고리즘의 정석은 누가 뭐래도 구구단!

    • http://hackya.com Matthew

      마방진이 뭔지 몰라 구글링 했더니.. 크아… magic square ㅋㅋㅋㅋㅋ

      그런데 sorting algorithm 같은 low level 스크립팅은 사실 front-end 개발자 영역이 아닙니다. 앱 이나 software 만드는 프로그래머 영역이죠.

      그리고 요즘은 앱을 만들어도 일반 개발자들이 이런 low level 스크립팅을 할 이유도 기회도 없습니다. 모듈만 가져다 연결하고 재조합 해서 결과물을 빨리 빨리 뽑아내야 하는게 근대 개발 추세라…

      안그러면 코딩해서 밥먹고 살기 힘들어서 치킨 튀겨야죠. ㅎㅎㅎ

      • bastcode

        넵 맞습니다 ㅋㅋ
        구구단 에다가 정렬 수준만 하면 더 팔거 없어요.
        그래서 “구구만 정렬까지만 할줄 알면 나머지는 그저 유희”
        심심하면 한번 찾아서 도전해 보면 됩니다. ㅋㅋ
        절대 필수가 아니죠.
        [그런데 헬 조선 대학교에선 아직도 이게 필수 과목중 하나]

  • 겨울나무

    ES6를 이용하면 더욱 재밌습니다 ㅋㅋㅋㅋㅋ

    […Array(8)].forEach( (_, i) => […Array(9)].forEach( (_, j)=> console.log(` ${i+2} X ${j+1} = ${(i+2)*(j+1)}`) ));

    자스 배운지 1년정도 된 초보이지만 JS 스터디에서 DOM 가져오는거 빼고는 거의 모든 로직을 자스로만 짭니다. 마음먹고 배우면 누구나 잘 할수 있다고 생각하지만, 각자가 가지는 우선순위나 기준이 달라서 그냥 저렇게 하나보다 생각을 합니다. 정작 저도 회사에서는 VueJS를 쓰긴 합니다만, 알고 모르고의 차이가 해당 라이브러리, 프레임워크에 대한 이해와 활용도를 더 높여 주는거 같더군요.

    • http://hackya.com Matthew

      “각자가 가지는 우선순위나 기준이 달라서 그냥 저렇게 하나보다 생각을 합니다.”

      일명 cowboy 코더라고 합니다. 유아독존 코더? ㅎㅎㅎ

      좋은 개발팀 이라면 어떤 standard 가 있어야 하는거고 팀원들은 그 standard 에 맞는 코딩을 하는게 정석입니다. 그리고 코딩에 global standard 라고 해야 하나, 어느 경우에도 따라야 하는 standard 를 best practice 라고 합니다.

      “DOM 가져오는거 빼고는 거의 모든 로직을 자스로만 짭니다.” – 절대 performant coding 이 아니니 삼가하셔야 하며, future proof 도 아닙니다.

      무슨 얘기냐?

      el {scroll-behavior: smooth;}

      css 로 이거 한줄이면 해결되는걸, 이걸 몰라서 자스로 수십줄을 짜는게 performant coding 이 아닌겁니다. 물론 이건 현재 가능한 css 는 아니고, (파폭에서만 작동하니) 하나의 간단한 예를 든것 입니다.

      일단 앱의 성능/속도에도 악영향을 끼치지만, future proof 도 아닌거죠. 앞으로는 css 한줄로 해결될 수 있는걸 (고로 미래에 쓸모도 없는걸) 많은 시간을 들여 자스 코딩을 한거니까.

      이런 시간낭비를 하면 사수한테 머리통 한대 맞을수도. 사수가 구타충동을 느낄수도 있습니다. ㅋㅋㅋㅋ

      아, 이런 예의 경우는 polyfill 을 사용하는게 best practice 이며 앱을 future proof 하는 방법입니다. 나중에 브라우져가 업데이트 되면 polyfill 을 빼서 버리면 되는거죠.

      • bastcode

        미쿡은 시간낭비 하면서 만들기라도 하나 보군요 ㅋㅋ
        헬조선은 시간낭비하고 만들지도 못하는 사람 수두룩 합니다 OTL
        하나부터 열까지 가르쳐야 가능한 경력자는 대체 왜 뽑는…

        • http://hackya.com Matthew

          네, 아주 열심히 만들죠. 회사 플젝 말고 지들 개인플젝!!!! OTL

          그런데 회사일만 제대로 해놓으면 뭐라고 하기도 그런게 저도 그랬었고, 다들 그러거든요.

          또 그 느낌 아니까.. 쩝.

          왜 그럴때 있잖아요. 힘든 고비를 막 넘겨서 이제 막 시원시원하게 코딩하게 되는 기간. (그리고 마지막 10% ~ 15% 정도 남기고 다시 힘들어지고.)

          그런데 그 시기가 바로 어제밤에 왔다. 그리고 그 상태에서 아침에 출근한 상태면, 회사 나와서도 자꾸 내 플젝을 꺼내서 슬쩍 슬쩍 코딩하게 되는건 어쩔수 없는거죠. (사실 저도 가끔 그런다는. ㅋㅋㅋ)

          저는 크게 뭐라고 하는 편은 아닙니다. “야, 너 할건 지금 다하고 그거 하는거냐?” 정도로 한마디 하고 맙니다.

          • bastcode

            저도 그 느낌 아니깐~
            QA 하세요 하고 던져놓고는 딴거 찾아보죠 ~
            더 좋은 방법은 해보고 싶은 기술 도입을 필요하다고 제안하고
            스터디겸 실무 투입도 같이 하고 있습니다 ㅋㅋㅋ

      • 겨울나무

        음… 역시 제가 표현을 제대로 못한거 같네요.

        제 개인 프로젝트, 스터디를 할 때, 구조, 행위, 표현 계층에서 행위에 대해서 JQuery를 짜는 부분을 JS로 짜는거고 CSS로 대체할수 있는 부분은 CSS로 대체를 합니다. 예를 들면 캐러셀 같은 부분을 공부차원에서 짤때에는 좌표랑 클래스 변환만 JS로 하고 좌 -> 우 로 이동하는 것은 transition이나 기타 다른 CSS를 이용합니다. 그게 더 간단하기도 하고 좀더 성능면에서도 좋으니까요.

        그리고 회사에서의 일할때는 회사 표준에 맞춰서 라이브러리와 프레임워크를 씁니다.

        제 개인 프로젝트, 공부 차원에서 그런다고 한건데, 제가 좀 다른 사람들에 대해서는 좀 안좋게 말하는 듯한 뉘앙스로 글이 쓰여진거 같네요.^^;

        • http://hackya.com Matthew

          아… 제가 난독증이 심해서요. ^^;;;

          저는 같은 팀에서 서로 다른 기준의 코딩을 한다고 잘못 이해 했… ㅎㅎㅎ