[2023-10-06] TIL - VanillaJS 컴포넌트 방식, Cookie, LocalStorage

📝오늘 배운 것

1.컴포넌트 방식으로 생각하기
2. 컴포넌트끼리 데이터를 주고받아야할 때 의존성 없이 해결하는 방법 - 이벤트 콜백
3. setState로 상태 변환하기
4. Client Side에서 데이터를 저장하는 방법 2가지
5. Cookie 유효기간 지정방법
6. Cookie 사용시 주의 사항
7. Local Storage 사용법

 

 

💡알게된 점

1. Cookie 주의사항

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

2. Local Storage를 사용할 때는 setItem메서드를 사용하는 것이 권장된다.

3. Local Storage에 데이터를 저장할 때는 string만 넣을 수 있기때문에 Object형식을 넣을 때 JSON.stringify를 사용해야하고, 꺼낼 때는 JSON.parse를 사용해야한다.

5. Local Storage를 사용할 때 주의사항

• 외부 툴이나 직접 개발자 도구의 Application탭에서 데이터를 지운다면 홈페이지는 에러를 발생하게 된다.
• 이를 해결하기 위해서는 Local Storage를 사용할 때 별도의 함수에서 try catch문을 이용해 예외처리를 해야한다.

 

💬궁금한 점

1. 아래와 같은 객체가 들어있는 배열을 넣으면 뒤에 추가하는 객체는 키를 지정안해도 되는 것인가?

onSubmit: (text) => {
    const nextState = [
        ...todoList.state,
        {
          text, // key값을 지정안하고 text 변수 값만 넣음
        },
    ];
    
    ...
    
}

console.log(text) 결과

console.log(todoList.state) 결과

console.log(...todoList.state) 결과

console.log(nextState) 결과