201228_TIL

🍎 오늘 한 것

---

✔️ twittler - 랜덤 데이터 불러오기
Math.random()을 이용하면 난수를 생성할 수 있고, Math.random() * (max - min)) + min 으로 난수 생성 범위를 지정할 수 있으며, Math.floor로 그 범위를 정수로 지정할 수 있었다. 이렇게 만든 난수를 배열의 인덱스로 사용해서, 기존의 데이터 배열에서 랜덤 데이터를 추출해 불러오도록 만들었다.

✔️ twittler - 좋아요, 싫어요 버튼 추가
새로 업로드되는 게시물에 있는 버튼은 클래스명이 겹쳐 작동하지 않는 문제가 있었다. 어제부터 여러 시도를 해보다가 결국 selectorAll과 반복문을 사용해 해결했다. selectorAll은 선택된 요소들을 배열 형태로 반환해주기 때문에, 반복문을 사용하면 차례대로 인덱스를 이용해 접근할 수 있다. 이 부분에서 가장 많이 헤매서 꼭 따로 정리해둬야겠다ㅠㅠ

✔️ twittler - 사용자 친화적으로 날짜 표시
moment.js 중 fromNow() 메서드를 이용해서 날짜 표시 형식을 'a few minutes ago'와 같은 형태로, 좀 더 사용자가 보기 편하게 표현하도록 바꿨다.

✔️ twittler - localStorage
Local Storage를 이용해 새로고침 버튼을 누르거나 브라우저를 종료해도 기존에 추가했던 데이터들이 유지되도록 만들었다. 로컬 스토리지는 앞으로도 자주 보게될 것 같아 블로깅 해두었다.

 

🍎 기억할 것

---

✔️ event.preventDefault
event.preventDefaults는 이벤트의 전파는 막지 않고, 이벤트를 취소한다. 예를 들어 a, submit 태그는 클릭 시 특정 링크로 이동하거나, 창이 새로고침되는데, preventDefault를 이용하면 이런 이벤트를 막을 수 있게 된다. 다시 말해 a 태그를 눌러도 링크로 이동하지 않고, 제출 버튼을 눌러도 submit은 작동하지만, 창이 새로고침 되어 실행되지는 않는다.

✔️ 쿠키, 세션
로컬 스토리지에 대해서 공부하보니 좀 더 큰 개념인 웹 스토리지에 대해 알게 되었고, 로컬 외에도 세션 스토리지가 있다는 것을 알게 되었다. 세션에 대해 좀 더 검색하다보니 쿠키와 세션에 대해서도 알 수 있었다. 쿠키는 ID나 방문 사이트를 저장할 때 많이 들어봐서 좀 더 익숙한 개념이었다. 세션은 방문자가 '웹서버에 접속해 있는 상태'를 말한다. 즉 일정 시간동안 브일우저에 접속해 있는 상태를 한 단위로 보고 그 상태를 유지시키는 기술이다. (서버에 저장됨) 반면, 쿠키는 웹 사이트를 방문 했을 때 만들어지는 정보를 담는 파일이다. (컴퓨터 메모리에 저장됨)

 

🍎 더 공부할 것

---

✔️ moment.js 한글 언어팩 추가
시간 표시를 '2 years ago' 처럼 얼마나 시간이 흘렀는지로 표시하도록 했는데, '몇 초 전', '2년 전'과  같이 한글로 표시하고 싶어졌다. 찾아보니 패키지와 코드를 좀 더 추가해야 한다고 해서, 이 부분도 추가로 바꿔보려고 한다.

✔️ stopPropagation
오늘 배운 event.preventDefault와 비슷하지만, 이 함수는 부모 태그로 이벤트를 전파하는 것을 막아준다고 한다. 

 

 

✏️ 연말이라 들떠서 그런건지 감기기운 때문인지 자꾸 늘어지고 나태해진다.. 복습할 내용도 점점 많아지고 더 알아보고 싶은 것도 쌓여가는데 내일부터는 다시 맘 잡고 진짜 제대로 해야겠다  그리고 좀 더 일찍 일어나서 하루에 최소 30분은 운동이랑 독서에 써야지. 균형을 맞춰서 생활하자❕