241208 TIL

• 할 일 목록 관리 서비스 작업
  • axios의 인스턴스를 사용하면 headers의 Authorization에 bearer ${accessToken}과 같이 로그인 시 미리 받아온 토큰 정보를 박아두고 사용할 수 있다.
  • http 요청을 보낼 때 따로 키를 챙길 필요 없이 axios 인스턴스로 요청을 바로 보내면 되니까 편리하다.
  • axios의 인터셉터로 request가 보내지기 전의 요청 내용이나 response를 받기 직전의 응답 내용을 사전에 가로채서 원하는 로직을 넣어줄 수도 있다. 예를 들어, 요청을 보내기 전에 Access Token이 없거나, 토큰의 만료 기간이 완료됐다면, 그에 대한 적절한 대응을 해줄 수 있다.
  • 만약에 Access Token의 만료 기간을 클라이언트에서 따로 관리하지 않고 있다면 response로 authorization 에러가 발생할 시 응답 객체를 인터셉트해서 Refresh Token으로 다시 Access Token을 재발급받아 요청을 다시 보내도록 할 수 있다.
  • axios 객체를 잘 사용하면 토큰 정보를 안전하고 효율적으로 관리할 수 있으니, 다양한 사용 패턴에 대해 잘 알아두자.
  • 단, 서버에서 내려준 Access Token의 초기 정보를 어디서 어떻게 저장하고 관리하는지는 아직도 문제이다. 이 부분을 어떻게 해결해야 할지 고민해보고 프로젝트에서 실제적으로 개선해 봐야겠다(그냥 저장을 안 하고,
  • 리액트에서 관리하는 상태를 setState에서 이전 값을 참조해서 상태를 업데이트해야 하는 경우가 있다. 대표적으로 setCount(count + 1)과 같은 경우이다.
  • 이런 경우에 인자를 콜백 함수로 전달하면 좀 더 안전하게 이전 상태를 보장하여 값을 업데이트할 수 있다. setCount(prev => prev + 1)과 같은 방식이다.
  • setCount에 콜백 함수를 넘기면 인자에는 setCount가 실행되는 시점의 count 값이 전달된다. 그래서 prev => prev + 1은 count => count + 1과 같은 게 된다(prev를 사용하는 건 관습적인 것 같고, 어떤 파라미터 이름을 사용해도 상관없다)
  • 만약에 count + 1처럼 하면 다른 컴포넌트에서 count를 참조해 동작할 때 어떠한 사이드 이펙트가 발생할지 확신할 수 없다. 따라서, 가급적이면 이전 값에 어떠한 동작을 더해 값을 변경하고 싶을 땐 콜백 함수 prev => prev + 1과 같은 패턴을 사용하자.

오늘 공부가 너무 안 돼서 일찍 마무리했다. 내일부터 마음 잡고 다시 제대로 해보자.