JWT와 Redux 토큰 관리(0)

서론

음성 AI 기술 기반의 청각장애인 언어 지도 서비스 개발 프로젝트를 진행하게 되었다. 
이렇게 백, 프론트를 나눠 제대로 프로젝트를 진행해본 건 거의 처음이라, 
초보 개발자(?) 입장에서 팀에 폐만 끼칠 것 같아 걱정을 잔뜩 안고 시작했다. 
 
나는 이전에 6개월 정도 파이썬을 기반으로 프로그래밍 언어를 배웠고, 
django, vue.js를 이용해 영화와 주류를 페어링하는 페이지를 만드는 작은(?) 프로젝트를 했었다.
그때도 로그인, 회원가입을 만들긴 했지만, 배포환경도 아니고 로컬에서만 볼 수 있는 프로젝트를 진행했기 때문에 토큰을 관리하고 이런 개념이 거의 없다시피 했다. (당시엔 회원가입, 로그인을 만드는 것 그 자체에 의의를 두었던 것 같다)
또, React를 사용하는 건 처음이라 사실상 아무것도 모르는 상태로 프론트엔드를 맡아 이번 프로젝트를 시작하게 되었다. 
그래서 이번에도 프로젝트를 하면서 큰 고민없이 지피티가 알려주는대로 토큰을 localstorage에 담아 로그인 상태를 저장했다. 
 
그런데 프로젝트를 진행하다보니 로그인, 회원관리 등 상태를 관리할 때 redux를 사용하면 좋다는 소리를 듣게 되었다.
 
Redux? 그게 뭔데..?🤔

알고보니, Vue에서 사용했던 pinia 같은 개념이었다. 현재의 상태를 중앙에서 관리할 수 있도록 하는..?
사실 그렇게 들어도 여전히 왜 사용해야 하는건지 잘 와닿지 않았다. 
JWT가 뭐고, 토큰은 뭐고, 토큰을 탈취 당하는건 또 뭐고, 그걸 redux로 관리하면 뭐가 좋은건지 
1부터 10까지 모든게 혼란스러웠다. 
그런 개념이 하나도 없다보니, 당장 뭘 해야하는지 감도 잡히지 않았고 그렇게 아무것도 못하고 있는게 싫었다. 
그래서 일단 스토어를 만들어서 냅다 토큰을 넣었더니, 
새로고침만 하면 로그인이 풀려버리는 문제가 생겼다.
 
이걸 해결하려고 하루를 통째로 날려버리기도 하고 스트레스를 잔뜩 받았지만
어떻게 원만히 합의를 잘 봐서(?) 이제는 문제없이 프로젝트에서 잘 사용하고 있다. 
덕분에 토큰, redux에 대한 이해를 조금 쌓기도 했고,
정리하면서 더 공부해두면 도움이 될 것 같아서 이렇게 글을 쓰게 되었다.
 
 
먼저, JWT가 무엇인지에 대해 알아보자.
 
(계속)