[3주차] 프론트엔드 과제 (회원가입, 로그인 완성, 투두리스트)

제출 기한 ~3/25 12:00 AM (코멘트까지 달아야 제출 완료)

과제 요구 사항

https://sh-tg.notion.site/53e4e4d2341a47cd90cfb553e05ddead

[jisooolee]

🔗 코드 링크

https://github.com/Hanbat-Study/jisu-todo.git

💻 화면 캡쳐

3. 서술형

1. localStorage
   브라우저에 저장되며, 브라우저가 종료되어도 데이터가 계속 유지됨
   장점 : 쿠키에 비해 많은 양의 데이터 저장 가능
   단점 : 문자열만 저장 가능하기 때문에 역직렬화 과정이 필요

2. SessionStorage
   각 사용자 별로 데이터가 개별적으로 저장되며, 브라우저가 종료되면 데이터도 사라짐
   장점 : 서버에 저장되는 데이터이기 때문에 클라이언트가 데이터를 가로챌 수 없어 보안상 유리
   단점 : 사용자 접속량이 많을 경우 서버 부하가 증가

3. Cookie
   브라우저에 저장되어 사용자가 서버에 접속할 때마다 함께 전송되는 데이터로 만료기간이 지나면 데이터가 사라짐
   장점 : 대부분의 브라우저에서 사용 가능
   단점 : 서버 접속 시마다 서버에 데이터가 전송되기 때문에 자원 소모가 발생

[ensk26]

🔗 코드 링크

https://github.com/Hanbat-Study/duna-todo

💻 화면 캡쳐

자동 로그인

토큰

• 토큰이 존재할 때 todo 페이지로 이동한다.

• 토큰을 삭제하고 새로고침을 하면 로그인 화면으로 돌아간다.

로컬 스토리

• 회원가입시 회원정보 json 형태로 로컬 스토리지에 저장

유효성 검사

• 유효성 검사가 통과되면 만족이라고 뜨고 버튼이 활성화 된다.

• 유효성 검사가 통과 안되면 이유가 뜨고 버튼이 비활성화 된다.

3. 서술형

1. 쿠키

• 저장 공간: 약 4kb
• 자동 전송의 위험성 있음
• 도메인 단위로 접근이 제한 되지 않아 CSRF에 안전하지 않다.
• 서버에 전송되어 서버 부담

2. 로컬 스토리지

• 웹 스토리지 (약 5MB)
• 브라우저에 반영구적으로 데이터를 저장된다.
• 브라우저를 종료해도 데이터가 유지된다.
• 도메인이 다른 경우 로컬 스토리지에 접근할 수 없다.

3. 세션 스토리지

• 웹 스토리지 (약 5MB)
• 각 세션마다 데이터가 개별적으로 저장된다.
• 브라우저에 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장된다.(독립적으로 작동)
• 세션을 종료하면 데이터가 자동으로 제거된다.
• 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.