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

홀로 진행하던 클래스형 컴포넌트 만들기와 거의 유사한 내용이니 길게 설명하진 않겠다.
각각 컴포넌트는 독립적이어야하고 하나의 책임을 가진다.
따라서 형제들끼리는 최대한 의존성을 치우고
부모에게 연결시켜서 부모컴포넌트에서 처리하는 방식
다른 프레임워크 없이 오직 바닐라로만 구현이 가능하다는 걸 알야아 함.
=> 상태기반 컴포넌트 프레임워크인 React, Vue에 대한 이해도가 높아졌다.

---

클라이언트용 DB

쿠키

쿠키는 제일 오래된 방식.
같은 이름으로 추가하면 덮어쓰기가 안되고, 새로 추가된다.
세미콜론;단위로 나오니 split(";")으로 잘라서 사용해야함.
유효기간을 넣지않으면 브라우저를 닫을시 사라짐.

• expires : 특정 날짜 시간 (date객체)이후에 만료.
  => date객체편에서 설명했듯 날짜,시간 파싱은 이상하니까 이건 사용하지 말자
• max-age : 초 단위. 지정한 초 만큼 시간이 지나면 사라짐. 권장됨

쿠키는 헤더에 담겨 나가서, http요청크기가 커짐
사이즈에 제한도 있음.
보안 취약점도 있다.

Local Storage

key-value 기반 저장방식. 도메인 내에서 유효
삭제하지 않는 한 계속 남아있음

localStorage.setItem(key, value);
const getLocal = localStorage.getItem(key);
localStorage.removeItem(key);...

문자열만 들어가기에 JSON은 문자열로 파싱해야함

Session Stroage

로컬스토리지와 비슷하나, 브라우저를 닫으면 삭제.

---

모듈

강의에선 모듈이 아닌 여러 스크립트를 선언해서 전역변수화 시켰다.
모듈의 중요성을 깨우쳐 주시려고 일부러 하신 것 같다.
하지만 나는 모듈구문을 사용할 것이다. 안해본 거 해보는게 재밌으니까!

모듈 선언은 요래한다.

<script src="..." type="module"></script>

각 파일에서 불러오거나, 내보낼땐 요래한다.

export....
export default(기본값)
import 이름 from 위치

뭐야 React에서 사용하던 방식이 모듈이었고만?

---

JSON.parse()

로컬스토리지를 이용해 값을 입-출 하는데 문제가생겼다.
분명 JSON.stringify를 이용해 배열을 문자열로 바꿔서 넣고 JSON.parse로 다시 꺼내왔는데
배열이 아닌 문자열이 꺼내진다.

오잉...?

=> 모르고 JSON.stringfy를 두번 사용했다. 두번이나 파싱되어서 문자열이 되버린 것 같다 ㅋㅋ

---

과제

나머지는 과제다! 과제는 github 커밋으로 남기겠습니다