목차(클릭하세요)
To Do List를 만들기 위해 웹 사이트의 데이터를 저장하는 방식을 알아야 함
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 용량, 임시 저장
• 서버에 자동 전송 안됨
• 탭/창 닫으면 데이터 소멸
서버 측 저장
구분 | RDBMS | NoSQL | 세션 관리 |
비유 | 체계적으로 분류된 대형 창고 (명확한 구획과 규칙) | 유연한 컨테이너 저장소 (다양한 형태 수용) | 임시 보관함 (단기간 사용 후 정리) |
예시 | MySQL, PostgreSQL | MongoDB, Firebase | PHP Session |
구조 | 테이블-행-열 (고정) | 문서/키-값 (유연) | 키-값 (단순) |
언어 | SQL | 각 DB별 API | 언어별 세션 API |
확장성 | 수직 확장 | 수평 확장 우수 | 제한적 |
지속성 | 영구 저장 | 영구 저장 | 임시 저장 |
용도 | 구조화된 업무 데이터 | 대용량 웹서비스 | 로그인 상태 관리 |
선택 가이드
•
임시 데이터 → 세션 관리
•
정형 업무 데이터 → RDBMS
•
대용량 + 유연성 → NoSQL
서버 측 데이터 저장 방식 비교
Step by Step 선택 가이드:
1.
임시 데이터 → 세션 관리
2.
정형화된 업무 데이터 → RDBMS
3.
대용량 + 유연한 구조 → NoSQL
현실적으로 서비스를 구현시에는 위 방식들을 조합해서 사용한다는 점•
예를 들어, 사용자 설정은 localStorage에, 민감한 데이터는 서버 데이터베이스에, 임시 상태는 세션에 저장하는 식
1-3. ToDo리스트 구현을 위해 알아야 할 Tip
•
내 컴퓨터에 웹 사이트의 데이터를 저장하는 방식에 대해 쿠키, 로컬 스토리지, 세션 스토리지 방식의 장단점을 알고 적용시킬 수 있어야 함!
•
서버 측 저장 방식(데이터베이스 활용)은 고급과정에서 다룰 예정2. 로컬스토리지를 활용한 Todo리스트 연습
2-1. 순차적으로 진행
•
세부 기능은 나중에 만들고, 페이지 디자인 부터 생성
•
처음부터 ‘Todo리스트 만들어줘~ 해줘~’할수 있지만, 이 경우 오류발생시 디버깅이 쉽지 않을 수 있음(확률적)
•
제작과정을 단계적으로 구분하여 순차적으로 만드는 것이 보다 효과적임
•
AI 에이전트 역시 이렇게 단계별로 작업을 진행하는 것이 일반적임.
2-2.프롬프트 예시
Tailwind CSS를 이용해 To do list를 입력하고, 완료된 일정을 체크해서 지울 수 있는 페이지를 만들어줘.
단계별로 구축할 예정이니까. 한꺼번에 만들지 말고,
1. 디자인만 먼저 해봐
2. 디자인에 글래스모피즘 효과 적용하고, 색상도 그라데이션 처리해. 색상계열을 보라색을 중심으로 20대가 좋아할 만한 감성으로
3. 할일 입력란은 ‘인풋필드’로
2-3.초기생성결과물 확인
•
‘Go Live’선택하면 php Server가 실행되지 않으니, 터미널에서 다음 명령어 입력
php -S localhost:8000
PHP
복사
•
만들어진 디자인 초안
2-4.기능추가
•
오늘날짜 표시하기
할일을 입력하는 인풋 필드 옆에 버튼을 만들고, 버튼 위에 날짜를 바꿀 수 있는 옵션을 만들어줘. 오늘을 기준으로 앞뒤 이동이 가능해야 해. 단, 디자인만 추가하고, 기능은 아직 구현하지마
•
폰트어썸은 웹에서 가장 많이 사용되는 아이콘 라이브러리
폰트어썸을 활용해 아이콘을 추가하여 MZ감성 2스푼 추가하자
2-5. 작동로직 완성(로컬 스토리지 방식)
•
Todo List에 할일을 등록하면 그 내용이 ‘로컬 스토리지’에 저장이 되고, 또 날짜를 지정하면 로컬 스토리지에 저장된 ‘할일’리스트에서 불러와서 화면에 띄어달라고 요청해보기
그럼 이제부터 로컬 스토리지를 이용해서 본격적인 기능을 구현하자. 사용자가 할일을 input field에 입력하고, 추가 버튼을 누르면, 로컬 스토리지에 설정된 날짜로 할일이 기록되게 해줘. 그리고 기록된 내용이 화면에, 날짜에 맞게 표시되도록해봐.
•
캘린더에서 날짜 이동이 불편해 보임. 따라서 오늘 날짜 아래에 해당 월의 캘린더가 나타날 수 있도록 추가하기
오늘날짜가 표시되는 부분 아래 해당 월의 캘린더가 출력되도록 해줘. 그리고 선택한 날짜와 오늘 날짜를 한눈에 구분할 수 있도록 특별한 표시도 해줘. 또 캘린더에서 날짜별로 할일이 있는경우, 몇개의 할일이 있는지 표시해주는 기능도 필요해
•
버그수정
캘린더에 표기되는 날짜와 실제 날짜가 1일 차이나는데. 수정해봐
◦
참고: JS에서 new Date(year, month, d)로 날짜 객체를 만들 때, 로컬 타임존이 적용되어, 한국 시간(KST) 기준으로는 하루가 밀려서 표기되는 경우가 발생할 수 있음
2-6. 로컬스토리지의 저장위치 확인하기
로컬스토리지의 저장위치를 확인하고, ToDo내용이 저장된 파일명을 알려줘
•
별도의 파일명은 없으며, 브라우저 내부의 Local Storage DB 파일에 저장됨
•
내용 확인은 브라우저 개발자도구에서만 가능
다음 방법으로 확인가능
내컴퓨터에 특정파일로 존재하는 것이 아닌 브라우저 내부의 DB 형태로 저장됨