로그인 시스템을 구현하기 위한 개념

로그인의 절차를 생각해 보면, 다음의 순서와 같다.
1. 아이디와 비밀번호 생성
2. 로그인에 내가 생성한 아이디와 비밀번호 입력
3. 일치하면 로그인

그러나 이제는 "프로그래머"로서 로그인 로직에 대하여 더 깊게 생각해 보아야 한다.

"프로그래머"로써 로그인 절차를 다시 정리해본다면!
1. 아이디와 비밀번호 생성
2. 비밀번호를 암호화 하여 DB에 저장
3. 유저가 아이디와 비밀번호 입력
4. 입력한 비밀번호를 암호화 한 후 DB에 저장되어 있는 유저 비밀번호와 비교
5. 일치하면 로그인 허가
6. 로그인한 유저에게 access token 발행
7. 로그인 이후 부터 access token을 첨부해서 request를 서버에 전송함으로서 매번 로그인 하지 않도록 한다.

프론트엔드와 백엔드의 역할

위의 절차를 구현하기 위해, 프론트엔드와 벡엔드의 역할이 달라진다.

프론트엔드는 React를 활용할 것이다!

프론트엔드)

• 프론트엔드는 회원가입을 폼을 만들어 준다.
• 폼에 입력된 값을 fetch 함수를 활용하여, 백엔드 서버에 전송하여 준다.

백엔드)

• 받은 password는 암호화를 시켜 DB에 저장한다.

프론트엔드)

• 로그인 폼에 유저가 값을 입력한다.
• fetch 함수를 활용하여 서버에 보내준다.

벡엔드)

• 비밀번호가 입력된 값이 넘어오면 암호화를 시켜, DB에 저장되어 있는 암호화된 비밀번호와 비교한다.
• 일치 할 경우 access token을 넘겨준다.

프론트엔드)

• 받은 access token을 로컬스토리지에 저장시켜 준다.

벡엔드)

• 유저가 로그인을 하여 사이트를 이동할 시, access token 있다면 허가해 준다.

프론트엔드 개발자로서 역할에 맞는 코드 작성