🚀 강의 목적과 학습 목표
브라우저 저장소를 웹사이트에서 실제로 사용하는 법을 배웁니다.
프론트엔드 개발을 배우다 보면, 데이터를 저장하고 관리하는 방법인 local storage, session storage, cookie가 얼마나 중요한지 알게 됩니다. 하지만 이를 실제 프로젝트에 적용하려면 막막함을 느낄 때가 많죠. 어떤 데이터를 어디에 저장해야 하고, 언제 삭제해야 할지 고민하게 되니까요. 하지만 너무 걱정하지 마세요. 누구나 처음엔 어려움을 겪습니다. 이 강의는 local storage, session storage, cookie를 쉽게 이해하고, 실전에서 바로 활용할 수 있도록 도와드립니다. 데이터 저장의 기본 개념부터 사용 사례와 보안 팁까지 체계적으로 배울 수 있습니다. 함께 배우며 한 걸음씩 성장해 보세요. 😊

📍 실전 연습을 위한 스토리지 기본 개념 복습: 브라우저가 저장소를 가지고 있다는 의미와 기본 개념을 복습합니다.
📍 스토리지의 실제 적용 방법: 사용자 데이터를 저장하고 관리하기 위해
📍 현업에서 자주 사용되는 주요 스토리지 기능들 마스터: 최근 본 상품 표시, 사용자 닉네임 표시, 장바구니에 물품 추가 등, 실전에서 자주 쓰이는 스토리지 활용 사례를 통해 웹 개발 역량을 강화합니다.
📍 스토리지의 실제 적용 방법: 사용자 데이터를 저장하고 관리하기 위해
local storage
, session storage
, cookie
를 활용하는 방법을 학습합니다.📍 현업에서 자주 사용되는 주요 스토리지 기능들 마스터: 최근 본 상품 표시, 사용자 닉네임 표시, 장바구니에 물품 추가 등, 실전에서 자주 쓰이는 스토리지 활용 사례를 통해 웹 개발 역량을 강화합니다.
👩🏻💻 이런 분을 위해 만들었어요👩🏻💻 이런 분들을 위해서 만들었어요
📍 기본 강의에서 다루지 않는 실전 활용법을 배우고 싶은 분
📍
📍 기본적인 자바스크립트 문법을 넘어 스토리지를 활용한 데이터 저장 및 관리를 배우고 싶은 분
📍 스토리지를 활용해 사용자 경험을 개선하고, 한 단계 더 높은 웹 개발 실력을 쌓고 싶은 분
📍
local storage
, session storage
, cookie
를 이해는 하지만, 실제 프로젝트에 어떻게 접목할지 고민 중인 분📍 기본적인 자바스크립트 문법을 넘어 스토리지를 활용한 데이터 저장 및 관리를 배우고 싶은 분
📍 스토리지를 활용해 사용자 경험을 개선하고, 한 단계 더 높은 웹 개발 실력을 쌓고 싶은 분
🎁 강의는 이렇게 구성돼요🎁 강의는 이렇게 구성되어 있어요
📍 웹 개발에서 가장 많이 사용되는
📍 저장소를 활용해 사용자 최근 본 상품 표시, 장바구니 표시 등의 필수 기능들의 원리를 배울 수 있어요!
📍 만료시간을 설정하여, 일정 시간 후, 데이터가 초기화되는 방식도 구현할 수 있어요!
local storage
, session storage
, cookie
의 다양한 활용법에 집중해요!📍 저장소를 활용해 사용자 최근 본 상품 표시, 장바구니 표시 등의 필수 기능들의 원리를 배울 수 있어요!
📍 만료시간을 설정하여, 일정 시간 후, 데이터가 초기화되는 방식도 구현할 수 있어요!
Chapter 1: 프로젝트 소개 및 개인화된 인사말 기능 구현
사용자가 자신의 닉네임을 입력하고 저장하여, 쿠키에 데이터를 저장하는 방법을 배웁니다. 저장된 닉네임은 페이지를 새로고침해도 유지되며, 사용자에게 개인화된 경험을 제공합니다.

Chapter 2: 상품 목록 표시 및 검색 기능 구현
쿠키에 저장된 닉네임을 가져와 화면에 표시하는 방법을 배웁니다. 닉네임이 없을 경우 입력 필드를 표시하고, 닉네임이 있을 경우 환영 메시지를 출력합니다.

