발단

요즘에 이것저것 한다고, javascript들을 좀 해 보고 있는데, 배열에 여러가지 작업을 쉽게 할 수 있어 좋은 함수들이 있어, 계속 쓰다가, 나중을 위해 정리 하려고 간단하게 기록.

배열을 loop 돌면서 무언가를 하고 싶다면 아래 함수들을 활용하자.

  • forEach : 한개씩 돌면서 무언가 하기, return value는 없음.
  • filter : 조건에 맞는것만 새로운 배열로. return value는 새 배열.
  • map : 한개씩 돌면서 연산한 결과를 새로운 배열로. return value는 새 배열
  • reduce : 한개씩 돌면서 이전 연산한 결과를 조합하여 사용하기. return value는 reuce 함수안에서 설정한 대로.
    • 무슨 말인지 이해가 어려울 수도 있는데... 알면 쉬움... ;;

간단한, forEach, filter, map 부터

  • 이해하기 쉽도록 되도록이면 쉬운 예제를 만들어 보았다.

forEach - 한개씩 돌면서 무언가 하기

["a", "b", "c"].forEach ( 
    function(x) {
        console.log(x);
    }
)
  • 결과 : 화면에 a, b, c 가 출력 된다.

filter - 배열에서 조건에 맞는것만 새로운 배열만들어 반환하기.

[ 1, 2, 3, 4, 5].filter(
    function(x) {
        return x % 2 == 0;
    }
)
  • 결과 : [ 2, 4 ] 배열이 반환된다.

filter + forEach - 조건에 맞는것만 배열로 만들어, 한개씩 돌면서 무언가 처리 하기

[ 1, 2, 3, 4, 5].filter(
    function(x) {
        return x % 2 == 0;
    }
).forEach ( 
    function(x) {
        console.log(x);
    }
)
  • 결과 : 화면에 2, 4 가 출력 된다.

map - 배열의 각 요소에 무슨짓한 결과를 새 배열로 반환

[ 1, 2, 3, 4, 5].map(
    function(x) {
        return x * 2;
    }
)
  • 결과 : [2, 4, 6, 8, 10] 배열이 반환된다.

map + forEach - 배열의 각 요소에 어떠한 연산을 하고, 그 결과를 하나씩 돌면서 무슨 짓을 하기

[ 1, 2, 3, 4, 5].map(
    function(x) {
        return x * 2;
    }
).forEach ( 
    function(x) {
        console.log(x);
    }
)
  • 결과 : 화면에 2, 4, 6, 8, 10 이 출력 된다.

filter + map + forEach - 배열에서 원하는 요소만 뽑아내고, 그 결과 배열에 어떠한 연산을 하고, 그 결과를 하나씩 돌면서 무슨짓을 하기

[ 1, 2, 3, 4, 5].filter(
    function(x) {
        return x % 2 == 0;
    }
).map(
    function(x) {
        return x * 2;
    }
).forEach ( 
    function(x) {
        console.log(x);
    }
)
  • 결과 : 화면에 4, 8 이 출력 된다.

조금 까다롭지만 활용성이 매우 좋은 reduce

  • reduce는 배열의 순환을 돌면서, 이전 결과를 활용하는 방식이다.
  • forEach, filter, map 과 같이 reduce도 내부에서 함수를 1개 받는데, 파라미터에 여러가지 정보가 들어온다.
  • 함수는 function ( ac, current, index, array ) 4개의 파라미터를 받는다.
    • ac : reduce 호출할때 넘긴 함수의 결과를 보관. 최초 호출될때는 reduce를 호출할때 두번째 넘김 파라미터의 값.
    • current : 배열의 0 번 부터 배열의 마지막까지 순차적으로 전달 됨
    • index : 현재 배열의 몇번째를 loop 돌고 있는지 알려 주는 값
    • array : reduce 함수를 호출한 배열.
  • 긴 설명은 설명이 잘 되어 있는 다른 사이트에서 찾도록 하자.
  • reduce 함수에서 위 4가지 파라미터를 활용하면, filter, map, forEach 를 모두 구현할 수 있다.
  • 즉, reduce 짱짱임.

