slack 실시간 채팅(2)

Hook 커스텀

hook을 custom 한 것이다. 

이러면 코드중복을 없앨 수 있다.

 

useInput을 커스텀 하게되어서 붉은색 부분의 코드 중복을 없앨 수 있게 된것이다.

 

 

구조분해할당 방법

 

return 이 위 처럼 세개의 파라마터로 되는데

 

나는 세번째는 사용하지 않아도 되었다.

 

그런 경우에는 그냥 안쓰면된다.

와우

 

나는 이제 useState를 안쓰고 내가 만든 useInput을 사용하고 싶은데, 어떻게 해야할까?

 

이렇게 사용하면된다. 나는 useInput에서 두번째 파라미터가 필요없으므로 이렇게 , , 를 사용해서 비워주면 되는 것이다.

 

타입스크립트는 변수 , 매개변수 , 리턴값에 타입을 쓰는 것이라고 하였다.

위 코드는 1, 2번 제네릭으로 타입을 사용한 것이다. 매개변수에 String이 들어오게되면 나머지 T들도 String으로 변환된다.

3번 변수의 타입은 타입스크립트에서 알아서 추론을 한다고 한다.

 

 

 

서버 통신 axios

서버와 비동기 통신을 위해 axios를 npm i 한다.

 

then : 성공시

catch: 실패시

finally: 성공 실패 둘다.

 

 

 

지금 현재 3090(front)에서 -> 3095(back)으로의 통신이 되는 이유는 백엔드에서

이러한 cors 처리를 해주었기 때문인데,

 

주석 처리하게되면 이러한 오류가 생긴다.

해결방법은

1. 백엔드 개발자에게 해결해달라고 하기.

2. 내가 해결하기

 

와 이거 내가 혼자 할때는 안돼서 오만 짓을 다했는데 되네 ㅋㅋ

프론트에서 /api/로 주소를 사용하면 http://localhost:3095로 바꿔주는 것이라고 생각하면된다.

 

바꿔주는 것 잊지말고 

위 두코드가 똑같다고 생각이 되지만 다르다.

3090 -> 3095로 보내는것과

아래는

3095 -> 3095 로 보내는 것이다.

 

그러나 이방법은 둘다 localhost일때 사용이 가능하다.

 

 

UseState('')

UseState(0)

UseState(false)

UseState의 초기값은 위 처럼 두면 값을 안에 넣었을때 false처리 되므로 좋다.

 

비동기 통신에서 State를 받기 전에 한번 초기화를 해주는 것이 좋다. 

그 이유는 연달아 날릴때 첫번째 요청에서 남아있던 결과값이 두번째 요청에서도 똑같이 반영될 수도 있기 때문이다.

 

로그인 상태 해제하는 방법

1. 서버 껏다 다시 키기.

2.

애플리케이션에서 세션 삭제하기.

 

SWR

useSWR을 쓰는 이유는 뭘까?

전역적으로 상태를 관리하기 위함이다. 그리고

원래는 redux가 많이 사용되었지만, 최근에는 ContextAPI , useSWR을 사용한다고 한다.

 

 

 

로그인을 하지 않았을때, SWR은 false를 return 한다.

SWR의 장점은 실시간 채팅의 경우 , 몇시간만 지나도 옛날 채팅으로 가득찰 것인데 SWR은 탭 전환이 이루어질때 자동으로 요청이 보내어지므로 항상 최신으로 유지할 수 있게 된다.

 

withCredentials는 post 요청시에는 세번째 파라미터 ,

 

withCredentials get 요청시에는 두번째 파라미터 이다.

 

withCredential은 백엔드 서버에서 프론트서버로 쿠키생성 , 프론트에서 백엔드로 데이터도 전달하게 해준다.

쿠키라는 것은 항상 백엔드 에서 생성되어서 프론트엔드 브라우저가 기억하게 해준다. 

프론트엔드에서는 한번 기억한 쿠키를 매요청마다 백엔드로 보내준다.

 

Q&A

missmatchError를 state를 사용하지않고 , 위처럼 선언하면 안될까? 

안되는 이유는 onChange에 의해서 글자하나가 입력될때마다 missmatchError라는 변수는 false로 초기화가 되기때문에 계속 그 값을 유지하게 될 것이다.

 

화면에 반영되는 데이터는 state로 하고, 화면에 반영되지않아도 되는 것은 useRef로 한다.

 

그러면 이거는요??

signUp 함수 바깥에 이렇게 생성한거는 어떻게 생각하시나요?

이러면 onChange에 의해 초기화가 계속 생기지는 않는다. 그러면 어디서 오류가 생길까.

이 컴포넌트를 여러개 쓰는 경우에 전역변수처럼 사용되어 에러가 생길 수 있다.

 

SWR 설정

1. 내가 원할때 SWR을 호출 할 수 있다.

2. 일정주기로 SWR을 호출 할 수 있다.

-> 일정한 주기 설정을 잘 해야 하는 이유는 서버에 너무 잦은 간격으로 요청을 보내게 되면 서버에 부하가 걸리기 때문이다.

 

revalidate 는 로그인 성공시에 실행되는 함수 이다. 그러므로 바로 fetcher가 실행이 될 수 있게해준다.

 

dedupingInterval 

dedupingInterval을 사용하지 않으면 swr이 재요청 하는 기준이 다른 텝을 갔다가 오는 경우 재요청을 보내게 되고 dedupingInterval 옵션을 추가하게 되면 그 시간안에는 탭을 갔다와도 재요청을 보내지 않고 캐시해서 그대로 데이터를 사용하다가 그 시간이 끝나면 다시 재요청을 보내는 것