axios

1. .env
   가장 우선순위가 낮은 환경변수 설정 파일

2. .env.development
   개발 환경에서만 작동되는 환경변수 설정파일

3. .env.production
   배포 환경에서만 작동되는 환경변수 설정파일

4. .env.test
   테스트 환경에서만 작동되는 환경변수 설정 파일

5. .env.sample
   배포시 환경변수의 key값이 어떤 것을 의미하는지 정의한 문서
   설명해주는 용도

ex) REACT_APP_BACK_URL :계좌 관련 api백엔드 url

util폴더에는 훅이 아닌 다른 함수들이 들어가 있음.

각각 파일에는 local파일이 존재하며(ex .env.local , .env.development.local)

local 파일은 기존에 있던 파일보다 우선순위가 높습니다.
보통 env만 있기는 함.

• 주의사항
  .env는 git과 같은 원격저장소나 버전관리 저장소에 올라가도 되는가?
  안됩니다. 환경변수는 배포환경에서 직접 설정해줄 수 있어요.

우선순위는 env가 가장 낮음

---

1. 인증 토큰, 재발급 토큰

세션인증 로그인 방식일 수도 있고, 토큰일 수도 있고,
선택

인증 토큰, 유저의 정보가 암호화된 토큰이며 해당토큰이 있어야 해당 사용자는 인증된 사용자

보통 해당 인증 토큰이 없다면 401번을 return
response status code 401 (unauthorized)

토큰이 있지만 허가되지 않은 사용자는 response status code 403(forbidden)

따라서 해당 토큰이 만료되면 401,403을 return
프론트 엔드 개발자가 401,403을 비동기 통신의 응답 결과로 반환 받으면 어떻게 해야할까요?

1) refresh token 있을 경우
회사 정책에 따라 리프레쉬 토큰 필요 없을 수도 있음.
axios interceptor 해당 에러 발생하면 refresh token 으로 access token을 재발급 받고 실패한 요청을 다시 재요청

2) refresh token x없을경우
refresh token이 없다면 프론트엔드에서는 로그아웃 로직을 실행

2. 토큰 관리 방법

1) 웹스토리지
- 브라우저를 통해 데이터를 저장
DB에 저장되는 데이터와 달리 삭제되어도 상관없는 소량의 데이터를 저장할때 사용
- 사용자에게 데이터 저장을 부담.=> 사용자의 하드웨어에 의존하는 소프트웨어 탄생

• 로컬 스토리지
  영구적인 스토리지 (웹 브라우저에 저장되고)
  다른 탭에서도 데이터가 공유되는 특징
  ex) -인증토큰을 저장
  • 비회원 로지구성, 비회원 인덱싱 키 값이 없음. 그러나 인덱싱 키가 있다면 db에 저장기능
• 세션 스토리지
  웹페이지의 세션이 끝나면 데이터가 함께 삭제되고, 탭마다 데이터가 격리되어 저장.
  컴퓨터를 끄는 순간 삭제되는 것, (삭제시점을 조절할 수도 있고)
  웹 페이지의 세션이 끝나도 데이터가 삭제되지 않음.
  
• 사용법
  localstarge,sessionstorage .setItem(key,value) -> 해당 key,value 쌍으로 저장
  .getItem(key) -> 해당 key 조회
  .removeItem(key) -> 해당 key삭제
  .clear() -> 모든 데이터 삭제
  

ex)

• 인증 토큰을 저장

2) 쿠키
브라우저에 저장된 key-value로 이루어진 작은 데이터 파일
따로 설저아지 않아도 서버와의 데이터 교환이 가능하며
https나 secure옵션을 통해서 https환경에서만 교환이 가능하거나 외부에서 접근이 불 가능하도록 설정이 가능

브라우저가 닫히면 삭제, 유효기간을 명시하면 닫혀도 삭제되지 않습니다.

refresh-token
session-id
자동 로그인
팝업창 3일동안 보지않기.

3) state
보안에 좋지 않음.
웹스토리지에 저장된 로그인 정보는 영구적으로 혹은 반영구적으로 유지할 수도 있지만,
state가 맞을까요?

1. 새로고침, 페이지이동 -> 페이지의 깜빡임
2. 전역상태로 가지고 있는 것.

로그인 완료되었을때 실행해야하는 로직이 있다면 그 로직이 있고 ui를 변경시켜야한다면,

3. 백엔드에서 프론트엔드에 토큰을 전달하는 방법

넣어둬서 저장 아래와 같은 곳에서

1) res.body
2) res.header
3) cookies(백엔드에서 프론트로 전달)

4. 프론트엔드에서 백엔드에 토큰을 전달하는 방법

1) res.body
2) cookies
- axios인스턴스 생성시 withCredentials = true //저절로 실어짐.
- 서버간의 통신에서 쿠키를 서로 교환 가능하도록하는 옵션
3) res.header
- axios interceptor
- axios 인스턴스 생성의 default//렌더링이 될때 못불러올 수도 있음.

--------=--
1. todo cumstom,accessToke,api call에대한(전역 상태관리 자유)-> 관심사 분리,props drilling 해결을 위해 전역 상태관리를 도입해도 괜찮습니다
2. delete,update->완성시키기
axios.delete('/todo/3')
axios.put('/todo/3',{content,state})