setTimeout(함수, 초) -> 시간 지연
ex) 몇초 뒤 함수 기능 작용
setInterval(함수, 초) -> 시간 반복
ex) 몇초 마다 함수 기능 작용
초가 아닌 분 단위 계선은 연산자 % 사용
ex)
150/60 -> 2.5
150%60 -> 30
3분을 카운트할 경우.
let time = 180
const aaa = setInterval(() => {
const hour = Math.floor(time/60)
const minute = String(time%60).padStart(2,"0")
if(time > 0){
time = time - 1
console.log(`${hour}:${minute}`)
}if(time === 0){
clearInterval(aaa)
}
}, 1000);
1. 3분인 180초를 선언.
2. setInterval 사용.
3. 분은 time을 60으로 나눈 다음 소숫점을 버림.
4. 초는 % 60을 사용.
5. Time = time - 1 할당.
6. Time<0일떄 clearInterval()사용하여 함수 멈춤.
7. padStart(자릿수, 빈칸에 넣을 값) 활용하여 초 단위 두자리로 만들기.
이 기능을 이용해서
이렇게 '인증버튼 전송' 버튼을 누를 시 시간이 움직이고, 시간이 0초가 되면 '인증완료' 버튼이 비활성화 되는 기능을 만들어봤다.
*참고 기능
<button disable = {onoff}>인증완료</button>
-> 버튼 비활성화. onoff가 state이며 useState(false)를 기본 값으로 설정. (true)로 바뀔 시 버튼 비활성화.
<button onClick = {handleClickSendAuth}>인증번호 전송</button>
-> 클릭 시 handleClickSendAuth() 함수 적용됨.
*HTTP란?
-> 두 컴퓨터간에 텍스트 데이터를 주고 받는 길.
프론트엔드와 백엔드가 요청(request)과 응답(response)를 서로 주고 받는다.
API
-> http 요청을 back-end에 보냈을 때 실행되는 백엔드 긴으.
rest-API
grapth-API
CRUD
Create
Read
Update
Delete
미리보기 화면이 이상하다.