[React] Day_45 데일리 정리

아 끝났다-!!!!

 

드디어 팀프로젝트 끝! (아 정리해야하는데..)

오늘은 챌린지 스터디 정리.. 우선 하고 빠르게 잘 예정입니다

왜냐? 너무 졸려요.. (3일내내 3시간씩잤나.. 그랬..음..)

또 발제하는데.. 아.. 과제지옥... 아오...

여튼 내일 생각하는거로 하고 시작해보도록 하죠.

레츠고.

 

 

 

챌린지반 스터디 정리 - 세션 vs 토큰 vs 쿠키? 그리고 JWT

꾸뤀히... 꾸루끼! 그리고 링크는 잘 보자.. (3개였는데 1개만 본 림졍림졍아..)

 

아오 일 두번하네 진짜;

 

쿠키

웹 서버가 브라우저에 저장하는 작은 정보 파일

쿠키주로 사용자의 세션 상태나 정보를 기억해 웹사이트 이용을 편리하게 만들어줌

ex)  장바구니에 담긴 상품을 저장 or 로그인 상태를 유지하는 데 사용 → HTTP 쿠키 (대부분 HTTP 프로토콜을 통해 전송)

 

- 저장은 어디에? → 브라우저 내에 저장

(Chrome에서는 Cookies라는 파일에 저장되고, 개발자 도구 > 애플리케이션 > 쿠키에서 확인 가능)\

 

• 쿠키의 주요 용도
  • 사용자 세션 관리 : 사용자의 로그인 상태나 세션을 유지 → 페이지를 이동해도 다시 로그인할 필요 X!
  • 개인화 : 사용자 이름, 기본 설정 등을 기억해서 맞춤화된 경험 제공
  • 추적 : 방문 기록 데이터를 바탕으로 광고를 추천 or 사용자 행동을 분석 → 일부는 익명 데이터를 수집
• 주요 쿠키 유형
  • 세션 쿠키 : 브라우저 닫으면 자동으로 삭제되는 쿠키 → 세션 동안만 데이터 유지
  • 영구 쿠키 : 설정된 기간 동안 브라우저에 남아 있는 쿠키 → 사용자 기본 설정 기억
  • 인증 쿠키 : 로그인 상태를 유지 및 사용자 인증 정보를 관리
  • 추적 쿠키 : 사용자의 웹 활동을 기록, 추적 서비스로 데이터 전송
  • 좀비 쿠키 : 삭제 후에도 다시 생성되는 쿠키, 브라우저 외부에 백업 버전 보관 → 이름처럼 끈질긴 쿠키!
  cf. 타사 쿠키 : 현재 방문 중인 도메인이 아닌 외부 도메인에서 생성된 쿠키, 주로 광고나 분석 목적으로 사용
  ex)  사용자의 활동을 추적하는 경우 → 쇼핑 사이트에서 광고 네트워크의 쿠키, 브라우저에 저장

 

- 개인정보 보호와 쿠키

쿠키, 사용자 경험을 맞춤화 → But, 행동 추적이나 민감 데이터 수집으로 프라이버시 문제를 야기할 수 있음

 

- EU ePrivacy Directive 및 GDPR에 따르면..

• 쿠키는 개인 데이터로 간주
• 사용자의 명시적 동의가 필요

∴ 웹사이트에 쿠키 배너의 등장 배경 (사용자 동의 + 쿠키 설정을 관리할 수 있도록 도움)

결론 : 적절히 활용하고 관리하면 더 나은 웹 경험을 만들 수 있다!

 

세션

서버 측에서 사용자의 상태를 유지하는 방법

→ 사용자가 웹사이트에 로그인하면 서버가 세션 ID를 생성

→ 사용자의 브라우저로 세션 ID 전달 후, 서버 메모리에 사용자 정보와 함께 저장

 

- 작동 방식

1. 사용자가 로그인하면 세션 ID, 서버에서 생성
2. 사용자의 요청에 세션 ID가 함께 전송
3. 서버, 세션 ID를 통해 사용자를 식별하고 적절한 서비스를 제공

- 세션의 특징

• 브라우저 종료 시 또는 일정 시간이 지나면 만료됨.
• 서버 메모리에 저장되기 때문에, 동시 접속자가 많을 경우 서버 부하가 증가할 수 있음.

 

