[TIL] 프론트엔드 Day 11

📚 공부한 내용

1. 컴포넌트 방식

하나의 큰 기능을 구현할 때, 작은 기능 단위(컴포넌트)로 분리해서 구현하는 방식. 컴포넌트를 구성할 때는 재사용성에 영향이 없도록 다른 컴포넌트에 의존하지 않도록 만드는 것이 중요하다. 하나의 컴포넌트에서 다른 컴포넌트로 값을 전달하고 처리해야한다면 콜백함수를 사용할 수 있다. 컴포넌트는 어떤 컴포넌트에게 값을 전달하는지 모르는 상태에서 값의 처리를 전적으로 콜백함수에 맡긴다.

2. 쿠키

• 브라우저에 저장되는 작은 문자열, key=value의 형태로 document.cookie에 저장되어있다.
• 각각의 key-value쌍은 세미콜론으로 구분되어 있어 cookie의 값을 이용할 때 split을 이용해 사용할 수 있다.
• 유효기간이 설정되어 있지 않으면 브라우저 종료시 사라지며, 유효기간은 GMT 시간을 사용한다.
• HTTP request시에 쿠키값이 헤더에 포함된다. 따라서 쿠키값이 커진다면 요청의 부하가 커진다.
• 여러가지 보안취약점에 유의해야 한다. (XSS, CSRF 등)

3. 로컬 스토리지

• key-value 쌍으로 로컬에 데이터를 저장할 수 있게 만든 저장공간
• 도메인 기반으로 Storage가 생성된다.
  (동일한 도메인을 여러 탭에서 이용하는 경우 스토리지 공유가 가능하다.)
• 별도의 동작으로 삭제하지 않는다면 브라우저를 꺼도 데이터가 유지된다.
• window.localstorage에 setItem(key) = value, getItem(key), removeItem(key), clear() 함수를 이용해서 데이터를 관리한다.
• 모든 value값은 string으로 저장되며 Object나 Array 등을 저장할 때는 JSON.stringify()를 이용하고, 값을 읽어올 때는 JSON.parse()를 이용하는 것이 좋다.
• 로컬 스토리지를 이용할 때, 외부에서 악의적으로 데이터의 조작이 가능한 것을 고려하자. try-catch를 이용한다면 더욱 안전한 코드를 짤 수 있다.

---

📝 더 공부할 것

컴포넌트 패턴, 디자인 패턴

---

🤔 느낀점

컴포넌트 방식으로 구성을 할 때, 어느 정도의 기능까지 나누는 것이 적당한지 정하는 것이 많이 어렵다. 이 부분을 중심으로 코드리뷰를 받아봐야겠다. 요즘 TIL을 자주 빼먹었다. 끝까지 완주하려는 마음가짐으로 다시한번 의지를 다잡자.

---

Reference

프로그래머스 프론트엔드 데브코스