🍒What I did today(오늘 한 일)
✅좋아요, 싫어요 버튼 추가하기
게시물들에 좋아요, 싫어요 버튼을 추가하고, alert를 이용해 안내 창까지 구현했다.
HTML, CSS 까지 비슷한 코드들을 보면서 만들었고, Javascript를 통해 새 게시물이 등록될 때마다 버튼이 함께 생성되고, 게시물의 데이터 객체에도 좋아요 개수, 싫어요 개수를 세는 속성을 추가하는 것 까지 만들었다.
너무 만들어보고 싶었던 기능이다. 나중에는 좋아요, 싫어요가 아닌 인스타그램처럼 하트를 누르는 기능처럼 구현해보고 싶다.
✅랜덤 데이터 불러오기
Math.random()으로 난수를 생성하는 것이 가능하고, Math.random() * (max - min)) + min 으로 난수 생성 범위를 지정할 수 있고, Math.floor를 사용해 그 범위를 정수로 지정할 수도 있다. 이렇게 만든 난수를 배열의 인덱스로 사용해 기존의 데이터 배열에서 랜덤 데이터를 추출해 보고 불러오도록 사용해보았다.
Math.floor( 변수명 * 4 ) // 0부터 3까지의 정수 난수를 만든다! (예제)
🍒Remember(기억할 것)
자바스크립트에서 날짜 형식의 데이터를 파싱, 유효성 체크, 조작, 화면에 출력을 쉽게 할 수 있도록 도와주는 라이브러리이다.
코드에 date 메서드를 사용하고 싶기도 했지만, 시간 및 날짜를 알려주는 라이브러리를 사용해서 만들어보고 싶었다.
사용방법은 간단했다. 홈페이지에 들어가면 여러가지 방식으로 쓰는 코드들이 있다. 참고하면 좋다.
let now = new Date(); // 현재 시간 가져오기
created_at : moment(new Date()).format('YYYY-MM-DD hh:mm:ss); // 시간 표현 형식 변경
CSS 및 아이콘 이미지 등을 얻을 수 있는 좋은 홈페이지라고 하셔서 기억해두고, 나중에 사용해보면 좋을 것 같아서 메모했다. SCSS뿐 아니라 CSS까지 제공하고, JS와 폰트, 아이콘까지 모두 제공한다고 들었다.
✅String.prototype.padstart()
이 메서드는 오늘 Sprint review를 하면서 나온 내용인데 알고 있으면 좋다고 하셔서 메모했다.
현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용된다고 한다.
다음에 사용하게 될 수 있으면 좋겠다. 기억만 해두자! 링크는 위에 걸어두도록!
✅쿠키? 세션?
로컬 스토리지에 대해서 공부하다보니 쿠키와 세션이 정확히 무슨 개념인지 나중에 정리해봐야겠다.
회원가입 만들기를 하다보면 나오거나 생각할 수밖에 없는 개념이라고 생각한다.
쿠기는 ID나 방문 사이트를 저장할 때 사용하는 개념 비슷한 것 같고, 세션은 방문자가 '웹서버에 접속해 있는 상태'를 말한다. 즉 서버에서는 클라이언트를 구분하기 위해 세션 ID를 부여하며 웹 브라우저가 서버에 접속해서 브라우저를 종료할 때까지 인증상태를 유지시키는 기술이다. (서버에 저장) 쿠기는? 웹사이트를 방문 했을 때 만들어지는 정보를 담는 파일 (컴퓨터 메모리에 저장된다.)
나중에 더 알아보고 정리해보자😂
2021-02-05
Twittler 를 결국 다 만들었고, 트위터 클론 코딩이랑 비슷하게 최대한 만들어 봤다.
너무 이쁘고 좋았다. 특히 좋아요랑 싫어요는 진짜 신기하다. 다음에도 이런 기회가 있으면 또 만들어봐야지😄
그리고 Sprint review 에서 진짜 너무 잘 만든 twittler발표를 보면서 만들어보고 싶은 기능들이 있었는데
hover를 이용해 transform : rotate 하는거랑 Enter 칠때마다 textarea 늘어가는 것이랑 모달기능, 검색기능! 까지만ㅋㅋ
조금 더 있는데 다 기억하고 있다가 사용해보고싶다⚡