[React] 원티드 프리온보딩 프론트엔드 Day4

 

😃 원티드 프리온보딩 프론트엔드 Day4

3월 프론트엔드 챌린지
로그인 기능 구현, 하나부터 열까지!

실제 동작하는 서버를 바탕으로 프론트엔드에서 로그인 기능을 구현해 봅니다.
배포된 서버와 로컬 서버 등을 호출해 보면서 인프라와 백엔드에 대해서도 알아봅니다.
보안이나 프로젝트 디렉토리 구조 등 현업에서 조금 더 나은 프로젝트를 위해 해볼만한 고민들을 함께해 봅니다.

 

---

 

 

 

📍 개요

지난 시간 리뷰 

 

로그인이란?

사용자 식별, 인증, 권한 부여.

클라이언트에서 전달한 사용자 정보를 식별하고 서버에서는 인증한 정보를 세션이나 토큰에 담아 돌려 준다. 

 

저작권으로 인하여 추후 손그림으로 변경할 예정입니다.

 

 

 

세션이란?

사용자가 로그인하고 로그아웃 할 때까지의 시간.

이것을 세션 id를 이용해 쿠키로 저장을 한다.

요청이 들어올 때마다 유저를 식별한다.

이 식별로 권한을 제어한다.

 

서버와의 역할 분담

서버 벨리데이션은 필수적이다. "프론트에서 막아주시면 안돼요?"

서버에서는 본인의 자원에만 접근할 수 있도록 하

 

 

 

 

4강. 조금 더 깊이 알아보기

 

- 유저 역할에 따라 페이지를 분리해서 제공할 수 있는 페이지를 만들어 봐요.

- Refresh token & Access token을 사용하는 방법에 대해 코드적인 측면에서 조금 더 살펴봐요.

- OAuth에 대해 이야기 해 봐요.

- 데이터를 한 곳에서 관리하고 다루는 방법에 대해 이야기 해 봐요.

 

 

 

 

➕ 리프레시 토큰

 

엑세스 토큰을 받아오기 위한 토큰이다.

베어러 - 규약

 

 

➕ OAuth와 소셜 로그인

 

Open Authiorization

 

 

➕ 싱글톤 패턴

 

객체를 잘 다루지 않는 프론트엔드 트렌드 상 생소하다.

하나의 데이터가 하나의 컨텍스트에서 관리되고 있는가? Source of truth