목차
로그인의 정의와 구현을 위한 개념 살펴보기
로그인이란 사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차를 말합니다.
백엔드에서는 로그인 구현을 위해 무엇을 하나요?
•
사용자를 식별합니다.
•
접근 및 동작을 제어합니다.
프론트엔드에서는 로그인 구현을 위해 무엇을 하나요?
•
권한이 없는 자원에 접근할 후 없는 구조를 만듭니다.
•
권한이 없는 자원의 존재를 모르도록 해야 합니다.
•
세션을 통해 인증정보를 관리합니다.
•
필요한 최소한의 구현 요구사항
◦
로그인 페이지
◦
로그인 인증관련 데이터 관리
◦
로그인 상태에 따른 화면/기능 제어
◦
로그아웃
Mock API 란?
ChatGPT 가 말하는 Mock API
실습 전 페이지 구상 하기
토큰을 어디에 저장할것인가?
•
쿠키
•
로컬 스토리지
•
세션 스토리지
토큰을 매 요청마다 직접 넣어줘야 할까?
아니요. 전역적으로 관리가 가능합니다.
유저 정보를 다른곳에서도 사용하고 싶다면?
로그인 후 받은 유저 정보를 상태 저장 관리소에 저장하면 지속적으로 사용이 가능합니다.
로그인 페이지와 서비스 페이지 분리
서비스를 구성하는 페이지를 보면 로그인이 불필요한 페이지와 로그인이 필요한 페이지 두 종류가 존재합니다. 만약 아래와 같이 페이지를 만든다면 로그인 여부 확인을 위한 코드가 반복적으로 작성이 될 것입니다.
이러한 반복적인 코드를 줄이기 위해 로그인 여부를 확인하는 로직을 모듈화 해야 합니다. 그리고 아래와 같이 페이지를 감싸는 컴포넌트를 만들어 모듈화한 로직을 사용합니다.
반복되는 부분 관리하기
위와같이 레이아웃을 나누었다 하더라도 나누어진 부분에서 또 반복되는 부분들이 존재할 수 있습니다. 그럴 때 위와같이 공통적인 요소가 들어있는 컴포넌트를 만들어 반복적으로 사용하면 됩니다. (말이 좀 이상한데,,)
