New 병아리 개발자

# 자바 날짜 비교하여 날짜간의 차이 구하기.

• 현재날짜와 기존에 등록된 날짜를 비교하여 며칠 차이나는지 구하여 로그인 시 장기간 동일한 비밀번호 사용에 따른 알림으로 비밀번호 변경을 요청 하는 등에 적용할 수 있다.

1. 비교에 앞서 현재 날짜, 비교할 날짜를 가져온다.

  // 현재 날짜 가져오기 (설정한 형식인 "yyyy-MM-dd HH:mm:ss" 대로 가져와진다.
  // current = "2020-08-29 21:58:50";	
  SimpleDateFormat format1 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
  String current = format1.format(System.currentTimeMillis());

  // 저장된 날짜 or 임의의 날짜
  // member에 별도로 updateDate를 두어 이전 날짜를 기록해두었다.
  // String last = "2020-01-01 21:58:50"; 등으로 설정하여 사용 가능
  String last = member.getUpdateDate();	



2. 비교하여 차이 구하기

  // 날짜 차이를 담을 변수 생성
  long calDateDays = 0;

  try{
    SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd"); // 소문자mm으로 할 경우 분을 의미한다.

    // current, last 두 날짜를 parse()를 통해 Date형으로 변환.
    Date currentDate = format.parse(current);
    Date lastDate = format.parse(last);

    // Date로 변환된 두 날짜를 계산한 후, 리턴값으로 long type 변수를 초기화
    // 연산의 결과 -950400000 long type 으로 return
    long calDate = currentDate.getTime() - lastDate.getTime(); 

    // getTime()은 해당날짜를 기준으로1970년 00:00:00 부터 몇 초가 흘렀는지를 반환해준다. 
    // 24*60*60*1000(각 시간값에 따른 차이점) 을 나눠주면 일수가 나온다.
    calDateDays = calDate / ( 24*60*60*1000); 

    calDateDays = Math.abs(calDateDays);

    System.out.println("비밀번호 변경 후 소요된 기간 : "+calDateDays);
  }
  	catch(ParseException e) {
  	// 예외 처리
  }

# lodash

• 자바스크립트 라이브러리 중 하나로 또다른 자바스크립트 라이브러리인 제이쿼리(jquery)와 많이 사용 된다.
• lodash, jquery 사용에 따른 퍼포먼스 차이가 많이 난다.

## 사용하는 방법

• lodash 불러오기 ( 사용 시 _. 로 시작 )

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>

•  jquery 불러오기 ( 사용 시 $ 로 시작 )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

## lodash 적용 예제 (윈도우 넓이 구하기)

### lodash 미 적용

• lodash 미 적용 시 코드. 
• 화면 변동에 따라 계속 실행 됨.

See the Pen lodash 미 적용 by dlagusgh1 (@dlagusgh1) on CodePen.

console.clear();
var $window = $(window);

$window.resize(function() {
	var windowWidth = $window.width();
    
    console.log("windowWidth : " + windowWidth);
});


== 위와 같은 코드 ==
console.clear();
var $window = $(window);

function a() {
	var windowWidth = $window.width();
    
    console.log("windowWidth : " + windowWidth);
}

$window.resize(function() {
	a();
});


== 위와 같은 코드 ==
console.clear();
var $window = $(window);

var a = function () {
	var windowWidth = $window.width();
    
    console.log("windowWidth : " + windowWidth);
}

$window.resize(function() {
	a();
});

## lodash 적용 코드. ( _.Throttle 적용 )

• _.throttle (함수, 시간);
• 입력 주기를 방해하지 않고, 일정 시간 동안의 입력을 모아서 한 번씩 출력을 제한.

See the Pen lodash _.throttle 적용 by dlagusgh1 (@dlagusgh1) on CodePen.

console.clear();
var $window = $(window);

var b = _.throttle(function () {
	var windowWidth = $window.width();
    
    console.log("windowWidth : " + windowWidth);
}, 1000);	// 1초에 1번 실행

$window.resize(function() {
	b();
});

## lodash 적용 코드. ( _.debounce 적용 )

• _.debounce (함수, 시간);
• 입력 주기가 끝나면(입력이 완료되면), 입력한 시간 만큼 딜레이 후 출력한다.
• 여러번 발생하는 이벤트에서, 가장 마지막 이벤트만 실행되도록 만드는 것.
• 회원가입 폼 등에 많이 사용된다.

See the Pen lodash _.debounce 적용 by dlagusgh1 (@dlagusgh1) on CodePen.

console.clear();
var $window = $(window);

var c = _.debounce(function () {
	var windowWidth = $window.width();
    
    console.log("windowWidth : " + windowWidth);
}, 1000);	// 1초에 1번 실행

$window.resize(function() {
	c();
});

## _.throttle 와 _.debounce 차이점

이벤트를 언제 발생 시킬지 시점의 차이가 있다.

debounce : 입력이 끝날때까지 무한정 대기

throttle : 입력이 시작되면 일정 주기를 계속 실행한다.

# CSS 들여쓰기, 내어쓰기

• 들여쓰기, 내어쓰기를 위해 text-indent를 사용한다.
• text-indent의 값이 양수 일 경우 들여쓰기, 음수 일 경우 내어쓰기가 된다.
• text-indent의 값은 기본적으로 0이다.

input {
	text-indent : 1rem;
}

or 

input {
	text-indent : - 1rem;
}

# CSS 색상표 참고 사이트

• https://at-corner.tistory.com/17