[3일차] state 복습과 타이머 / HTTP 통신 개념 정리

1. 타이머 관련 정리

• 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() 함수 적용됨.

---

2. HTTP 통신

*HTTP란?
-> 두 컴퓨터간에 텍스트 데이터를 주고 받는 길.
프론트엔드와 백엔드가 요청(request)과 응답(response)를 서로 주고 받는다.

API
-> http 요청을 back-end에 보냈을 때 실행되는 백엔드 긴으.

rest-API

• API 이름이 홈페이지 주소처럼 생김 ex)http://naver.com/board/1
• 응답 결과를 골라 받을 수 없으며 모든 데이터를 받아야 함
• 요청담당자 axios
• POST(생성)/ PUT(수정)/ DELETE(삭제)/ GET(조회)

grapth-API

• API 이름이 일반적인 함수와 같음
• 필요한 데이터만 골라 받을 수 있음
• 요청담당자 apollo-client
• MUTATION(생성, 수정, 삭제) QUERY(조회)

CRUD

Create
Read
Update
Delete

---

미리보기 화면이 이상하다.