로그인 프로세스

로그인이 어떻게 이루어지는지 과정을 알아보는 것이 중요하다
1. 브라우저에서 프론트엔드에 요청하면 HTML, CSS, JS를 가져온다
2. 데이터가 필요한부분은 백엔드로, 백엔드에서 DB를 거쳐가며 가져온다

그럼 상품등록에서 로그인이 된 사람만 하고싶다면?

브라우저에서 백엔드로 createProduct를 요청했을때백엔드에서는 로그인이 되었는지 확인해야한다.

Cookie

• 후속 요청으로 서버로 다시 보내야하는 데이터를 저장한다. 만료는 유형에 따라 다르며 만료 기간은 서버 측 또는 클라이언트 측 (일반적으로 서버 측)에서 설정할 수 있다.
• 쿠키는 주로 서버 측에서 읽기(클라이언트 측에서 읽을 수도 있음) 위한 것이며, Local Storage 및 Session Storage는 클라이언트 측에서만 읽을 수 있다.
• 크기는 4KB보다 작아야 한다.
• 해당 쿠키에 대해 httpOnly 플래그를 true로 설정하여 쿠키를 안전하게 만들 수 있다. 이렇게하면 쿠키에 대한 클라이언트 측 액세스가 차단된다

Local Storage

• 만료일이 없는 데이터를 저장하고 JavaScript를 통해서만 지워진다.
• 저장 용량 한도는 3가지 중에서 가장 높다.

Session Storage

• Session Storage 객체는 세션에 대해서만 데이터를 저장한다. 즉, 브라우저 또는 탭이 닫힐 때까지만 데이터가 저장된다.
• 데이터는 서버로 전송되지 않는다.
• 저장 용량 한도가 쿠키보다 크다(최소 5MB).

<<요약정리!!>>

브라우저 저장소의 종류와 특징

• 쿠키(COOKIE) : 영구 저장이 가능하며, 만료시간을 지정 할 수 있습니다.
• localStorage : 영구 저장이 가능합니다. ⇒ 우리가 임시로 사용할 저장소 입니다.(브라우저 껐다 켜도 유지가능)
• sessionStorage : 브라우저 종료시 사라집니다.(브라우저 껐다 키면 사라짐)

⇒ 로컬스토리지와 세션스토리지는 브라우저에 저장되어 있기 때문에 새로고침해도 사라지지 않음, 그래도 세션은 종료시 사라짐

⇒ 쿠키는 브라우저에서도 저장가능하고 저장한 내용이 api를 통해 백엔드로 넘어감.

브라우저에서 보낸 데이터를 서버에도 보내야 한다! ⇒ 쿠키에 저장

쿠키는 단순 저장소가 아닌 백엔드와 브라우저 간에 서로 데이터를 주고 받을 때 사용한다. 쿠키에 저장하게 되면 모든 api에 variables를 저장한 것과 같다.

⇒ 로컬스토리지와 세션스토리지는 백엔드와 관련이 없다.

사실 로그인 프로세스가 복잡해서 이해하기 어렵다... 애휴휴휴휴