프로그래머스 데브코스 TIL - Day 11

✅ 학습 목차

- [DAY 11] VanillaJS를 통한 자바스크립트 기본 역량 강화 (3)

 

✅ 새롭게 학습한 부분

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

- Client Side에서 데이터를 저장하기

- LocalStrorage

 

---

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

- 컴포넌트는 재사용이 가능하고 독립적이게 사용할 수 있도록 구성

- 역할과 책임에 따라서 분리

- 외부로부터 주입된 데이터를 관리

- UI를 선언적으로 표현하기 위해 추상화

- 컴포넌트의 의존성을 줄이기 위해 생성한 컴포넌트에서 이벤트 콜백을 만들어서 사용

 

 

🍪 쿠키

📌 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 데이터 파일

 

- 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장이 된다.

- key, value 형태로 저장 된다.

- 약 4KB까지의 데이터를 저장할 수 있다.

- 저장 유효기간을 정할 수 있으며 유효기간이 없을 경우 브라우저를 닫으면 쿠키가 사라진다.

- 대부분의 브라우저가 지원한다.

- HTTP요청 시 헤더에 쿠키가 같이 보내지기 때문에 쿠키 사이즈가 커지면 HTTP요청 크기도 커진다.

- 로컬에 저장되는 데이터기 때문에 변질되거나 보안적인 부분이 취약하다

 

 

📦 Local storage

📌 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소

 

- 도메인 기반으로 생성되며 도메인만 같다면 여러 탭 내에서 같은 Storage를 공유한다.

- key, value 형태로 저장 된다.
- 유효 기간이 없고 브라우저 창을 닫아도 데이터가 유지된다.
- 최대 5MB 데이터를 저장할 수 있다.

- 문자열 데이터만 저장할 수 있다.

 

 

---

 

✍ 느낀 점

실습 위주로 진행되는 강의로 내용 정리할 것이 많이 없었다.

이전에 진행했었던 스터디와 내용이 거의 같아서 복습하는 느낌으로 실습을 했다.

확실히 이전에 그냥 구현만을 목적으로 작성을 했던 코드보다

컴포넌트 방식으로 한번 더 생각하고 재사용성을 고려하면서

구현했던 것들이 수정하기도 편하고  관리하기도 편했다.👍

이번 주는 실습 내용을 바탕으로 과제에 집중해서 과제를 먼저 끝내볼 예정이다.