토큰 

세션의 단점을 보완하기 위해 사용하는 인증 방식

→ 서버가사용자의 로그인 정보를 암호화하여 생성한 문자열

 

- 작동 방식

1. 사용자가 로그인하면 토큰이 생성되어 브라우저에 저장
2. 이후 요청마다 토큰이 함께 전송되어 서버는 이를 검증
3. 검증된 토큰을 통해 사용자를 식별하고 인증 서비스를 제공

- 토큰의 특징

• 유효기간 동안 통제하기 어려움 → 보안 주의 필요
• 서버는 별도로 세션 정보를 저장하지 않음 → 서버 부하 감소

 

쿠키 vs 세션 vs 토큰

- 공통점

웹에서 사용자 인증과 상태 관리를 위해 중요한 도구

 

- 간단정리

• 쿠키
  • 클라이언트(브라우저)에 저장되는 작은 정보 파일, 주로 사용자의 로그인 상태나 설정을 기억하는 데 사용
  • 장점: 브라우저 기반 저장으로 서버 부하 X, 간단한 데이터 유지에 적합.
  • 단점: 보안 취약(민감 정보를 저장하지 않도록 주의).
• 세션
  • 서버에서 상태를 관리, 사용자가 웹사이트와 상호작용하는 동안 지속
  • 장점: 높은 보안성, 서버 메모리에서 상태를 유지해 안정적.
  • 단점: 동시 접속자가 많아질 경우 서버 부하가 증가할 수 있음
• 토큰
  • 세션의 단점을 보완한 인증 방식, 클라이언트에 암호화된 토큰을 저장하여 상태를 유지
  • 장점: 서버에 세션 정보를 저장 X → 부하 감소
  • 단점: 유효기간 동안 통제 어려움 → 토큰 탈취 등 보안에 주의 필요.

 

결론

• 간단한 데이터 저장: 쿠키 활용 (로그인 상태 유지, 기본 설정 기억 등).
• 안정적인 인증 및 상태 관리: 세션 사용 (보안이 중요하고 동시 접속자가 적은 경우).
• 확장성과 서버 효율성 필요: 토큰 활용 (API 기반 인증, 대규모 사용자 서비스).

→ 상호 배타적인 것이 아닌, 서비스 특성과 보안 요구사항에 따라 조합해 사용하는 것이 가장 효과적!

 

 

JWT(JSON Web Token)

- JWT란?

• JSON 객체를 사용하여 두 개체 간에 정보를 안전하게 전송하기 위한 개방형 표준(RFC 7519)
• 주로 인증 및 정보 교환에 사용되며, 자체적으로 정보를 포함 → 서버 측 세션 저장소가 필요 X!

 

- JWT의 구조 ⇒ 마침표(.)로 구분된 세 부분으로 구성

1. 헤더(Header): 토큰 유형(JWT)과 서명 알고리즘 정보를 포함합니다.
2. 페이로드(Payload): 사용자 정보나 만료 시간 등의 클레임(Claims)을 포함합니다.
3. 서명(Signature): 헤더와 페이로드를 합친 후 비밀 키로 서명하여 토큰의 무결성을 검증합니다.

- 장점

• 확장성: 분산 시스템이나 마이크로서비스 아키텍처에서 유용하게 사용
• 자체 포함(Self-contained): 필요한 모든 정보를 자체적으로 포함, 서버 측에서 별도의 세션 저장소가 필요 X!

- 단점

• 토큰 크기: 페이로드에 많은 정보를 담을 경우, 토큰 크기가 커져 네트워크 부하가 증가할 수 있습니다.
• 보안 관리 필요: 토큰이 클라이언트 측에 저장, 토큰의 유효 기간 관리와 안전한 저장이 중요

 

 

 

 

마무리 - ㅎㅎ.. 이제 또 시작이야...

 

일어나... 또 코딩해야지...

 

강의... 6시간... 장난하냐....

이걸 하면서 과제까지..? 주말은 삭제..ㅇㅖ정...

아 잠... 잠은 자야겠지..?

내일이 무섭당 ㅠㅡㅠ..

 

KPT 회고

• Keep :  프로젝트 어케저케 얼레벌레 끝!
• Problem : 시간만 더 있었다면..
• Try : 위 햅 노 타임.