[TIL🔥]Day12(8/18)

Introduction

오늘은 주로 실습 위주의 강의를 들었다.
바닐라 JS로 토글 버튼을 만들고 간단한 TodoList도 만들어보았다.
컴포넌트 단위로 기능을 계속 쪼개가며 구현하는 형식을 처음 접해보았는데 재사용성이 높다는 걸 느꼈다.
바닐라 JS의 경우 사실 노마드코더 강의로 한번 접해본 것이 처음이라 강의를 들을때 주로 코드를 따라하는 형식으로 이해하며 넘어갔다. 이번 주말에 꼭 혼자 힘으로 구현해보아야겠다.

오늘 새롭게 배운 것

1. 컴포넌트 방식으로 TodoList 구현 📝
2. Local Storage 🗄

오늘은 Local Storage에 대해 간단히 정리해보고자 한다.

🗄 Local Storage

• key, value 기반으로 Local에 데이터를 저장할 수 있다
• 도메인 기반으로 Storage가 생성된다
  • 도메인만 같다면 여러 탭 내에서 같은 Storage가 공유된다
• 삭제하거나 Storage를 날리지 않는 한 삭제되지않는다

데이터 저장, 불러오기, 삭제하기

// window 생략 가능

// 저장하기
localStorage.setItem('name', 'daseul')

// 불러오기
const storedName = localStorage.getItem('name') 

// 삭제하기
localStorage.removeItem('name')

// 전체 삭제하기
localStorage.clear()

여기서 중요한 점은 Local Storage에는 String 타입만 넣을 수 있기 때문에 JSON.stringify 로 넣고 JSON.parse 로 값을 꺼내 파싱해서 쓰는 것이 좋다.

코드 예시를 통해 알아보자.

// JSON.stringify와 JSON.parse
const user = {
	name: 'daseul',
	age: '26',
	gender: 'woman'
}

// 저장하기
localStorage.setItem('user', JSON.stringify(user))

// 불러오기
const storedName = JSON.parse(localStorage.getItem('user'))

Session Storage와의 비교

사실 스토리지의 종류에는 한 가지가 더 있는데 그것이 바로 Session Storage이다.

• Session Storage의 경우 브라우저를 닫으면 저장된 내용이 초기화
• Local Storage의 경우 도메인 기반으로 Storage가 생성되기 때문에 도메인만 같다면 영구 저장

Comment

무언가 프로젝트를 할 때 값을 로컬 스토리지에 저장하고, 그 값을 꺼내 이용하는 부분은 꼭 필요하다.
로컬 스토리지의 특징과 사용법을 확실히 익혀 프로젝트에 잘 적용하도록 노력해야겠다.
아 그리고 오늘은 팀원들과 두번째 코드 리뷰를 진행했다.
확실히 처음보다는 어떤 점을 코드 리뷰에 적어야하고, 팀원들의 코드에서 배울점이 무엇인지 깨달았다.
계속해서 서로 윈윈하는 그런 5개월이 되도록 노력해야겠다~🥰