실버벨의 Stack Overflow

# chapter 4. 스트림 소개

-. 스트림이란

데이터 컬렉션 반복을 멋지게 처리하는 기능.

cf> 스트림을 이용하면 멀티스레드 코드를 구현하지 않아도 데이터를 투명하게 병렬로 처리할 수 있다.

[JAVA 7]

List<Dish> lowColoricDishes = new ArrayList<>();

for(Dish dish : menu) {

    if(dish.getCalory() < 400) {

        lowColoricDishes.add(dish);

    }

}

Collections.sort(lowColoricDishes, new Comparator<Dish>() {

    public int compare(Dish dish1, Dish dish2) {

        return Integer.compare(dish1.getCalory(),  dish2.getCalory());

    }

});

List<String> lowCaloricDishesName = new ArrayList<>();

for(Dish dish : lowColoricDishes) {

    lowCaloricDishesName.add(dish.getName());

}

[JAVA 8]

import static java.util.Comparator.comparing;

import static java.uti;l.stream.Collectors.toList;

List<String> lowCaloricDishesName = menu.stream()

                                        .filter(d -> d.getCalory() < 400)              // 400칼로리 이하의 요리  선택

                                        .sorted(comparing(Dish::getCalory))            // 칼로리로 요리  정렬

                                        .map(Dish::getName)                            // 요리명  추출

                                        .collect(toList());                            // 모든  요리명을 리스트에 저장

filter 같은 연산은 고수준 빌딩 블록으로 이루어져 있으므로 특정 스레딩 모델에 제한되지 않고 자유롭게 어떤 상황에서든 사용할 수 있다.

결과적으로 우리는 데이터 처리 과정을 병렬화하면서 스레드와 락을 걱정할 필요가 없다. 이 모든 것이 스트림 API 덕분이다.

-. 스트림 이란

데이터 처리 연산을 지원하도록 소스에서 추출된 연속된 요소

• 연속된 요소

            컬렉션과 마찬가지로 스트림은 특정 요소 형식으로 이루어진 연속된 값 집합의 인터페이스를 제공한다.

            but, 컬렉션의 주제는 데이터이고 스트림의 주제는 계산이다.

• 소스

            스트림은 컬렉션, 배열, I/O 자원등의 데이터 제공 소스로부터 데이터를 소비한다.

            즉, 정렬된 컬렉션으로 스트림을 생성하면 정렬이 그대로 유지된다. 

• 데이터 처리 연산

            스트림은 함수형 프로그래밍 언어에서 일반적으로 지원하는 연산과 데이터베이스와 비슷한 연산을 지원한다.

            ex> filter, map, reduce, find, match

            스트림 연산은 순차적으로 또는 병렬로 실행할 수 있다.

스트림도 딱 한번만 탐색할 수 있다.

한번 탐색한 요소를 탐색하고 싶다면?) 초기 데이터 소스에서 새로운 스트림을 만들어야 한다.

컬렉션과 스트림의 또 다른 차이는 데이터 반복 처리 방법이다.

• 내부반복 : 스트림

• 외부반복 : 컬렉션

-. 중간연산

스트림을 반환하며 서로 연결할 수 있는 연산

[sample] filter, map, limit 중간연산에 해당

List<String> names = menu.stream()

                                              .filter(dish -> dish.getCalories() > 300)

                                              .map(Dish::getName)

                                              .limit(3)

                                              .collect(toList());

[debug]

List<String> names = menu.stream()

                         .filter(dish -> {

                                    System.out.println("filtering:" + dish.getName());

                                    dish.getCalories() > 300

                                 })

                         .map(dish ->

                                    System.out.println("mapping:" + dish.getName());

                                    return dish.getName();

                                 })

                         .limit(3)

                         .collect(toList());

System.out.println(names);

[output]

filtering:pork

mapping:pork

filtering:beef

mapping:beef

filtering:chicken

mapping:chicken

[pork, beef, chicken]

=> 하나의 데이터가 중간 연산(filter -> map)과정을 다 돌고나서 다음 데이터를 처리한다.

[참고] 중간연산

[참고] 최종연산

# SUBSTR (대상문자열, 시작위치, 길이)

 -> 대상문자열을 시작위치 부터 길이만큼 짜르기 

ex>

# INSTR(대상문자열, 타겟문자열, 시작위치, 횟수)

 -> 타겟문자열이 시작위치에서 몇 번째에 있는지 위치 반환

ex> STR = '방그리는 오늘도 눈부시다'

ps. 시작위치는 1부터 시작한다.

# 혼합형 예제

# ERROR : ORA-00918 : 열의 정의가 애매합니다.

# 원인 : 조회시에 같은 이름의 Column이 있고, 조회(select)시에 어떤 값을 사용할 지 결정할 수 없어 나는 오류.

# 해결방법

1) ALIAS를 사용하여 이름을 구분지어 중복되는 컬럼 값이 없게 한다.

2) 중복되는 컬럼 제거

* 메인 함수 예제

vue js를 하면서 자바 스크립트 함수도 써보니 정말 좋은거 같다.ㅎㅎ

javascript는 기존의 경험했던 c/c++ 보다 문자열조작에 있어서 상대적으로 쉬운것 같다.

- 문자열.split ('element') : element에 따라서 배열을 만들어 준다. 

ex> 'hello my name is eun.'

    => [ "h", "e", "l", "l", "o", " ", "m", "y", " ", "n", "a", "m", "e", " ", "i", "s", " ", "e", "u", "n", "." ]

- 배열.reverse() : 배열의 순서를 바꿔준다.