reduce - 숫자가 들어 있는 배열의 합 구하기

[1, 2].reduce (
    function ( ac, current, index, array ) {
          // 최초 호출될때, ac는 reduce의 두번째 파라미터인 아래에서 넘긴 0 이고,, current는 배열의 0 번째인 1이 들어 있을 것이다.
          // 그러므로 최초 호출 될 때는 return 값이 0 + 1 이므로, 1이 return 될 것이다.
          // 두번째 호출 될 때는 ac는, 첫번째 호출 되었을때, return한 값인 1 값을 가지고, current는 배열의 1번째 2가 들어 있을 것이다.
          // 그리고 두번째 호출 될 때는 return 값이 1 + 2 인 3 이 될 것이다.
          // 더 이상 loop를 돌 아이템이 없으므로, 해당 함수의 리턴값의 3 이 될 것이다.
        ac = ac + current;
        return ac;
    }
,0); // reduce 함수의 두번째 파라미터인 0 은, 위 익명 함수의 ac에 최초 할당 된다.
  • 결과 : 3이 반환 될 것이다.

reduce - string 배열을 순환하면서 모든 배열 item을 1개의 string으로 합치기

[ "안녕", "하세요" ].reduce(
    function ( ac, current, index, array ) {
          // 최초 호출될때, ac는 reduce의 두번째 파라미터인 아래에서 넘긴 "" 값을 가지고, current는 배열의 0 번째 "안녕"의 값이 들어 있을 것이다.
          // 그러므로 최초 호출 될 때는 return 값이 "" + "안녕" 이므로, "안녕"이 return 될 것이다.
          // 두번째 호출 될 때는 ac는 첫번째 호출 되었을때, return한 값인 "안녕" 값을 가지고, current는 배열의 1번째 "하세요"가 들어 있을 것이다.
          // 그리고 두번째 호출 될 때는 return 값이 "안녕"+"하세요"가 될 것이다.
          // 더 이상 돌 item이 없으므로, 결과적으로 해당 함수의 return 값은 "안녕하세요"가 될 것이다.
        return ac + current; 
    }
, "" ) // reduce 함수의 두번째 파라미터인 "" 은, 위 익명 함수의 ac에 최초 할당 된다.
  • 결과 : "안녕하세요" 라는 값이 반환된다.

응? reduce 대신 forEach만 써도 되는거 아닌가?

  • 위 예제들을 사실, forEach만 사용해도 된다.

  • forEach를 사용해서 바로 위의 예제를 구현해 보자.

    let sumString = ""
    ["안녕", "하세요"].forEach(
        function (x) {
            sumString = sumString + x;
        }
    );
  • 위 예제와 주석이 제거된 reduce를 예제를 비교해 보자.

    let sumString = [ "안녕", "하세요" ].reduce(
        function ( ac, current, index, array ) {
           return ac + current; 
        }
    , "");
  • 결과는 동일하지만,

    • forEach는 배열의 loop 결과를 저장하기 위해서, sumString을 선언후 ""를 할당한 뒤 사용해야 했지만,
    • reduce는 배열의 loop 결과를 바로, sumString으로 할당 할 수 있다.

reduce - 배열에서 string type만 Set으로 만들기

