[데브코스 15일차] 브라우저 저장소와 모듈 + 1주차 미션 회고

🤔 생각해볼 것들

- 쿠키와 세션에 대해서 설명할 수 있나요?

- 쿠키를 사용할 때 주의할 점에는 무엇이 있을까요?

- 모듈화를 하면 무엇이 좋은가요?

 

---

[1] 쿠키

⚠ 쿠키와 세션에 대해서는 다음 번에 자세히 공부해보자.

웹 페이지에서 '하루동안 보지 않기', '15일 동안 보지 않기' 이런 기능들은 쿠키를 활용할 수 있다. 왜냐하면 쿠키에 유효기간을 넣을 수도 있기 때문.

[1-1] 쿠키 저장하고 가져오기

document.cookie = "name=yong";
document.cookie = "location=korea";

console.log(document.cookie); // name=yong; location=korea

쿠키를 가져오게되면 문자열 형태로 반환한다. 이것을 이용해서 데이터를 추출하고 싶다면 파싱이 필요할 것.

[1-2] 여러가지 옵션

max-age=초

쿠키를 저장할 때 다양한 옵션을 추가할 수도 있다. max-age는 n초 후에 쿠키가 사라지도록 한다.

document.cookie = "name=yong; max-age=10";

console.log(document.cookie);

setTimeout(() => {
  console.log(document.cookie);
}, 11000);

max-age의 단위는 초(s) 이고 setTimeout은 밀리초(ms)이므로 10초 후에 name=yong 이라는 쿠키는 사라진다. (여기서는 일부러 11000밀리초(11초)로 설정해보았음)

expires=GMT(그리니치 평균시)

new Date 객체에는 다양한 형태로 시간을 반환하는 메서드가 많다. 그 중 그리니치 평균시(GMT)를 반환하는 메서드도 가지고 있는데, 이를 이용해서 쿠키에 시간제한을 걸 수도 있다. 

const date = new Date();
date.setDate(date.getDate() + 1);

document.cookie = `name=yong; expires=${date.toGMTString()}`;

개발자도구(F12) → Application 탭 → cookie 를 확인해보면

쿠키 expires

현재 시간은 2022년 4월 4일 23시 45분이다. 그리니치 평균시이므로 위 이미지에서 +9 시간을 해주면 정확히 24시간 뒤라는 것을 알 수 있고, 24시간 뒤 이 쿠키는 만료된다.

[1-3] 쿠키 주의사항

1. HTTP Request 시 헤더에 쿠키를 포함하기 때문에 리퀘스트 크기가 커질 수 있다.

2. 쿠키 사이즈에 제한이 있다.

3. 여러가지 보안 취약점이 많다.

 

[2] 로컬 스토리지

​HTML5가 나올 때 쯤 등장했다. key - value 형태로 로컬에 저장함. 도메인 기반으로 생성된다. 여러탭 내에서 공유된다. 직접 삭제하거나 스토리지로 가서 직접 날리지 않는 한 삭제되지 않는다.

로컬 스토리지와 세션 스토리지의 차이

거의 비슷하다. 하지만 로컬 스토리지는 창을 닫아도 유지하지만 세션 스토리지는 창을 닫으면 없어진다.

 

🔗 참고 포스팅

제로초님의 블로그 <로컬스토리지, 세션스토리지 그리고 쿠키>

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

 

---

💡 모듈에 대한 TIL

모듈에 대해서는 저번에 혼자 공부한 적이 있었다. 그런데 이번에 데브코스에서 모듈에 대한 내용이 나오면서 배운 점, 다시 복기한 것들이 있었음.

export default

컴포넌트 같은 것들, 해당 파일 내에서 하나만 사용되는 클래스들은 export default로 내보내는 것이 더 낫다. 사용하는 쪽에서 편하게 사용할 수 있음.

모듈 관리용 index 파일

디렉토리 구조를 분리했을 때는, 디렉토리 별로 index 파일을 두고 그곳에서 * (아스테리스크)로 가져와서 모듈관리를 하는 것이 더 낫다.

모듈화를 하면 무엇이 좋은지?

1. 모듈 시스템을 사용하지 않았을 때, 스크립트를 여러개 넣고 순서를 신경써야한다. 이런 일을 안해도 됨.

2. 사용되거나 사용되지 않는 스크립트를 추적할 수 있다.

3. 전역이 오염되지 않는다.

 

예전 글 참고)

https://ryong9rrr.tistory.com/8

[JS] 자바스크립트 모듈 시스템 이해하기

 

---

💡 오늘의 회고 (1주차 미션에 대한 피드백을 받으면서)

오늘 1주차 미션에 대한 피드백을 받고 코드를 다시 리팩터링 해보았다. 솔직히 처음에 미션 코드를 제출했을 때, 나는 진짜 내가 코드를 잘 짠줄 알았다... (아는만큼 보이는 법) 하지만 멘토님들, 그리고 동료들의 피드백을 받으면서 내가 부족한 점이 무엇인지 그제서야 보였고, 더 객관적으로 내 코드를 바라볼 수 있었다. 이것이 코드리뷰의 힘인가...? 코드를 다시 리팩터링하고 나니, 리팩터링 전 코드가 얼마나 뜯어고칠 것이 많았는지 깨달았다. 내 공부는 끝 없이 우매한 봉우리와 절망의 계곡을 왔다갔다 하는 것 같다... 추후 다시 나를 돌아봤을때, 이 순간이 깨달음의 오르막을 올라타고 있는 순간이었기를 소망한다 🙏