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

Activity

1. jisooolee commented on Mar 23, 2024

   

   jisooolee

   on Mar 23, 2024

   Contributor

   More actions

   🔗 코드 링크

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

   💻 화면 캡쳐

   3. 서술형

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

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

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

   ❤️React with ❤️1Reacted by Haram Harper B
2. ensk26 commented on Mar 24, 2024

   

   ensk26

   on Mar 24, 2024

   Contributor

   More actions

   🔗 코드 링크

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

   💻 화면 캡쳐

   자동 로그인

   토큰

   

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

   

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

   로컬 스토리

   

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

   유효성 검사

   
   

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

   

   

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

   3. 서술형

   1. 쿠키

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

   2. 로컬 스토리지

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

   3. 세션 스토리지

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

   ❤️React with ❤️1Reacted by Haram Harper B