인증

Django + React로 로그인 시스템 구현하기 / Pt. 3) 토큰 저장하기

Pt. 3) 토큰 저장하기 파트 2에서는 프론트엔드에서 로그인 성공 여부를 확인하고 토큰을 받아오는 데에 성공했다. 토큰은 서버가 저장하는 것이 아니라, 클라이언트가 저장했다가 서버에게 보내면 서버는 확인만 해 준다고 배웠다. 그러므로 이번에는 클라이언트가 토큰을 어떻게 저장하는지 알아보고, 그 중 하나를 선택해서 직접 실행해 보자. JWT는 어디에 저장해야 하는가? 토큰을 받으면 어디에 저장해야 할까? 먼저, JavaScript 내부 변수에 저장하면 어떻게 될지 생각해 보자. JavaScript가 저장하는 변수는 휘발성이기 때문에 웹 페이지를 새로고침하는 순간 사라지게 된다. 토큰을 가지고 있으면 액세스 정보를 저장할 수 있다는 것이 한 가지 장점인데, 새로고침할 때마다 또는 이동할 때마다 액세스 정보..

Django + React로 로그인 시스템 구현하기 / Pt. 2) React에 Django 연동하기

Pt. 2) React에 Django 연동하기 파트 1에서는 Django로 JWT 토큰을 이용한 로그인이 동작함을 확인했다. 이제 이것을 프론트엔드와 연결해 보도록 하자. 원래 진행하고 있는 프로젝트에서는 TypeScript로 진행하고 있지만, 튜토리얼 프로젝트에서 굳이 거창하게 TypeScript를 사용할 이유도 없다고 판단했고, TypeScript를 사용할 수 있는 사람은 JavaScript 코드만 봐도 응용할 수 있을 것이라 생각하기 때문에 여기에는 JavaScript 코드로 진행하기로 했다. React 프론트엔드 프로젝트 설정하기 우리의 친구 CRA를 이용하여 프론트엔드 프로젝트를 설정해 주자. 프로젝트의 최상위 폴더인 auth-tutorial 폴더로 나와서 아래와 같이 입력해 주자. $ npx ..

Django + React로 로그인 시스템 구현하기 / Pt. 1) Django JWT 설정하기

Pt. 1) Django JWT 설정하기 1인 프로젝트를 진행하는 데에 있어서 프론트엔드는 평소에 하고 있어서 문제가 없었지만 백엔드는 평소에 많이 만진 적이 없어서 로그인 기능을 구현하는 데부터 살짝 애를 먹었다. 일반적으로 개인이 진행하는 토이 프로젝트의 경우 그냥 DB에 username과 (암호화 된) password를 DB에 저장해서 lookup하는 정도로도 구현할 수 있지만, 로그인은 보안이 중시되는 작업인데 너무 허술해 보이기도 하고 회사에서 JWT로 인증 작업을 진행하던 걸 본 적이 있어서 JWT를 사용해서 본격적으로 해 보고자 했다. JWT가 무엇인지, 특히 인증 단계에서 JWT를 왜 쓰는지도 시간이 된다면 정리해 보고 싶다. 이하에서 진행하는 프로젝트는 이미 프로젝트를 위한 가상 환경 설..