[React] 로그인 / 회원가입

★ React-router에서는 <a> 말고 <Link>를 써야 한다. <a>사용시 페이지 새로고침이 일어나므로 화면만 변경되고 데이터 변경이 없는 <Link>를 사용해야 한다.

 

★ front / back-end를 localhost로 사용할때는 로그인 된 정보를 메모리에 저장하고 있기 때문에 서버를 재시작해야 로그인 정보가 없어짐

 

★ back-end를 끄기 힘든 상황이면 front에서 application에 들어가서 cookie를 로그인 정보를 삭제

 

★ webpack-dev-server에서 proxy 옵션을 사용하여 fake localhost 주소를 만들어 cors 문제를 해결 할 수 있음

 

★ front 개발자가 로그인 성공을 알 수 있는 데이터는 응답으로 온 데이터의 유/무, 로그인시에는 데이터를 front에서 저장하고 있고 로그아웃시 데이터를 지워버리면 됨

 

★ state에 로그인 데이터를 저장하면 안되는 이유는 state는 한 컴포넌트에서만 사용되는 변수이기 때문에 전체 컴포넌트가 알 수 있도록 전역으로 저장을 해야 함

 

★ 전역 데이터를 React에서 관리하는 것으로는 Redux가 있으며 대안으로 Context API, SWR, React query등이 있다

 

★ SWR은 get / post / delete / put 모든 요청을 보내는 것이 가능하나 SWR이 하는 역할은 데이터를 가져와서 저장하고 그 데이터를 React에서 사용하는 것이다. get 역할에 특화

 

★ SWR을 비동기 요청에서 사용시 주소를 fetcher로 넘기는 역할을 하는 것이며 return에서 데이터를 받아 저장하여 사용함, 데이터는 꼭 응답 데이터가 아니라 데이터를 가공하여 여러가지 데이터를 받아 사용 가능

 

★ SWR에서 데이터가 존재하지 않을시 조건문을 넣어 loading중 이런식으로 해 놓으면 사용자 경험에 좋음

 

★ SWR은 커스터마이징이 가능하며 다른 tab을 갔다오면 요청을 한 번 더 보낸다, 데이터를 항상 최신화

 

★ front와 back은 도메인이 다른 경우 cookie를 주거나 받기가 불가능하나 "withCredentials: true" 옵션을 적용하면 cookie를 받는 것이 가능

 

★ cookie의 경우 항상 back에서 생성하고 front 브라우저가 기억하게끔 하는것이고 front에서는 한 번 기억한 cookie를 매 요청마다 back으로 보내는 것임

 

★ 화면에 반영되는 데이터는 state를 사용하며 아닌 경우는 Ref를 사용해라

 

★ 직접 SWR을 컨트롤해야 하는 상황으로는 로그인을 기준으로 

1. 로그인을 눌렀을 때 로그인 완료 후 SWR을 호출하여 데이터를 받아야 할 때

2. SWR의 주기적인 호출하는것을 막는것

 

★ revalidate 함수를 사용하면 매 번 fetcher를 실행하는 것이다. 주기적으로 호출을 하지만 dedupingInterval 기간 내에서 호출하였을때 데이터가 같은 경우는 무시한다

 

★ SWR은 여러가지 옵션이 있는 API

errorRetryInterval: 요청을 보내고 정해진 시간이 지난후에 요청이 오지 않으면 에러 처리

errorRetryCount: 정해진 횟수만큼 요청을하고 안되면 에러

등등..

 

★ React의 parameter type 설정시 FC타입은 children이 있고 VFC는 없는 것

 

★ useSWR의 데이터 값이 변하는 경우 자동적으로 re-render 발생

 

★ revalidate() 사용시 매번 비동기요청을 보내서 데이터를 가져오므로 비효율적인 동작, 이를 개선하기 위해 mutate를 사용. mutate의 경우 서버에 요청을 보내지 않고 데이터만을 수정하는 것, mutate의 데이터의 최신화를 위해서 비교를 할 수 있는 옵션이 있음( shouldrevalidate)

 

★ mutate를 사용하여 인스타그램의 좋아요와 같은 기능 구현 가능, 서버에 요청을 보내기전에 미리 data를 변경시켜버리고 서버 요청을 이 후에 하는 것( optimistic UI)

 

★ import쪽에 mutate를 선언 할 수 있으며 이를 사용하는 이유는 컴포넌트 로딩시 요청조차 하기 싫을 경우 사용

 

★ SWR은 어떠한 요청을 보내더라도 데이터를 가져오고 그것을 저장하는 역할이며 꼭 비동기 요청이 아니라 React 내부에서 전역변수처럼 사용 가능

 

★ fetcher를 다양하게 만들어서 여러 데이터를 가공하여 사용 가능하며 만약 비동기 요청을 한 곳으로 보내 2개의 데이터를 동시에 받아야 하는 경우 도메인 뒤에 "#123" 혹은 '?' 같은식으로 붙여서 fet만 다르게하여 사용하는 꼼수도 있음