">
[중급]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>
1. 기본내용
1-1. 동일한 부분
- 기본적으로 자바스크립트와 php, 테일윈드 css를 사용해 to do리스트 앱을 제작하는 부분이 동일함.
- 파이썬 플라스크를 통해서도 가능하고, 다양한 방식이 존할 수 있음
✔️ To do list는 해야 할일을 저장하고 다시 불러올 수 있는 기능이 필요함, 따라서 단순히 모든 사용자에게 동일한 웹페이지를 보여주는 방식이 아님
1-2.핵심
✅ 웹 애플리케이션에서 데이터 저장 방식은 크게 두 가지로 구분됨
-
🔍클라이언트 측 저장 방식
- 클라이언트 측(사용자의 브라우저)에 데이터를 저장하는 방식으로, 다시 세 가지 주요 방식으로 구분됨
1) 쿠키(Cookies)
- 가장 오래된 클라이언트 저장 방식
- 4KB 제한의 작은 텍스트 파일
- 매 HTTP 요청에 자동으로 서버에 전송됨
- 만료 기간 설정 가능
2) 로컬 스토리지(Local Storage)
- HTML5에서 도입된 영구적인 저장소
- 약 5~10MB 용량 제공
- 도메인별로 격리되어 저장
- 브라우저를 닫아도 데이터 유지
3) 세션 스토리지(Session Storage)
- 로컬 스토리지와 유사하지만 임시 저장
- 브라우저 탭/창을 닫으면 데이터 소멸
- 각 탭마다 독립적인 저장소 제공
- 약 5~10MB 용량 제공
-
🔍서버 측 저장 방식(데이터베이스 활용)
- 서버에 데이터를 저장하는 방식으로, 다양한 데이터베이스 시스템을 활용
1) 관계형 데이터베이스(RDBMS)
- MySQL, PostgreSQL, MariaDB 등
- 구조화된 데이터와 관계 관리에 적합
- SQL을 통한 데이터 조작
- PHP와 함께 자주 사용됨
2) NoSQL 데이터베이스
- MongoDB, Firebase Realtime Database 등
- 비구조화 데이터나 대용량 처리에 적합
- 확장성이 뛰어남
3) 서버 측 세션 관리
- PHP 세션과 같이 서버 메모리나 파일에 데이터 저장
- 사용자 인증 정보 등 임시 데이터 관리에 사용
1-3.추가된 부분
- 내컴퓨터에 웹사이트데이터를 저장하는 방식에 대해 쿠키, 로컬 스토리지, 세션 스토리지 방식의 장단점을 알고 적용시킬 수 있어야 함
- 📢**서버 측 저장 방식(데이터베이스 활용)**은 고급과정에서 다룰 예정
2. 커서AI활용시 유의점
2-1. 순차적으로 진행
2-2.프롬프트 예시
3. 제목