일하면서 기록하기

https://dkfkslsksh.tistory.com/72

http://devstory.ibksplatform.com/2019/04/vue.html

https://cchoimin.tistory.com/96

자바스크립트의 라이브러리중 하나.

jQuery가 HTML문서를 조작하거나 DOM이벤트를 처리할 목적으로 만들어 졌다면

언더스코어는 자바스크립트를  LISP처럼 사용할 수 있게 만들어주는 라이브러리다.
매우 작은 용량에 80여가지의 function을 제공한다.

https://namu.wiki/w/%EC%96%B8%EB%8D%94%EC%8A%A4%EC%BD%94%EC%96%B4

https://harrythegreat.tistory.com/entry/%EC%96%B8%EB%8D%94%EC%8A%A4%EC%BD%94%EC%96%B4-%EC%A0%95%EB%A6%AC#%EC%96%B8%EB%8D%94%EC%8A%A4%EC%BD%94%EC%96%B4%EB%9E%80

https://cyberx.tistory.com/161

언더스코어 선언

언더스코어 홈페이지 들어가서 라이브러리 주소를 적거나 cdn주소를 넣으면된다.

1. 홈페이지에서 라이브러리 다운 -> 프로젝트에 파일 복사 -> <script src=" 경로 "></script> 하기
2. CDN주소 선언하기 (인터넷연결이 되있어야함)

https://underscorejs.org/#

응용 1

extend로 데이터 tepm변수에 복사한다음
allkeys로 데이터 뽑아서
filter로 데이터 있는지, if문처럼 하고
map으로 한줄씩 데이터 가공해서 표만들거나 배열 생성

_.contains(list, index, [fromIndex])

contains _.contains(list, value, [fromIndex])
	list: colletion으로써, 배열이나 객체가 될 수 있다.
	value: 배열의 element나, 객체의 value가 될 수 있다.
	[fromIndex]: list에서 value를 찾을 때, 찾기 시작하는 index이다.(생략가능)
	--> list안에 value가 있는지 확인하고, 있으면, true를 리턴한다.
    
 ex) _.contains([1, 2, 3], 3); // true

=> 간단히 말하면 첫번째 인자인 list중에 두번째인가인 value값을 찾아서 있으면 true, 없으면 false

_.extend(target, obj1, obj2,...)

응용

잘못된 예 extend할때 파라미터의 위치에 따라 결과가 달라진다. 이에 대한 내용은 아래 주소 참고 https://hyunseob.github.io/2016/07/23/underscore-extend/

_.filter(list, predicate, [context])

list : colletion으로 배열리나 객체가 될 수 있다.
predicate : list의 각 요소의 결과값이 true인지 확인하는 함수
[context] : predicate 함수에서 this로 바인딩 되는 것 (생략가능)

==> list에 담겨있는거를 차례대로 하나씩 가져와서 predicate에 선언한 함수대로 돌려서 true값을 리턴해준다.

let testNumber=[1,2,3,4,5,6];
const result = _.filter(testNumber, function(row){
                      return row % 2 == 0;
                    });
console.log(result);
//[2, 4, 6]
====================================================
let testObject = {"a":1, "b":2, "c":3, "d":4, "e":5, "f":6};
const result = _.filter(testObject, function(row){
                      return row % 2 == 0;
                 	});
console.log(result);
//[2, 4, 6]
====================================================
let testNumber=[1,2,3,4,5,6];
let context =[10,21,30,41,50,61];
console.log("testNumber = ["+testNumber+"]");
console.log("_.filter의 파라미터중 [context] = [10,21,30,41,50,61] 일때");
const result = _.filter(testNumber, function(row){
                console.log("row = "+row+", this[row] = "+this[row]);
                if(this[row] % 2 == 0){
                  console.log(this[row]+" % 2 == 0 는 true");
                }else{
                  console.log(this[row]+" % 2 == 0 는 false");
                }

                  return this[row] % 2 == 0;
                },
                context);
console.log(result);
//[2, 4]

결과: row 는 1부터 시작해서 context의 21부터 시작하게 된다. context는 this가 되고 this[0] = 10, this[1] = 21, this[2] = 30, ... 순서대로 된다.

출처 : https://velog.io/@yunsungyang-omc/underscore.js.filter-%ED%95%A8%EC%88%98

출처 : https://medium.com/@cheonmyung0217/underscore-js-filter-%ED%95%A8%EC%88%98-51feea16b3b8

_.keys

obj의 key 반환

//_.keys(object)
_.keys({one: 1, two: 2, three: 3});
=> ["one", "two", "three"]

출처: https://harrythegreat.tistory.com/entry/언더스코어-정리 

_.allKeys

obj의 모든 inherited properties 출력

//_.allKeys(object)
function Stooge(name) {
  this.name = name;
}
Stooge.prototype.silly = true;
_.allKeys(new Stooge("Moe"));
=> ["name", "silly"]

출처: https://harrythegreat.tistory.com/entry/언더스코어-정리

출처 : https://harrythegreat.tistory.com/entry/%EC%96%B8%EB%8D%94%EC%8A%A4%EC%BD%94%EC%96%B4-%EC%A0%95%EB%A6%AC

리턴값이 같은것 끼리 array로 묶는다.

//_.groupBy(list, iteratee, [context]) 

_.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); }); 
=> {1: [1.3], 2: [2.1, 2.4]} 

_.groupBy(['one', 'two', 'three'], 'length'); 
=> {3: ["one", "two"], 5: ["three"]}

