일하면서 기록하기

그래들(Gradle)은 그루비(Groovy)를 기반으로 한 빌드도구이다.

근데 그루비는 뭐냐
JVM에서 실행되는 스크립트 언어로 자바를 기반으로 만들어서 자바랑 비슷하다
JVM에서 돌아가기 때문에 자바API도 사용 가능하다.

그래들(Gradle)은 그루비(Groovy)로 만들었고 요즘 메이븐(Maven) 대신 쓰는 빌드도구다.
그래들은 Ant와 Maven의 장점을 모아서 만들었다.

내가 궁금했던거는 lombok같은 라이브러리를 build.gradle 파일의 dependencies에 추가해야 하는데
dependency configuration(의존성 구성)이 뭐 이리 많은지..
dependency configuration는 라이브러리들이 적용될 범위를 정하는 곳이다.
아래는 공식문서다. 영어 잘하면 아래에서 보면된다.
https://docs.gradle.org/current/userguide/java_plugin.html#sec:java_plugin_and_dependency_management

dependency configuration의 종류는 아래와 같다

compile은 연결된 API 모두가 프로젝트에 의해 노출되고
implementation은 노출되지 않는다.
runtimeOnly는 runtime 시에만 필요한 라이브러리 일때 사용

test들어간거는 테스트 수행시에만 적용되는거 등등

출처: https://kotlinworld.com/316

자바스크립트에서 array, object 안에 있는 데이터를 빼서 변수로 만들고 싶을 때 사용

let 사람 = { student : true, age : 20 }
let student = 사람.student;
let age = 사람.age

이렇게 하던거를 더 편하게 할 수 있게 만들어놨다.

//오브젝트
let { student, age } = { student : true, age : 20 }
console.log(student); //true

//배열
let [a, b] = ['안녕', 100]
console.log(a); //안녕

위의 코드 처럼 사용하면 변수를 쉽게 뺄수 있다.
근데 오브젝트에서 더 정확하게 하기 위해서는

let { student : a , age : b } = { student : true, age : 20 };
console.log(b); //20

좌우를 맞춰줘야 한다.

Destructuring 문법도 함수 파라미터에 사용이 가능하다.

왜냐면 함수 파라미터 작명하는 것도 변수만드는 문법과 똑같아서 그렇다.

Destructuring 문법을 사용하기 전에는 아래 처럼 작성하면 변수를 빼서 사용할 수 있다.

let person = { student : true, age : 20 }

function 함수(a, b){
  console.log(a, b)
}
함수(person.student, person.age)

Destructuring 문법을 사용하면  ▼

let person = { student : true, age : 20 }

function 함수({student, age}){
  console.log(student, age)
}
함수({ student : true, age : 20 })

?? 안쉽다..... 나중에 알아보자

그니까 파라미터 변수만들 때 { student, age }라고 쓰면

파라미터로 들어오는 { student : 어쩌구 }는 student 라는 변수에 저장해주세요~

파라미터로 들어오는 { age : 어쩌구 }는 age 라는 변수에 저장해주세요~

라는 뜻입니다. (object 자료니까 변수 작명할 때 object 속성명으로 잘 작명해야함)

항상 같은 모습의 object, array 자료가 들어올 때 쓰는 문법이라고 보면 되겠습니다

rest parameter

함수 (...작명){ }

...작명을 하면 파라미터를 여러개 받을 수 있고

함수 (x,...작명){ }
함수 (x,y...작명){ }

x,...작명 은 필수적으로 한개의 파라미터가 필요한다는 의미이다.
x,y,...작명 는 필수적으로 3개의 파라미터가 필요하다는 의미.

...작명 (rest parameter)를 사용할려면 파라미터를 명시하는 곳에서 제일 마지막에 선언하면 된다.

그리고 rest 파라미터자리에 집어넣은 값들은 전부 [ ] 안에 담긴다.

Spread operator

자바스크립트에서 ...을 쓰는 또다른 기능중 하나는 배열이나 오브젝트를 벗길때 사용하는 Spread operator가 있다.

