KDT 5th 웹개발자 입문 수업 20일차 - 1

 

1. @keyframes

CSS 속성을 구간별로 정의해서 애니메이션 효과를 줄 수 있다.

@keyframes 애니메이션변수명 { 
	from { }
    to { }
    // or
    0% { }
    25% { }
    50% { }
    75% { }
    100% { }
}

 

CSS 안에 animation 속성으로 지정해줄 수 있고

animation : 애니메이션변수명 애니메이션지속시간 지연시간 반복여부 타이밍함수;

animation-name

animation-duration

animation-delay

animation-iteration-count

aniamtion-timing-function

 

 

2. window.localStorage

브라우저에 간단한 정보를 영구히 저장하기 위한 수단

프론트에서 저장할 것이 필요할 때, 브라우저에게 간단한 정보를 저장시킬 수 있다

 

개발자도구 > Application > Storage > Local Storage > 도메인 에서 확인 가능

window.localStorage 에 접근 시 객체 형태로 저장된다.

window.localStorage.setItem(key, value) : key, value 추가

.getItem('key') : value 리턴 ---> 만약에 키가 없다면 undefined가 아닌 null이 리턴

 .removeItem('key') : item 삭제

.clear() : 도메인 내 localStorage 값 삭제

.length : 전체 item 개수

.key(index) : 인덱스로 key의 값 리턴 ---> 만약에 키가 없다면 undefined가 아닌 null이 리턴

 

✨ localStorage에 객체 저장하기

기본적으로 localStorage는 모든 자료형을 문자열로밖에 저장이 안되므로,

객체를 JSON(JS Object Notation)화 해줄 필요가 있다. --> 데이터 통신을 위해 객체 형태의 데이터를 문자열로 변환한 데이터(모든 데이터를 쌍따옴표 " 를 감싸서 문자열로 전달한다)

 

객체 -> JSON : JSON.stringify(객체) --> JSON

JSON -> 객체 : JSON.parse(JSON) --> 객체

 

 

3. window.SessionStorage?

LocalStorage가 영구적으로 보존되는 문제를 해결하기 위해 사용된다.

브라우저가 닫히게 되면 저장된 데이터가 삭제되므로 보안이 필요한 데이터를 저장할 때 사용한다.

 

localStorage와 동일한 내장 메서드 형식을 가지고 있음