"> [중급]To do 리스트 만들기 "> [중급]To do 리스트 만들기 ">

<head>
  <!-- HTML Meta Tags -->
  <meta charset="UTF-8" />
  <title> [중급]To do 리스트 만들기 </title>
  <meta
    name="description"   content=" 투두리스트, To do List "   />
  <meta name="keywords" content="투두리스트, To do List,커서, 커서 투두리스트, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <!-- Open Graph / Facebook -->
  <meta   property="og:title"   content="제목 "  />
  <meta  property="og:description" content=" 투두리스트, To do List,커서, 커서 투두리스트, 양파고, Yang Phago, 노션, 양파고 노션"  />
  <meta property="og:image" content="대표 이미지" />
  <meta property="og:url" content="페이지 주소" />
  <meta property="og:type" content="website" />
</head>

목차(클릭하세요)

<aside> 💡 To Do List를 만들기 위해 웹 사이트의 데이터를 저장하는 방식을 알아야 함

</aside>

0. 참고: 이 내용은 ‘커서 AI 트렌드&활용백과’를 참고함

1. 기본내용

1-1. 동일한 부분

기본적으로 자바스크립트와 php, 테일윈드 css를 사용해 to do리스트 앱을 제작하는 부분이 동일함.
파이썬 플라스크를 통해서도 가능하고, 다양한 방식이 존할 수 있음

✔️ To do list는 해야 할일을 저장하고 다시 불러올 수 있는 기능이 필요함, 따라서 단순히 모든 사용자에게 동일한 웹페이지를 보여주는 방식이 아님

1-2.핵심

📊 웹 애플리케이션 데이터 저장 방식은 크게 2가지로 구분됨

🔍클라이언트 측 저장 방식 + 서버측 저장방식

🖥️ 클라이언트 측 저장

🍪 쿠키 (Cookies)

4KB 제한, 매 HTTP 요청마다 자동 서버 전송 • 만료 기간 설정 가능 • 가장 오래된 저장 방식

💾 로컬 스토리지 (Local Storage)

5~10MB 용량, 반영구적 저장 • 서버에 자동 전송 안됨 • 브라우저 닫아도 데이터 유지

📝 세션 스토리지 (Session Storage)

5~10MB 용량, 임시 저장 • 서버에 자동 전송 안됨 • 탭/창 닫으면 데이터 소멸