let arr = [1,2,3];
let arr2 = [4,5];
let arr3 = [...arr, ...arr2]
console.log(arr3 //[1, 2, 3, 4, 5]

를 해보면 결과는 [1, 2, 3, 4, 5] 로 나온다.

설명 참조

https://sgcomputer.tistory.com/152

startWith()

var name = '김동현';

console.log(name.startsWith('김')); //name의 0번째 자리가 '김'인지
console.log(name.startsWith('동',1)); //name의 1번째 자리가 '동'인지

some()

조건에 true가 1개라도 있으면 true, 없으면 false

var nameArray = [
    '김동현', '강호동', '박민기',
    '고민정', '황철순', '지피티',
    '강경원', '박동현', '안철수',
    '김민수', '이준기', '박동훈'
]

var tempData = nameArray.some((item)=>{ //nameArray중에 '김'으로 시작하는 데이터가 있나?
    return item.startsWith('김')
    });

console.log(tempData);

every()

모든 데이터가 조건에 맞는지 확인
예를들면 아래 데이터 중에 모든 사람이 김씨인가? => false

var nameArray = [
    '김동현', '강호동', '박민기',
    '고민정', '황철순', '지피티',
    '강경원', '박동현', '안철수',
    '김민수', '이준기', '박동훈'
]

var tempData = nameArray.every((item)=>{  //모든 데이터가 '김'으로 시작하는가?
	return item.startsWith('김')
    });

var tempData2 = nameArray.every((item)=>{ //모든 데이터의 길이가 0보다 큰가?
	return item.length > 0
    });

console.log(tempData); //false
console.log(tempData2); //true

forEach()

for문처럼 배열에 있는걸 다 돌린다.
근데 멈추는거 없고 그냥 다 돌려버린다.

var nameArray = [
    '김동현', '강호동', '박민기',
 ]
nameArray.forEach((item, index)=>{
    console.log(item, index);
});

map()

map는 array를 리턴한다.

var nameArray = [
    '김동현', '강호동', '박민기',
    '고민정', '황철순', '지피티',
    '강경원', '박동현', '안철수',
    '김민수', '이준기', '박동훈'
 ]
 
var tempData = nameArray.map((item)=>{
    return item
})

console.log(tempData);

ex) 배열안의 여러 데이터 중에서 예를들어 이름이라던지, 나이라던지 하나의 데이터만 뽑아와서 배열을 만들 수 있다.
엄청 많은 데이터 중에서 원하는 데이터만 뽑아서 새로 데이터를 만들어서 작업 가능

filter()

var nameArray = [
    '김동현', '강호동', '박민기',
    '고민정', '황철순', '지피티',
    '강경원', '박동현', '안철수',
    '김민수', '이준기', '박동훈'
 ]
var tempData = nameArray.filter((item)=>{
    return item.startsWith('김');
})

console.log(tempData);

pop()

배열의 맨 뒤에꺼 삭제

 let 배열 = [1,2,3,4];
console.log(배열.pop()) //4
console.log(배열) //[1, 2, 3]

push()

배열 맨뒤에 데이터 삽입

        let 배열 = [1,2,3,4];
        console.log(배열.push(6)) //5번째 (0부터시작이 아니라 1부터 시작해서 5번째 자리)
        console.log(배열) // [1, 2, 3, 4, 6]

unshift()

배열 맨 앞에 데이터 삽입

let 배열 = [1,2,3,4];
배열.unshift(0)
console.log(배열) // [0, 1, 2, 3, 4]

shift()

배열 맨 앞에 값 삭제

let 배열 = [1,2,3,4];
배열.shift()
console.log(배열) // [2, 3, 4]

splice()

splice( index, 제거할 요소 개수, 배열에 추가될 요소 )

var 배열 = [1,2,3,4];
배열.splice(0,1) //0번째부터 1번째 자리 전까지 삭제
console.log(배열) // [2, 3, 4]

배열 = [1,2,3,4];
배열.splice(0,2) //0번째부터 2번째 자리 전까지 삭제
console.log(배열) // [3, 4]

배열 = [1,2,3,4];
배열.splice(1,2) //1번째부터 4번째 자리 전까지 삭제
console.log(배열) // [1, 4]

var 배열 = [1,2,3,4,5];
배열.splice(0,2,"a","b") //0번째부터 2번째 자리 전(1~2)까지 삭제 후 그자리에 데이터 삽입
console.log(배열) // ['a', 'b', 3, 4, 5]

배열 = [1,2,3,4,5];
배열.splice(1,3,"a","b") //1번째부터 3번째 자리 전(2~3)까지 삭제 후 그자리에 데이터 삽입
console.log(배열) // [1, 'a', 'b', 5]

배열 = [1,2,3,4,5];
배열.splice(3,4,"a","b") //3번째부터 4번째 자리 전(4~5)까지 삭제 후 그자리에 데이터 삽입
console.log(배열) // [1, 2, 3, 'a', 'b']

그리고 위의 코드에서 자른 배열.splice(~) 를 콘솔로 출력해 보면 잘린 데이터가 출력된다

var 배열 = [1,2,3,4,5];
var result = 배열.splice(0,2,"a","b") 
console.log(result) //[1, 2]

배열 = [1,2,3,4,5];
result = 배열.splice(1,3,"a","b")
console.log(result) //[2, 3, 4]

배열 = [1,2,3,4,5];
result = 배열.splice(3,4,"a","b")
console.log(result) //[4, 5]

slice()

slice( start_Index, end_Index)

start_Index부터 end_Index-1 자리 까지 데이터를 삭제한다.

    var arr = [ 1, 2, 3, 4, 5, 6, 7 ];
    var newArr = arr.slice( 3, 6 );
    console.log('arr', arr);
    console.log( 'slice',  newArr ); // [ 4, 5, 6 ]

map()