https://harrythegreat.tistory.com/entry/%EC%96%B8%EB%8D%94%EC%8A%A4%EC%BD%94%EC%96%B4-%EC%A0%95%EB%A6%AC

한 파일에 다 써도 되지만 보기 편하고 수정하기 편하게 하기 위해 자주 쓰는 태그? 컴포넌트나 데이터는 다른 파일에 작성하고 끌어다 쓴다.

이런 div창을 만든다고 할때 한 파일안에 작성해두면 코드가 길어지니까 함수처럼? 만들수 있다.

1. 먼저 파일을 새로 생성한 다음에 위에 사진처럼 div 박스를 작성한다.
파일명은 Discount.vue로 했다.

<template>

    <div class="discount">
        <h4>지금 결제하면 20% 할인</h4>
    </div>

</template>

<script>

export default {
    name: 'Discount',
}

</script>

<style>
.discount {
  background: #eee;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
}
</style>

위에 코드가 자식 이 될꺼고 저걸 부모파일에 사용할 거다. 그렇기 때문에 <script>의 export default부분에 
name: 'Discount'이렇게 작성했다. name이부분은 그냥 작명하면 된다는데 왜 넣는건지는 잘 모르겠다ㅎㅎ

2. 그리고 사용할 부모창에서 import를 해준다.

<template>
	<p>1</p>
	<Discount/>
    <p>2</p>

</template>

<script>

import Discount from './Discount.vue';

export default {
  name: 'App',
  data(){
    return {
       products : roomData
      , modalNum : 0
    }
  },

  methods : {

  },
  components: {
    Discount : Discount,
    //왼쪽에는 아무렇게나 이름을 지어도 된다. 이 화면에서 사용할 이름을 짓는 부분
  }
}
</script>

<style>

</style>

먼저 위 코드처럼 <script>아래에 import문을 작성한다.
import 변수명(아무렇게나) from '경로';
변수명은 부모창에서 사용할 변수를 적으면 된다.

3. 그다름 components 부분에 import한 걸 선언해주면 된다.
왼쪽에는 내가 원하는 변수명을 쓰면되고(작명) 오른쪽에는 import에 적었던 변수를 적으면된다.
만약 둘이 똑같이 쓰면 그냥  Discount라고 적으면된다.

4. 그리고 내가 원하는 부분에 <내가 정한 변수명/>을 하면 쓸 수 있다.

이런식으로 사용이 가능하다.

부모가 가진 데이터를 자식창에서 사용하고 싶을때 쓰는 방법

예를 들어
1. component를 위해 다른 파일에 박스창을 만든다.
2. 부모창에 component를 쓰기 위해 import를 한다.
3. 부모창에 데이터를 상속?하기 위해 데이터 바인딩을 한다. 아래 처럼 적는다.

부모화면
<template>

	<Modal :products="products"/>
    <!-- <Modal v-bind: products="products"/> -->
    
</template>

<script>

import Modal from './Modal.vue';

export default {
  name: 'App',
  data(){
    return {
      products : roomData      
    }
  },

  methods : {
  },

  components: {
    Modal : Modal,
    //왼쪽에는 아무렇게나 이름을 지어도 된다. 이 화면에서 사용할 이름을 짓는 부분
  }
}

</script>

4. 다른 파일에 있는걸 사용하기위해 import를 한다. <script> 바로 아래부분에 import를 적어준다.
import 변수명 from 파일경로;

5. compents 부분에는 왼쪽에 현재 창에서 사용할 변수명을 짓고
오른쪽에는 import한 이름을 쓴다.

6. 사용할 부분에 <Modal/>이렇게 쓰고 바인딩을 위해 v-bind:를 쓴다.
<Modal v-bind: 작명="아래에 선언한 데이터명">
v-bind는 :로 써도 된다
<Modal :작명="아래에 선언한 데이터명">

7. 그리고 자식창의 <script>부분에 props를 작성한다.

<script>

export default {
    name: 'Modal',
    props : {
      products: Object,
      //부모창에 있는 데이터 명을 적고 오른쪽에는 데이터의 형식을 적는다.
    }
}

</script>

이렇게 하면 부모창에서 components를 사용할 수 있다.

web.xml에 설정된 파라미터를 getInitParameter()메서드를 통해 참조할 수도 있지만
단순 문자열이 아닌 객체를 참조하는 방법이 listener이다.

프로그래밍에서의 listener은 귀 기울여 기다리다가 실행되는 컴포넌트(메소드나 함수)를 말한다.

리스너는 이벤트가 발생함과 동시에 특정 행동을 하는데,
이걸 이벤트 핸들링이라고 한다.

위 박스에서 listener에 적힌 ContextLoaderListener은 2개 이상의 dispatcherServlet를 생성했을때 필요하다.

ContextLoaderListener를 선언하지 않고 dispatcherServlet을 A,B 두개를 선언하면 각각의 독립적인 context를 가지게 된다. 
근데 만약 A와 B 둘 모두에게 필요한 bean이 있어야 한다면 전역Context를 만들고 그안에 bean을 생성하면 어디서든 접근이 가능해진다.

이때, ContextLoaderListener을 사용해 전역 Context를 생성해 줄 수 있다.

출처 : https://pangtrue.tistory.com/136

https://pangtrue.tistory.com/136

출처 : 코끼리를 냉장고에 넣는 방법 :: [서블릿/JSP] 리스너(Listner)란? 이벤트 리스너의 개념 설명. 구현 및 등록하기 (tistory.com)