2021-06-28 :: 로그인, 회원가입 만들기2

로그인 페이지 만들기

리액트 라우터(react-router-dom)에서 {Link}라는 컴포넌트를 가져와서 테그로 사용한다.

<Link to="/path" component={CompName}>

SPA에서는 Link를 사용한다. 기존 <a href="/path">는 새로 고침이 발생한다. 화면 깜빡이 발생하며 기존 state가 손실된다.

 

가장 쉬운 로그인 구현 방법은 백앤드 서버 재실행이다. 혹은 브라우저에 저장되어 있는 로그인 정보를 삭제하면 된다.

개발자모드 application 탭에 가서 쿠키나 세션가서 로그인 정보(passport에서는 connect.sid)를 삭제해주면 된다.

 

CORS에러를 백앤드에서 해결한 경우 여전히 cross origin통신이므로 option 요청이 발생한다.

또한, proxy 서버를 사용하지 않는 경우 api 통신 경로에 http://localhost:3000  이거 다 입력해 주어야 한다.

swr 사용하기(쿠키 공유하기)

회원가입도 성공하고 로그인도 성공한 뒤 그 상태를 어떻게 확인할 것인가

보통 서버에서 받은 데이터를 프론트에 저장한다.

로그아웃할 때에는 프론트에서 해당 데이터를 삭제하면 된다.

이러한 작업에 리덕스가 필요하다. state로 해결할 수 있지 않느냐 질문할 수 있지만

다른 페이지에서도 로그인 정보를 사용해야하기 때문에 리덕스로 처리해야 한다.(전역 데이터)

이번에는 리덕스 대신에 swr을 통해 해당 작업을 처리해보겠다.

 

swr은 보통 get 요청을 많이 사용한다. 그런데 로그인할 때 post요청 해야하는데 어떡해야하나

근데 쉽게 post한 뒤 get요청 한다고 생각하면 된다.

npm i swr (Next.js만든 회사, 믿음직한 패키지이다.)

useSWR의 두번째 인자는 어떤 처리를 할 것인가를 의미한다. 첫 번째 인자는 요쳥경로. 사실 useSWR 자체는 큰 역할이 없다.

두 번째 인자로 fetcher을 넘겨준다. 그리고 fetcher을 직접 구현해 준다. swr의 이점은 fetcher를 어떻게 쓰냐에 따라 갈린다.

 

첫 번째 반환은 response, 두 번째 반환은 error를 넣는다.

swr 자체 요청 규칙이 있다. 탭 전환 시에도 다시 요청을 보내 데이터를 최신화 한다.

 

프론트서버와 백앤드서버의 origin이 다른 경우 쿠키가 공유가 안된다.

axios get 요청의 두번 째 인자, post 요청에서는 세 번째 인자에 withCredentials: true라는 설정을 추가하자.

해당 설정을 완료하면 백앤드와 프론트앤드 간 쿠키가 공유가 되고, 로그인에 성공하면 프론트단에 쿠키가 생성된다.

쿠키는 항상 백에서 생성을 한 뒤 프론트에서 기억하게 한다. 또한 쿠키를 보내는 작업은 프론트에서 한다?

proxy 서버를 사용하는 경우, 즉 origin이 같은 경우에는 해당 문제가 발생하지 않는다.

 

swr과 비슷한 패키지로 react query이 있다. 비교하고 사용하자.

 

로그인은 보통 쿠키에 저장하고 관리를 한다. CORS는 브라우저에서 발생한다.

수업에서 언급한 proxy는 배포후에는 사용하지 않는다. 개발단계에서 CORS를 해결하기 위해서 사용하는 것

 

let을 사용하지 않고 state를 사용하는 이유가 있다. state는 같은 컴포넌트 간의 전역 데이터가 된다.

뭐하나 입력할 때 마다 계속 리렌더링 되어서 값이 초기화 된다. 변수는 그냥 쓰지말자.

화면에 반영되는 값은 state를 사용하고 반영되지 않는 값은 ref로 사용하자

 

프론트에서의 배포

dist파일만 app.js, index.html만 만들어서 백앤드에게 가져다 주면 끝이다.

proxy는 대리인이라는 뜻. 단어 같다고 같은 개념으로 사용되지 않는 경우도 많다.

SWR 설정 살펴보기

swr이 지속적인 요청을 보내는 것에 대한 단점 역시 있다.

로그인을 누르고 완료가 된다면 swr users를 호출하기(원할 때 호출하기)

swr이 몇 초 간격으로 요청을 보내기(주기적으로 호출하기)

프론트앤드 개발 잘못하면 백앤드에 ddos 공격을 보낼 수도 있다..ㅋㅋ

useSWR함수의 반환으로 revalidate()를 받아서 성공했을 때 revalidate를 호출하면 로그인 하는 순간 호출이된다? 원할 때 호출할 수 있다. 데이터가 최신화가 된다. 

useSWR의 세 번째 인자로 dedupingInterval 설정. 기간 내에는 캐시에서 불러온다. 주기적으로 호출은 된다. 언제 호출하고 언제 호출하지 않을지에 대한 결정

 

SWR 설정 option

loadingTimeout: 타임아웃 트리거

errorRetryInterval: 요청 너무 많을 때 서버 다운되는데, 그 재요청에 인터벌을 주어 서버의 부담을 덜어줄 수 있다

dedupingInterval: 기간을 정해놓고 기간 내에는 캐시에 저장을 해두고 캐시에서 가져온다. 이거는 자주 쓴다.

refreshWhenOffline: 탭 전활할 때

워크스페이스 만들기 + 로그아웃하기

슬랙 구조 자체가 워크스페이스 안에 채널이 있다.

children 사용한 함수에서 타입 에러나면 :FC 사용하자

 

1. Login컴포넌트에서 post 요청

2. 성공을 한 경우 revalidate()를 실행

3. data 값이 최신화가 됨

4. 로그인에 성공한 경우 Redirect 해준다.

if(data) return <Redirect to ="/path"/> 

swr이 전역적으로 데이터를 관리해준다. 전역 스토리지

 

return 이 있는 객체나 함수는 항상 hooks 아래에 있어야한다. 아니면 에러가 난다. 매우 중요

해당 처리 도중 깜빡임이 거슬린다면 로딩 설정을 해주어야 한다.

로그인 상태에 대한 설정을 data변수에 저장을 한다. 

if(!data == undefined) return <div>loadingpage </div>

레이아웃은 안바뀌는 부분. appbar 그 안에 바뀌는 부분은 page폴더에 저장한다.