배열의 각 원소별로 지정된 함수를 실행한 결과로 구성된 새로운 배열을 반환한다.

    var people = [
        {name:"김사원", age:30, sex:"남"},
        {name:"이사원", age:29, sex:"여"},
        {name:"권대리", age:31, sex:"남"},
        {name:"전대리", age:32, sex:"남"},
        {name:"전과장", age:30, sex:"여"},
        {name:"박과장", age:30, sex:"여"},
        {name:"박인턴", age:23, sex:"여"},
    ]
    var tempArray1= [];
    var tempArray2= [];
    people.map(function(row){
        if(row.sex === "여"){
            if(row.age > 25){
                tempArray1.push(row.name)
            }
        }
        if(row.name.indexOf("대리") != -1){
            tempArray2.push(row.name)
        }
    })
    console.log("25살 이상인 여자는 "+tempArray1);
    console.log("대리는 "+tempArray2)

리턴값으로 무슨타입인지 string 으로 알려준다.

근데 배열도 object로 알려준다.

그래서 타입이 배열인지 확인하기 위해서는 isArray() 를 사용해야한다.

Array.isArray() 를 사용하면된다.
그럼 아래 사진처럼 리턴값으로 true, false를 반환한다.

첫번째 인자는 배열의 인자값,
두번째 인자는 그 인자값의 인덱스 (몇번째인지),
세번째 인자는 배열이 찍힌다. (현재는 testArray의 배열이 그대로 찍힌다.)

1~5까지 있는 배열에서 3보다 큰수만 골라내 보면

 1.위에 처럼 하면 된다.

2.근데 보통 위 사진 처럼  function을 따로 빼서 만든다.

3.애로우 펑션을 쓰면 이렇게....

var filterTest = [
    {name:'김동현', age:'31', position:'대리', sex:'남'},
    {name:'이준기', age:'20', position:'사원', sex:'남'},
    {name:'운지기', age:'45', position:'과장', sex:'여'},
    {name:'지피티', age:'35', position:'대리', sex:'여'},
    {name:'김계란', age:'65', position:'사장', sex:'남'},
    {name:'각선미', age:'22', position:'사원', sex:'남'},
    {name:'김수란', age:'26', position:'주임', sex:'여'},
    {name:'아이유', age:'26', position:'가수', sex:'여'},
    {name:'박박박', age:'36', position:'과장', sex:'남'},
    {name:'박오십', age:'55', position:'부장', sex:'남'},
    {name:'박동현', age:'32', position:'대리', sex:'남'},
    {name:'김대리', age:'28', position:'대리', sex:'여'},
    {name:'유대리', age:'30', position:'대리', sex:'여'},
    {name:'최대리', age:'29', position:'대리', sex:'남'},
    {name:'이주임', age:'27', position:'주임', sex:'여'},
    {name:'문주임', age:'30', position:'주임', sex:'남'},
    {name:'박사원', age:'23', position:'사원', sex:'여'},
    {name:'김사원', age:'26', position:'사원', sex:'남'},
    ]


   var testJson = JSON.stringify(filterTest);

json형태의 데이터가 있으면 filter를 이용해서 원하는 데이터만 뽑아낼 수있다.

남자이면서 대리 인 조건을 하면 위에 처럼된다.

thisArg 매개변수? 하는데 이렇게 사용할 수 도 있다.

참고 

https://aljjabaegi.tistory.com/312

자바스크립트에서 함수를 선언하는 방법중에 함수 선언식, 함수표현식, 화살표 함수 란게 있다

함수 선언문은 함수의 이름을 꼭 써야 한다.

function 함수명() {
	구현로직
}

함수 표현식은 익명 함수표현식과, 기명 함수표현식으로 나뉜다.
말그대로 함수 이름이 있냐 없냐 차이다.

let test1 = function(){
	return '익명 함수표현식';
}

let test2 = function test2(){
	return '기명 함수표현식';
}

왜 이렇게 다르게 사용하느냐?

함수 선언식은 호이스팅의 영향을 받지만
함수 표현식은 호이스팅의 영향을 받지 않기 때문이다.

개발할때보면 내가 의도치 않게 함수가 먼저 읽히거나 실행되서 의도하지 않은 동작이 이뤄질 수 있다.
그걸 방지 할려면 함수 선언문과 표현식을 잘 구분해서 사용하면 되겠다.

호이스팅이란?
JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정
https://developer.mozilla.org/ko/docs/Glossary/Hoisting

   //testFunc(); 에러

    let testFunc = function() {
        console.log('1');
    }
    
    testFunc(); //1출력

함수표현식으로 만든 trstFunc를 선언하기전에 먼저 불러내면 (함수보다 윗줄에서 호출하면)
testFunc is not a function 이라는 에러메세지가 나온다.

​하지만

testtt(); //2 출력

function testtt(){
	console.log('2');
}

testtt(); //2출력​

함수 선언문을 사용하면 함수를 선언한 줄 보다 위에 호출해도 2가 잘 출력된다

이게 호이스팅이다.

​그럼 각각의 장점을 알아보자

함수표현식의 장점
1. 호이스팅의 영향을 받지 않는다
2. 클로저로 사용한다.
3. 콜백으로 사용한다. (다른 함수의 인자로 넘길 수 있다.)

​

 출처

https://gmlwjd9405.github.io/2019/04/20/function-declaration-vs-function-expression.html

https://ko.javascript.info/new-function