Chapter 3: 장바구니 기능 구현 - 상품 추가 및 저장 (로컬 스토리지 활용)
사용자가 원하는 상품을 선택해 장바구니에 추가하는 기능을 구현합니다. 로컬 스토리지를 활용하여 상품 데이터를 저장하고, 페이지를 새로고침해도 장바구니 상태가 유지됩니다.

Chapter 4: 장바구니 페이지 구현 - 상품 표시 및 관리
로컬 스토리지에 저장된 장바구니 데이터를 화면에 표시하고, 상품을 제거하거나 장바구니를 비우는 기능을 구현합니다. 데이터 조작과 UI 업데이트를 연결하는 방법을 학습합니다.

Chapter 5: 고급 기능 구현 - 최근 본 상품 기능 구현 (세션 스토리지 활용) 및 코드 개선
사용자가 상품을 클릭하면 해당 상품을 세션 스토리지에 저장하는 기능을 구현합니다. 최대 5개의 상품만 유지하며, 최신 상품이 항상 상단에 배치되도록 정렬합니다.

Chapter 6: 고급 기능 구현 - 스토리지 데이터의 만료 시간 설정 및 자동 삭제 구현
세션 스토리지에 저장된 데이터를 불러와 화면에 최근 본 상품 목록으로 표시합니다. 카드 형식의 UI로 동적으로 구성하며, 세션 데이터를 시각적으로 활용하는 방법을 학습합니다.

⭐️ 이 강의만의 특장점
👩🏻🏫 한땀 한땀 자세히 설명해주는 위코드!
코딩은 단순히 핵심 개념만 설명하고 "알아서 이해하세요"라고 넘기는 것은 불친절한 접근입니다. 간단한 배열을 적용하는 것조차도 다양한 배경 지식과 문맥이 필요하기 때문이죠. 위코드는 누구나 쉽게 이해할 수 있도록, 하나하나 친절하고 상세하게 설명하며 학습의 문턱을 낮춥니다. 함께 배우면서 "아, 이거였구나!" 하는 깨달음의 순간을 경험해 보세요!
🛠️ 실제 웹사이트 구조를 바탕으로 한 실전 중심의 학습 접근법
이 강의에서는 실제 웹사이트 구조를 기반으로 한 실전 중심의 학습 접근법을 제공합니다. 가상의 예제가 아닌, 현업에서 실제로 사용되는 기능들을 예제로 들어 브라우저 저장소의 모든 것을 가르쳐 드립니다.

🙋🏻 질문이 있으신가요?
어려운 부분이 있으신가요? 도움이 필요하세요? 하단의 링크를 통해 위코드 코딩 질문방으로 오세요!
위코드 스태프들이 직접 친절하게 알려드립니다! 🫡
👉 위코드 코딩 질문방으로 들어가기 (비밀번호:
위코드 스태프들이 직접 친절하게 알려드립니다! 🫡
👉 위코드 코딩 질문방으로 들어가기 (비밀번호:
wecode
) 💻 쉽게 이해되는 3분할 화면💻 한눈에 이해시켜주는 3분할 화면
강의나 수업을 들어도 이해가 안되었던 경험 있으시죠? 여러분의 탓이 아닙니다! 코딩은 원래 이해하는것이 굉장히 어렵습니다. 위코드는 여러분이 최대한 쉽게 이해할 수 있도록 모든것을 준비했습니다. 강의 영상의 핵심 내용을 실시간으로 정리해 드리고, 직접 수정하고 실행해볼 수 있는 코드까지 실시간으로 제공하는 위코드만의 코딩 강의 플랫폼에서 재밌고 쉽게 학습하세요!
📍 모바일에서도 쉽게 볼 수 있는 세로 비율의 강의 영상
📍 강의 내용을 이해하기 쉽도록 실시간 핵심 내용 정리
📍 강의 내용 흐름에 맞추어 실시간 업데이트 되는 코드 에디터
📍 직접 수정해보고 실행도 할 수 있는 코드
📍 강의 내용을 이해하기 쉽도록 실시간 핵심 내용 정리
📍 강의 내용 흐름에 맞추어 실시간 업데이트 되는 코드 에디터
📍 직접 수정해보고 실행도 할 수 있는 코드
