[Django/React] 20. AUTHENTICATION: useUser / Credentials

hook를 만들어서 로그인 했는지 여부를 표시 

 - 로그인 하면: :Log in / Sign up 버튼 대신 유저의 아바타를 표시 

 

1) src > api.ts 에서 fetcher 함수 만들기: 로그인한 유저 정보를 가져옴 

2) src > lib 폴더 생성 & lib 폴더 내 useUser.ts 파일 생성 

3) src > lib > useUser.ts 파일 내에서 위에서 만든 getMe fetcher를 호출 

4) src > components > Header.tsx 에서 추가 

 

---

Credentials(인증 정보) 

 

Django의 Cookie

서버가 어떤 쿠키를 어떤 백엔드에 전달할 것인가

 - 웹 브라우저(클라이언트)에 저장되는 작은 데이터 조각 

  (웹 브라우저에 저장되는 key-value 쌍 데이터) 

 - 서버와 클라이언트 간의 상태를 유지하는 데 사용 

 

Django는 sesscion id를 쿠키에 담아서 우리에게 보내줌 

-> 우리가 다시 Django에 돌아가면 브라우저는 쿠키를 다시 Django에 전송

    (브라우저는 Django에 session id를 자동으로 전송) 

-> Djanog는 쿠키에서 session id를 받아 데이터베이스에서 그와 관련된 유저를 찾음

 

axios에 가서 Credentials를 추가

 - Axios는 기본적으로 요청 시 쿠키와 같은 인증 정보를 자동으로 전송하지 않음 

 - 따라서 이를 명시적으로 설정해야한다(src > api.ts에서 withCredentials) 

 

Django에도 credential를 받아도 된다고 알려줘야 

 - config > settings.py 에서 CORS_ALLOW_CREDENTIALS = True

 

 

Optional Chaining (?.)

:JavaScript와 TypeScript에서 객체 속성이나 함수에 안전하게 접근할 수 있도록 도와주는 문법

 ?. 연산자를 사용하면 undefined 또는 null 값이 있을 때 프로그램이 중단되지 않고 undefined를 반환