[React/TS] Slack 클론코딩 2주차 - 로그인, 회원가입 만들기

1.

완성 후 반복되는 코드 -> 커스텀 훅

기본으로 제공되는 훅을 합쳐서 만들 수 있다

 

2.

제네릭 타입

타입을 변수로 만들어서 매개변수 자리에 값이 들어갔을 때 리턴값의 타입도 같은 타입으로 자동으로 정해짐

 

3.

- return 타입에 대해서 변수를 따로 만들어 가독성을 향상시킬 수 있다

- any 대신 ChangeEvent<HTMLInputElement>,

e.target.value 대신 e.target.value as unknown as T

를 넣어줌

 

4.

axios 요청 보내기, CORS, proxy

- Console 탭뿐 아니라 Network 탭도 같이 보면서 개발하기를 추천

프론트에서 보낸 요청을 상세히 확인할 수 있다

- OPTIONS : 프론트(3090)와 백(3095)의 포트번호가 달라서 CORS에 대해 요청을 한 번 더 보낸 것임

- webpack devServer의 proxy 설정 : CORS 에러를 피하도록 도움을 준다

'/api/'라고 써주면 요청을 3095에서 보낸 것처럼 속여서 처리해주는 역할을 한다

axios 요청 url에 'http://localhost:3095/' 대신 다음과 같이 '/api/'를 넣어서 작성해준다

누가 요청을 보냈는지가 3090에서 3095로 바뀐 것처럼 되는 것 -> 포트번호가 일치하게 되어 네트워크 탭 확인 시 OPTIONS 요청도 보내지 않은 걸 알 수 있음

 

5.

SWR
- 전역 상태 관리를 가능하게 함
- 리덕스, ContextAPI 대신

- vs React Query
- 보통 GET 요청으로 받아온 데이터를 저장
- useSWR, fetcher

- fetcher는 자유롭게 구성해서 사용할 수 있다.

꼭 get요청이 아니어도 됨. 다만 결국에 data를 가져오게 되고, 가져온 data를 swr이 저장한다는 것만 알아두자!
- 주기적으로 자동 api 요청을 다시 해줘서 데이터가 항상 최신의 것으로 유지됨 -> 서버 부담 이슈로 이게 싫다면 옵션을 설정해주면 되는데, 이건 필요 시 공식 문서 참고하면 될 듯
- 로그인은 쿠키를 사용하는데 백과 프론트의 서버주소가 다르면 쿠키가 전달이 안됨 -> withCredentials: true를 추가하여 해결(GET은 2번째 자리, POST는 3번짜 자리에 설정)

- revalidate : revalidate 메소드 사용 시 fetcher 호출하여 요청 -> 원할 때 요청하기 위해 사용

const { data, error, revalidate } = useSWR('http://localhost:3095/api/users', fetcher);

revalidate() 호출 시 fetcher가 호출되면서 서버에 요청을 하고, 데이터(결과값)이 data에 들어가게 된다

- dedupingInterval : 정해준 주기마다 요청 -> 빈번한 요청으로 서버에 무리가 갈 것을 염려하여 사용

dedupingInterval: 2000 	// 2초동안에는 첫 번째 요청 이후로 다시 서버에 요청 안보내고 캐시된 데이터 그대로 사용

- 항상 비동기 요청이랑 관련있는 것은 아님. localStorage에서 데이터를 가져올 수도 있다

- 결론 : GET 요청, 비동기 요청이라는 것에 얽매일 필요 X -> fetcher를 어떻게 선언하느냐, key에 무엇을 작성해주느냐에 따라 전역 상태 관리를 자유롭게(?) 할 수 있다!

6.

Optimistic UI (mutate)

내가 보낸 요청이 성공할 것이라고 낙관하고 ui를 보여줌. 그리고 만일 요청 실패 시 취소해서 띄워준다.

- revalidate : 서버에 요청을 보내서 데이터를 다시 가져옴 (swr 최신 라이브러리에서는 revalidate 대신 mutate 사용 권장)

- mutate : 서버에 요청 보내지 않고 기존의 데이터를 수정 (먼저 바꿔주고 요청은 이후에! ex : 인스타그램 좋아요 기능 -> 보낸 요청이 성공할 것으로 낙관하고 우선 하트 누르자마자 채워진 하트 띄워주고, 요청 후 점검을 한다. 실패 시 빈 하트로 다시 돌려놓고, 성공 시 사용자 눈에는 하트 누른 것이 바로 반영된 것처럼 보인다. = Optimistic UI)

이렇게 쓰면 서버에 요청 다시 보내서 데이터 받아올 필요 없이 바로 데이터를 수정할 수 있다.