TIL12 - 2023.10.06

컴포넌트 방식으로 생각하기

컴포넌트 만들기 - TodoList

• UI를 선언적으로 표현하기 위해 다음과 같이 추상화를 할 수 있다

App
ㄴ Header
ㄴ TodoForm
ㄴ TodoList

• 여기서 Header, TodoForm, TodoList는 서로 독립적인 하나의 단위로 구현되는데 이를 컴포넌트라고 한다. 각각의 컴포넌트는 동작이 독립적으로 돌아가고 사용하는데 다른 곳에 영향을 주지 않는다
• 컴포넌트화가 되어 있으면 컴포넌트 부분만 코드를 수정하면 되어서 재사용이 쉽고 유지보수하기 좋다

Client 사이드 데이터 저장하기

Cookie

• 쿠키는 브라우저에 저장되는 작은 문자열로, RFC 6265 명세에서 정의한 HTTP 프로토콜의 일부
• 다른 저장 방법에 비해 가장 오래된 방식
• Cookie 추가하기 : 이전 cookie를 덮어쓰지 않고 새로 추가됨
• Cookie 읽어오기 : 각 쿠키는 ;로 구분되어 있어 불러온 후 split 등으로 쪼개서 써야 한다
• Cookie 유효기간 넣기

// Cookie 추가
document.cookie = 'KDT = baek';

// Cookie 읽어오기
const cookies = document.cookie.split(';');


// Cookie 유효기간 넣기
// expires의 경우 GMT String을 넣어야함(한국 시간 기준이 아니고 GMT 기준)

const date = new Date();
date.setDate(date.getDate()+1); //하루 뒤
// date.toGMTString() => 현재 날짜
document.cookie = `user=baek; expires= ${date.toGMTString()}`;
// max-age를 넣으면 생성시점 기준으로 유효기간 설정 가능
// 단위는 1초, 3600의 경우 1시간
document.cookie = `user=baek; max-age=3600`;

Cookie 주의사항

• HTTP 요청시 헤더에 쿠기가 같이 나가기 때문에 쿠키 사이즈가 커지면 HTTP 요청 크기도 커진다
• 사이즈에 제한이 있다
• 여러가지 보안 취약점을 조심해야 한다

Local Storage

• key, value 기반으로 Local에 데이터를 저장할 수 있다
• 도메인 기반으로 Storage가 생성이 된다 - 도메인만 같다면, 여러탭 내에서 같은 Storage가 공유된다
• 삭제하거나 Storage를 날리지 않는 한 삭제되지 않는다 (브라우저를 닫아도 값이 삭제되지 않음)
• 값을 저장하는 방법 세 가지

window.localStorage.name = 'baek';
window.localStorage['name' = 'baek'];
window.localStorage.setItem('name', 'baek');
// setItem을 이용해 사용하는 것이 가장 안전함

• 저장, 불러오기, 삭제 하는 방법

// 저장
localStorage.setItem('name', 'baek');
// 불러오기
const storedName = localStorage.getItem('name');
// 삭제하기
localStorage.removeItem('name');
// 전체 삭제하기
localStorage.clear();

• localStorage에는 string만 넣을 수 있기 때문에, JSON.stringify로 넣고 JSON.parse로 꺼낸 값을 파싱해서 쓰는 것이 좋다

const user = {
    name: 'baek',
    position: 'Defender',
    job: ['student', 'engineer']
}
// 저장
localStorage.setItem('user', JSON.stringify(user));
// 불러오기
const storedName = JSON.parse(localStorage.getItem('name'));

Session Storage

• 전체적으로 Local Storage와 같다
• 그러나 브라우저를 닫으면 저장된 내용이 초기화된다