ex> [ "h", "e", "l", "l", "o", " ", "m", "y", " ", "n", "a", "m", "e", " ", "i", "s", " ", "e", "u", "n", "." ]

     => [ ".", "n", "u", "e", " ", "s", "i", " ", "e", "m", "a", "n", " ", "y", "m", " ", "o", "l", "l", "e", "h" ]

- 문자열.join('element' : char형 배열을 문자열(string)형으로 만들어준다. element값이 배열 중간중간에 들어간다.

ex1>  .join('')

    [ ".", "n", "u", "e", " ", "s", "i", " ", "e", "m", "a", "n", " ", "y", "m", " ", "o", "l", "l", "e", "h" ]

    => .nue si eman ym olleh

ex2> .join('|')

    [ ".", "n", "u", "e", " ", "s", "i", " ", "e", "m", "a", "n", " ", "y", "m", " ", "o", "l", "l", "e", "h" ]

    => .|n|u|e| |s|i| |e|m|a|n| |y|m| |o|l|l|e|h

// 포맷 설정
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
Date currentTime = new Date();
String date = format.format(currentTime);

String end_dt = "2019-05-31 00:00:00.0";

Date endDate = format.parse(end_dt);
Date todate = format.parse(date);

System.out.println("endDate:" + endDate);
System.out.println("todate:" + todate);
int compare = endDate.compareTo(todate);

System.out.println("compare:"+ compare);

if(compare >= 0) {
System.out.println("사용가능");
} else {
System.out.println("유효기간만료");
}

• 참고 : velopert 님 vue js 강좌
• 실습 : https://jsbin.com/?html,js,output
• 최신 Vue.js 가져오기 : <script src="https://unpkg.com/vue/dist/vue.js">

디렉티브

• If / else if / else

=========== Script ===========

Var app = new Vue({

el : ‘#app’, // element 를 finder로 잡기

data : {

value : 0 // json형태의 데이터

}

});

=========== HTML ===========

<div id="app">

  <h1 v-if="value > 5"> value가 5보다 크군요. </h1>

  <h1 v-else-if="value === 5">값이 5 입니다.</h1>

  <h1 v-else> value가 5보다 작습니다. </h1>

<h2 v-once>초기 값: {{ value }}</h2>

  <h2>현재 값: {{ value }}</h2>

<h1 v-pre>{{ 이건 그대로 렌더링해줘요 }}</h1>

</div>

===========================

• v-bind : 엘리먼트의 속성을 동적으로 사용하자.

? 언제 사용하는가) HTML엘리먼트의 속성값을 데이터값으로 사용하고 싶을때

? 사용법)

=========== Script ===========

// 새로운 뷰를 정의합니다

var app = new Vue({

  el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다

  // data 는 해당 뷰에서 사용할 정보를 지닙니다

  data: {

    name: 'Vue',

    mark : true,

    gs : 'https://t1.daumcdn.net/cfile/tistory/1523C2044B42D89F09',

    lf : 'http://www.lfcorp.com/ko/assets/images/share/share_img.png'

  }   

});

=========== HTML ===========

<div id="app">

    <h1>Hello, {{ name }}</h1>

    <h2>{{ Date() }}</h2>

    <img :src="mark ? gs : lf"/>   

  </div>

===========================

(주의)==> value 처럼 {{}} 이런걸 사용할줄 알았는데 저렇게 사용하면 오히려 error발생

• v-for : 동적 데이터를 렌더링 할때 사용한다.

=========== Script ===========

// 새로운 뷰를 정의합니다

var app = new Vue({

  el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다

  // data 는 해당 뷰에서 사용할 정보를 지닙니다

  data:{

    todos: [

      { text: 'Vue.js 튜토리얼 작성하기' },

      { text: 'Webpack2 알아보기' },

      { text: '사이드 프로젝트 진행하기' }

    ]

  }

});

=========== HTML ===========

<div id="app">

    <h2> 오늘 할일 </h2>

    <ul>

      <li v-for="(todo, index) in todos">

        {{index + 1}}번쨰, {{todo.text}}

      </li>

    </ul>

  </div>

===========================

• v-model : 양방향 데이터 바인딩

=========== Script ===========

// 새로운 뷰를 정의합니다

var app = new Vue({

  el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다

  // data 는 해당 뷰에서 사용할 정보를 지닙니다

  data:{

    name : 'silver bell',

    isGs : true,

    gs : 'https://t1.daumcdn.net/cfile/tistory/1523C2044B42D89F09',

    lf : 'http://www.lfcorp.com/ko/assets/images/share/share_img.png'

  }

});

=========== HTML ===========

<div id="app">

    <h1>Hello, {{ name }}</h1>

    <h3><input type="checkbox" v-model="isGs"/>우리회사</h3>

    <img v-bind:src="isGs ? gs : lf"/>

</div>

===========================

• v-on : 이벤트 핸들링

=========== Script ===========

var app = new Vue({

  el: '#app', 

  data: {

    number: 0

  },

  // app 뷰 인스턴스를 위한 메소드들

  methods: {

    increment: function() {

      // 인스턴스 내부의 데이터모델에 접근 할 땐,

      // this 를 사용한다

      this.number++;

    },

    decrement: function() {

      this.number--;

    }

  }

});

=========== HTML ===========

<div id="app">

    <h1>카운터: {{ number }}</h1>

    <button v-on:click="increment">증가</button>

    <button @click="decrement">감소</button>

</div>

===========================

==> 이벤트 핸들링을 걸기위한 디렉티브는 v-on이지만 @로 대체가 가능하다.

/*

* 기간 검색 버튼 css 처리

*/

$('.date_search li').on('click', function() {

$('.date_search button').removeClass('on');

var $this = $(this);

$this.find('button').addClass('on');

});

Sample.