2023-10-25 본 캠프 15일차 / 34일차 TIL

2023-10-25 본 캠프 15일차 / 34일차 TIL

 

주요진행사항

- 팀과제 진행

 

data- 속성 사용법

이번 프로젝트에서 동적 생성 요소에 localStorage의 키값을 data- 속성을 통해 전달하였다.

 

동적으로 DOM 요소를 구성할 때 data- 속성은 유용하게 쓰인다.

 

기본적인 사용법은 다음과 같다.

 

<div class= 'test' data-id='123' data-name='kim'> </div>

data-  이후에 원하는 이름을 지정할 수 있으며, 해당 data 속성에는 문자열 타입의 값을 대입할 수 있다.

 

불러오는 과정은 다음과 같다.

const id = document.querySelector('.test').dataset['id'];
const name = document.querySelector('.test').dataset['name'];

console.log(id); // 123
console.log(name); // kim

 

이런 식으로 동적으로 생성한 요소에 접근한다면 유용하게 사용할 수 있다.

이번 프로젝트에 적용시킨 예시이다.

---

localStorage 활용법

localStorage는 서버가 아닌 로컬 브라우저에 간단한 데이터를 저장할 때 사용한다.

key:value의 형태를 띄는 해시값이며, value에는 문자열 타입의 값만 저장할 수 있다.

 

 

사용법은 다음과 같다.

1. const value = localStorage.getItem(key) : 해당 key 값의 value를 반환

2. localStorage.setItem(key) = value : 해당 key 값에 value를 저장

3. localStorage.removeItem(key) : 해당 key 값을 가진 데이터를 삭제

 

localStorage의 값을 확인하는 방법은 다음과 같다.

이번 프로젝트에서 localStorage를 이용하여 영화 리뷰 기능을 구현하였다.