[ 1, "안녕", "2", 3].reduce(
    function ( ac, current, index, array ) {
          // 최초 호출될때, ac는 reduce의 두번째 파라미터인 아래에서 넘긴 new Set() 값을 가지고, current는 배열의 0 번째 값인 1이 들어 있을 것이다.
          // 1은 string type이 아니므로, 그냥 ac를 반환한다.
          // 두번째 호출 될 때는 ac는 첫번째 호출 되었을때, return한 값인 new Set()이 그대로 들어 있을 것이고, current는 배열의 1번째 값인 "안녕"이 들어 있을 것이다.
          // "안녕"은 string type이므로, ac.add(current)를 이용해서 Set에 "안녕"을 넣는다. 그리고 ac를 반환한다.
          // 세번째 호출 될 때는 ac는 두번째 호출 되었을때, return한 값인 "안녕"이 들어 있는 Set이 들어 있을 것이고, current는 배열의 2번째 값인 "2"이 들어 있을 것이다.
          // "2"은 string type이므로, ac.add(current)를 이용해서 Set에 "2"을 넣는다. 이제 Set에는 "안녕"과 "2"가 들어 있다. 그리고 ac를 반환한다.
          // 네번째 호출 될 때는 ac는 세번째 호출 되었을때, return한 값인 "안녕"과 "2"가 들어 있는 Set이 들어 있을 것이고, current는 배열의 3번째 값인 3 이 들어 있을 것이다.
          // 3은 string type이 아니므로, "안녕"과 "2"가 들어 있는 ac를 반환한다.
          // 더 이상 돌 item이 없으므로, "안녕"과 "2"가 들어 있는 ac를 최종 반환하고 끝낸다.
        if ( typeof current == "string" ) {
            ac.add(current);
        }
        return ac;
    }
, new Set()); // reduce 함수의 두번째 파라미터인 new Set()은, 위 익명 함수의 ac 에 최초 할당된다.
  • 결과 : "안녕"과 "2"가 들어 있는 Set이 반환된다.

위 예제도, filter와 map 같은걸로 가능할 것 같은데?

  • 당근 가능하다. 위 예제는 Set을 반환했지만, filter + map과 reduce의 비교를 위해, 배열을 반환하도록 코드를 수정하겠다. 그리고 각 배열의 마지막에 "하세요"라는 문자를 추가하도록 하겠다.

  • 우선 filter + map 을 사용해서, 배열에서 string type만 array로 만들어 보자.

    [ 1, "안녕", "미안", 3].filter(
        function ( x ) {
           return typeof x == "string";
        }
    ).map(
        function ( x ) {
           return x + "하세요";
        }
    );
  • 그리고 reduce를 활용해, 배열에서 string type만 array로 만들어 보자..

    [ 1, "안녕", "미안", 3].reduce(
        function ( ac, current, index, array ) {
           if ( typeof current == "string" ) {
               ac.push(current + "하세요");
           }
           return ac;
        }
    , []);
  • 결과는 동일하지만,

    • filter와 map의 조합은 결과를 내기 위해서 배열의 loop를 두번 돌아야 하고, 정확하게는 item 을 6번 가지고 와야 한다. ( filter에서 4번, map에서 2번)
    • reduce는 배열을 한번의 loop를 돌면서 결과를 만들어 낼 수 있다. 정확하게는 item을 4번 가지고 오면 된다.

결론?

  • 처음에는 공부하기도 귀찮고 해서, 안 썼었는데...
  • 다른 강좌를 보다가 예제중에서 이걸 사용하는것들이 있어, 공부를 하게 됐다.
  • 지금은?
    • 거의 모든 배열의 loop는 이 함수들을 이용해서 처리하고 있다.
    • 익숙해 지니깐, 참 편하더라고...

책 읽기

