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

 

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

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

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

 

---

 

📍 개요

지난 시간 리뷰 

 

JWT는 Json Web Token 토큰에 대한 명칭, 토큰을 만드는 기술

Json으로 받아서 로컬스토리지에 저장해놨다가 헤더에 담아 요청을 보낸다.

cURL은 터미널에서 커맨드라인으로 url을 호출하는 기능으로 Command line url이라는 뜻

 

 

3강. 세션기반 로그인 구현과 JWT와의 비교 및 인프라스트럭쳐

 

- 세션이 무엇인지 알아보기

- 쿠키가 무엇인지 알아보기

- 세션 로그인을 위한 백엔드를 로컬 환경에서 실행하기

- 세션을 이용해 로그인하는 페이지를 만들어보기

- 로그인 상태를 기반으로 접근 가능한 페이지를 제어하기

 

 

➕ 세션이란 무엇인가

 

JWT토큰보다 더 추상적인 것이다.

쿠키, 로컬 스토리지, 세션 스토리지는 모두 데이터를 저장하는 저장소의 역할을 한다.

로그인이라는 동작은 서버에서 유저가 인증 정보를 얻는 과정이다.

대화의 컨텍스트가 유지되고 있다. 인증이 되고 있다는 맥락.

서비스가 토큰으로 유저를 확인하면 브라우저에 세션을 등록해두고 서버는 유저를 세션으로 식별한다.

 

세션

사용자의 로그인 이후 로그아웃 혹은 로그인 만료까지의 기간

 

세션 방식 로그인

사용자 로그인이 유효한 시간 동안 서버에 세션 아이디를 기록해두고 인증에 사용하는 방식

 

 

 

➕ 쿠키란 무엇인가

 

쿠키는 HTTP를 통해 전송이 되는 데이터 조각 중에 하나.

서버가 클라이언트에 전달한다.

브라우저가 알아서 들고 있다가 동일 서버에 요청할 때 담아서 보내는 정책

브라우저 자체를 인식할 수 있어서 상태 정보를 기억시켜준다.

 

'이 시간 동안 이 쿠키를 가지고 있는 브라우저는 유효하다'

 

 

1. 브라우저가 서버에 요청을 한다.

2. 서버가 응답을 할 때 쿠키를 함께 전달(Set-Cookie: connect.sid=something)한다.

 

3. 브라우저가 쿠키를 저장한다.

 

4. 이후 브라우저가 서버에 요청을 할 때 쿠키의 세션id sid를 같이 보낸다.

 

 

쿠키는 클라이언트가 넣어주는 것이 아니라 브라우저가 알아서 하는 내장 기능이다.

서버가 response에 달아서 보내주어야 한다.

 

 

쿠키에 적용되는 옵션

 

SameSite: None, Lax, Strict - 같은 도메인에서만 저장하고 전송하는 정책

None: 아무데나

Lax: 대부분 엄격하게 보고 안전한 요청만 허용

Strict: 엄격하게 single origin 출처만

httpOnly - 자바스크립트로는 접근 불가하며 HTTP 요청을 통해서만 세팅되어야 한다.

Secure: SameSite None이라면 https로만 보내야 한다.

 

CORS

Cross-Origin Resource Sharing

 

프론트는 할 수 있는게

 

 

로컬 환경에서 CORS 검증 해제

 

# shell
$ open -na Google\ Chrome http://localhost:5173/
 --args --disable-web-security --user-data-dir=/tmp/chrome_dev"
 
#Mac
$ open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome
--args --user-data-dir="/tmp/chrome_dev_test" --disable-web-security

#Windows
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
--disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

 

백엔드에서 어떤 origin을 허용할 것인지 정의하고 어떤 메소드에서 허용할 것인지 설정한다.

 

CORS라는 것은 출처가 다른 자원,요청,통신 대해 처리하는 정책이며,

쿠키는 데이터 조각이고 httponly와 같은 조건으로 쿠키의 정책을 제어한다.

 

 

➕ 실습하기

 

--disable-web-security 플래그 사용해서 CORS 해결하기

"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\chrome

 

 

➕ 세션 로그인 동작 살펴보기

 

 

1. 유저 진입

2. 세션 유효 체크

2-1. 유효한 세션 사용

2-2. 유효한 세션 아닌 경우 로그인 진행

 

 

로그아웃 

세션을 지우기

 

권한을 관리하기

 

 

➕ 세션 VS JWT

 

실제 서비스에서는 세션 VS JWT

세션은 프론트가 할 게 없다.

 

JWT 의 보안, 성능, 구조적 장단점

- 서버 백엔드 비용 감소

- 프론트엔드 복잡도 높아짐

- 보안상 세션보다 조금 더 위험

 

 

세션의 보안, 성능, 구조적 장단점

- 서버 백엔드 비용 대폭 증가

- 프론트엔드 인증 쉬워짐

- 보안 약간 향상