[javascript] D-Day-Counter (4)

기능은 모두 구현하였지만, 문제점이 2가지가 존재한다.

 

• 버튼을 누르면 countMaker가 1초마다 반복된다. 하지만 입력값을 변경하면 그 숫자대로 변경된다. 
  이 문제를 해결하기 위하여 입력값은 버튼이 누를 때에만 갱신되도록 만들어야 한다.
• 유효하지 않는 시간과 지난 시간은 clearInterval을 진행하는 바람에, 원하는 메세지가 뜨지 않고 "D-Day를 입력해주세요" 가 뜬다. 이 문제를 해결하기 위하여 기능에 따라 함수를 구분해야 한다.

함수

1번 문제를 해결하기 위하여 전달 인자와 매개 변수의 개념을 이해해야 한다.

두 가지 모두 함수 외부에서 데이터를 전달 받아, 내부에서 사용하기 위한 수단이다.

 

• 매개 변수 : 함수 선언 시에 소괄호 안에 정의되는 변수이다.
• 전달 인자 : 함수 호출 시, 함수 내부로 전달하는 변수이다.

실행 순서는 전달 인자를 매개 변수에 넣어주면서, 함수를 실행한다.

매개 변수와 전달 인자가 없는 경우	return을 통하여 내부에서 외부로 건네주고, 함수를 실행하여 데이터를 받아올 수 있다.
매개 변수와 전달 인자가 있는 경우	직접 함수 내부로 호출할 때 건네줄 수 있다.

 

const sum = function(a, b){
	console.log(a, b) // 매개 변수 (parameter)
}

sum(a, b) // 전달 인자 (argument)

localStorage

web storage : 브라우저에 데이터를 저장할 수 있는 기술이다. 새로고침해도 데이터 남길 수 있다.

 

session-storage	local-storage
key-value 형태로 저장
로컬 환경에서 데이터 저장
세션 단위 구분 종료 후 영구 삭제 웹 페이지 접속 ~ 종료 시점까지	도메인 단위 구분 브라우저 종료 시에도 존재 setItem과 getItem 이용하여 데이터 조작 가능.