이것저것

  • 책의 내용을 시작하기 전에 이것저것 설명이 나오는데 이 중에서 웹 퍼블리셔라는 용어가 나온다.
    • Q. 저는 웹 퍼플리셔로 일하고 있는데 프런트 엔드 개발자로 커리어를 전향하고 싶어요. 이 책이 도움이 될까요?
    • 프런트 엔드 개발자는 뭔 줄 알겠는데, 웹 퍼플리셔라는 용어를 처음 들어봐서 정리.
    • 웹 퍼블리셔에 대한 설명은 웹 퍼블리셔의 역할 - 프론트 앤드 개발자와 차이점를 방문해서 확인해 보면 쉽게 그림으로 되어 있다.
    • 간단히 정리하면, 예전에 디자이너가 그림을 그리고, 개발자가 코딩을 해야 할 때 중간에 HTML화(?) 시키는 영역이 발전했다고 보면 된다고 한다.
    • 최초에는 HTML화 시키는 일만 했겠지만, 지금은 웹 접근성등을 지켜야 하기 때문에 더 많은 고려를 해야 하는 영역이 되었다고 한다.
    • 하지만 웹퍼블리셔를 돌아보다라는 글을 확인해 보면, 웹 퍼블리셔가 프론트엔드 개발자와 비슷한 개념으로 혼용되고 있는듯 하기도 하다.
    • 뭐.. 암튼 그럼. ㅋ.

읽으면서 정리하기

Vue.js 필수 기술 살펴보기

Vue.js 소개

Vue.js란 무엇인가?

Vue.js의 특징

  • 20페이지 아래쪽 화면 요소를 꾸미는 HTML, CSS 코드와 데이터베이스에서 데이터를 가져와 제어하는 Java 코드가 한 파일에 섞이면서 가독성이 현저하게 떨어졌습니다. 라는 말
    • 이 문장에서 Java는 꼭, Java만들 뜻하는게 아니라, 서버사이드의 코드를 뜻하는것이라고 생각하는게 맞는것 같다. Java나 PHP 등 웹 서버쪽 코드 라고 하는게 더 좋을듯 하다.

개발 환결 설정 및 첫 번째 프로젝트

뷰 학습을 위한 개발 환경 설정하기

Hello Vue.js! 프로젝트 만들기

  • 37 페이지 중간, 뷰 개발자 도구쪽에서 아래와 같이 '파일 URL에 대한 엑세스 허용' 체크 박스에 체크합니다. 라는게 있는데, 요즘에 크롬이 업데이트 되어서 화면이 좀 다르다.
  • 아래의 그림을 참고하여 켜 주면 된다.
  • 옵션을 키고나면 아래와 같이 Toolbar에 Vue 아이콘이 활성화 되고, 개발자 도구 영역에 Vue 라는게 생긴다. 그리고 Vue의 데이터 상태 같은 것도 확인할 수 있다.

화면을 개발하기 위한 필수 단위 - 인스턴스 & 컴포넌트

뷰 인스턴스

  • 46 페이지 마지막 단락 부분에 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않습니다. 라는 말
    • 이 말을 이해하는데 오래 걸렸다.
    • 여기서 설명하는 부분은 beforeUpdate 이벤트(?) 이다.
    • 원래 일반적인 동작에서는 값을 변경하면 화면을 새로 그려야 한다.
    • 이 시점은 아직 새로 그리기 직전이니, 원래 그릴려고 하는 값을 강제로 변경하는 코드를 넣는다고 하더라도, 바뀐 값을 이용해 1번만 그린다. 즉, 원래 값을 강제로 바꾸었다고 해도, 다시 그릴려고 시도하지는 않는다. 는 의미로 받아들이면 될 듯 하다.
    • 책을 읽을때도 좀 이해하기 어려웠는데, 이걸 글로 표현하려고 하니... 어렵네? ㅋ
    • 음... 좀 이상하다. 실제로 beforeUpdate에서 message 값을 변경해 보면, 무한루프 에러가 발생한다. ;; 음.. 아직 뭔 말인지 이해가 잘 되지 않는다. ;;;
    • 여기에서 설명하는 그려지지 않습니다.라는 말은, 가상 DOM에 node를 추가하는것인지, Real DOM에 node를 추가하는것인지 모르겠다. ;;; 암튼 그려준다라는 말의 용어가 좀 더 명확해야 할 듯 하다. 뒤의 내용을 차츰 읽어 가면서, 추후 이 내용에 대한 업데이트를 하겠다.

