[무료 강의] 162~177쪽 CRUD 개념과 로컬 스토리지 개념 익히고, DESIGN.md를 결합해 나만의 메모 앱 만들기

이번 영상에서는 브라우저 내장 저장소인 로컬 스토리지의 개념부터, 실제로 CRUD 기능을 갖춘 메모 앱을 설계하고 구현하는 전 과정을 함께 진행합니다. 디자인 템플릿 적용, 달력 기능 추가, 그리고 개발자 도구로 데이터가 어떻게 저장되는지 눈으로 직접 확인하는 것까지 — 나만 쓸 간단한 웹 앱, 생각보다 쉽습니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 인스타그램 사이트 실습 안내 및 스킵 이유
0:28 서버 포트 관리의 중요성 (터미널 정리법)
4:23 로컬 스토리지란 무엇인가
5:18 다크 모드 설정이 유지되는 원리
5:48 개발자 도구에서 로컬 스토리지 확인하기
6:22 로컬 스토리지 vs 데이터베이스 비교
7:40 뽀모도로 타이머 예제로 보는 로컬 스토리지 활용
9:28 메모 앱 설계 시작 — 프롬프트 작성과 CRUD 개념
12:01 CRUD 용어 정리 (Create, Read, Update, Delete)
14:19 플랜 모드로 설계 진행 및 디자인 템플릿 적용
16:51 완성된 메모 앱 테스트 및 로컬 스토리지 데이터 확인
22:15 달력 기능 추가 요청 및 핫 리로드 확인
24:57 달력 연동 후 날짜별 메모 관리 확인
25:57 다음 시간 예고 — 디자인 라이브러리와 프레임워크

오늘 다룬 내용
- Next.js 개발 시 서버 포트가 쌓이는 문제와 터미널 정리 방법
- 로컬 스토리지의 개념과 데이터베이스 대비 장단점
- CRUD(Create, Read, Update, Delete) 용어와 메모 앱 설계
- 디자인 템플릿을 활용한 UI 적용 과정
- 커서 에이전트를 활용한 바이브 코딩으로 메모 앱 구현
- 개발자 도구(F12)로 로컬 스토리지 데이터 직접 확인
- 달력 기능 추가와 핫 리로드를 통한 실시간 반영 확인

#바이브코딩 #커서AI #Cursor #Next.js #로컬스토리지 #LocalStorage #메모앱 #웹개발 #프론트엔드 #CRUD #코딩입문 #노코드 #웹앱만들기 #개발자도구 #디자인템플릿 #핫리로드 #포트관리 #뽀모도로 #자바스크립트 #리액트