📅 TIL #25

👉 트위틀러 끝!

트위틀러 목업을 완성하고 이제 실제로 트윗이 추가가 되고, 새로고침 버튼을 구현하였다.

그리고 닉네임을 클릭하면 원하는 트위터만 볼 수 있게 필터링하는 과정까지 구현하였다!!

지금은 코드가 정리가 완벽하게 되지가 않아서 올리지 않았지만, 리팩토링이 끝나면 올릴 예정이다!!

그리고 localStorage 를 사용해서 인간친화적이게 실시간으로 (ex.1분 전) 나타내려고 했지만 결국 실패했다…

삽질 과정만 3시간이 넘게..(그 당시 시각 새벽1시..) 했지만.. 결국 수포로 돌아갔고..

나의 최종 선택은 moment.js 를 사용할 수 밖에 없었던 것이다 ㅠㅠㅠ

물론 이전에 알았던 것도 아니고 자바스크립트 시간관련해서 찾다가 알게 되었다!! (이렇게 좋은게 있었다니!)

하지만 이 스프린트 과정에서 원하는건 localStorage로 함수 계산까지 다해서 구현하는 것이였을 것이다.

내 능력 밖이 라는 것을 참 늦게도 깨달았다.. 진짜 하고 싶어서 집요하게 해보려고 삽질 정말 많이 했는데ㅜㅜ

시간이 너무 부족해서 포기하고 말았다. 하지만 내겐 주말이 있다!! 과제제출은 끝났지만 주말에 시간을 내서 다시 도전해봐야겠다!!

👉 오늘 새로 배운 것!!

flex-flow

flex-direction: row;
flex-direction: wrap;

//이렇게 하면 한 번에 쓸 수 있다!
flex-flow: row wrap

hasChildNodes

node.hasChildNodes() 란?

현재 노드에게 자식 노드(child nodes)가 있는지를 Boolean 값으로 반환한다!!

:point_down: 실제 사용 예제 :point_down:

let removeList = document.querySelector("#main");

while(removeList.hasChildNodes()) {
    removeList.removeChild.(removeList.firstChild);
}

// 이런식으로 자식노드들을 전부 제거해주었다.

moment.js

자바스크립트에서 시간에 대해 다루게 된다면 moment.js 만한 건 아직 없는 것 같다…

나중에 혹시나 또 사용해야 되는 날이 올 것 같아서 설치 방법만 적어두려고 한다.

먼저

// node.js가 설치 되어있는 지 확인, 없으면 쉽게 설치 가능
node - v;

// moment 설치
npm install moment

그리고 다른 블로그를 보면 import moment from "moment" 나, "const moment = require("moment")" 를 추가해주라고 한다.

근데 난 이상하게 오히려 추가하면 작동이 안되고, 그냥 moment().seconds() 이런식으로 바로 moment 메소드를 사용해주면 구현이 되었다. (무슨 일인지….)

마무리..

어제 트위틀러 스프린트를 하고 오늘까지 마무리한다고.. 어제 새벽 4시30분까지 하고 말았다.. 프리코스 과정을

진행하면서 이렇게 페이스 조절을 못한 적이 없었는데 어제는 욕심이 과했던 걸까 ㅜㅜ 구현이 안되기 전까진 자기가 싫었다….

그래도 결국 오늘 마무리를 해서 다행이다!! 내일 주말에 리팩토링을 조금만 다시 해볼 예정이다!

👊 내일의 TIW(today I Will)

트위틀러 함수