뷰 컴포넌트

뷰 컴포넌트 통신

상용 웹 앱을 개발하기 위한 필수 기술들 - 라우터 & HTTP 통신

뷰 라우터

뷰 HTTP 통신

화면을 개발하기 위한 기본 지식과 팁 - 템플릿 & 프로젝트 구성

뷰 템플릿

  • 102 페이지 둘째, 복잡한 연산은 인스턴스 안에서 처리하고 화면에는 간단한 연산 결과만 표시해야 합니다. 라는 부분.
    • 간단한 연산 결과만 표시하는것을 권장합니다.라고 읽는게 좋다.
    • 안되는게 아니고, 권장하는것이기 때문에 결과만 표시해야 합니다.라는 말이 정확하지 않다.
    • 물론 그 다음 페이지인 103페이지 두번째 단락에서는 뷰에서 이러한 방식을 권하는 이유는 이라고 설명이 적혀 있긴 하다.

뷰 프로젝트 구성 방법

Vue.js 실전 투입!

실전 애플리케이션 만들기

할 일 관리 앱 살펴보기

프로젝트 생성하고 구조 확인하기

컴포넌트 생성하고 등록하기

  • 137 페이지의 중간 부분에 보면, components를 등록하는 부분이 있다.
    • 그런데 그것만 코드를 넣으면 에러가 난다.
    • 그 페이지 제일 마지막에 있는 import 관련 코드도 같이 적어야 한다.
    • 이 책의 설명이 좋긴 한데, 한 개의 코드 덩어리에서 설명해야 하는 부분을, 두개 이상의 덩어리로 나눠서 설명하는 경우가 있다. 이런 부분이 책을 좀 읽기 어렵게 만드는 경향이 있다.

컴포넌트 내용 구현하기

  • 151 페이지의 아래쪽 예제에서 <li v-for='todoItem in todoItems'>{{ todoItem }}</li> 부분
    • vue 2.2.0 이상에서는 v-bind:key필수로 있어야 한다.
    • 그러므로 vue 2.2.0 이상을 쓰면 아래와 같이 코드를 바꿔야 한다.
    • <li v-for='todoItem in todoItems' v-bind:key='todoItem'>{{ todoItem }}</li>

기존 애플리케이션 구조의 문제점 해결하기

더 나은 사용자 경험을 위한 기능 추가하기

  • 페이지 171의 중간에 있는 :key 속성은 v-for 디렉티브를 사용할 때 지정하는 게 좋습니다. 부분
    • 이미 바로 위인 151 페이지의 내용에 대한 설명에 적어 두었다. vue 2.2.0 이상에서는 :key속성은 필수이다.

Vue.js 고급 개발자 되기

뷰 중.고급 레벨로 올라가기 위한 지식

뷰 개발을 위한 웹팩

뷰 개발을 위한 ES6

뷰 CLI에서 사용하는 NPM

지금 당장 실무에서 써 먹는 Vue.js

뷰와 제이쿼리를 같이 사용해도 되나요?

개발 기간이 너무 짧은데 기존 레거시 고드에 어떻게 뷰를 바로 적용하죠?

뷰에 UI 라이브러리와 차트를 어떻게 연동할까요?

뷰로 프로그레시브 웹 앱을 개발하려면 어떻게 시작해야 하죠?

http://phpschool.com/bbs2/inc_view.html?id=11732&code=tnt2

<link rel=alternate media=print href="http://junyoung.info/aaa.doc">
<a href="javascript:window.print()">프린트</a>


지금 현제 제 서버에 파일을 올려 놓았으니...
그냥 복사 하셔서 실행하시면 될겁니다 ^^
참고로 http:// 이거 꼭 쓰셔야 합니다. 상대경로는 되지 않습니다...

+ Recent posts