- 과제단계
지난주 금요일 (12/18) css와 html을 이용하여 twittler 의 목업을 만들었다.
이번주동안 고차함수와 알고리즘, DOM에 대해 배웠다.
크리스마스 이브인 오늘은 js까지 활용하여 작동하게 만드는 단계이다.
과제를 진행하는 게 기대되기도 했지만, 내가 css 쪽이 약해서 잘 소화할 수 있을까 걱정됐다.
- 오전일정
오전에 진행한 유효성검사관련 솔로과제가 도움이 많이 됐다.
처음에는 진짜 와.. 뭐부터 건들여야 하지 하다가, 트위틀러 목업 기억을 더듬으면서
- 와이어프레임을 짜고
- 토대로 html을 작성하고
- 샘플 css를 가져와서 연동되게 태그를 수정했다.
나를 미치게 하는 건 js .. js 코드작성 문제는 잘 풀어냈었지만 막상 무언가를 연결해서 작동되게 하려니 막막했다.
계산기과제 기억을 끄집어 내서 우선 맨위에 엘리먼트 변수를 작성하며 차근차근 거의 5시간 붙들고 있으니, 뭔가 알거같은 기분이 들었다. 그렇게 솔로 과제 시간이 끝나고, 트위틀러 과제를 진행할 시간이 왔다.
트위틀러 진행
- 내가 사용할 엘리먼트를 변수에 할당하기
document.querySelector('ul').children // li 태그 모두 가져옴
document.querySelector('li').children // user, date, content
document.createElement('li') // li 추가
...
이런식으로 내가 사용할 엘리먼트들을 변수에 저장했다. 굉장히 세밀한 작업이었다.
DOM을 활용해서 내가 가져오고 싶은 엘리먼트가 맞는지 개발자도구 콘솔창에서 확인했다.
기존에 저장되어 있는 트위터 데이터는 html 에 하드코딩으로 되어있던 걸 지우고 js에 for문으로 함수를 작성했다.
이 데이터는 다른 js파일에 있었는데 쉽게 가져와서 쓸 수 있는게 신기했다.
- 'tweet'버튼 누르면 엘리먼트 추가되는 함수 만들기.
버튼을 누르면 내용이 추가하게 만들기위해
li 태그와 자식태그들을 새로 추가하고, 내용을 넣는 방식으로 진행했다.
cloneNode() 을 통해 노드를 복제해와서 추가하게 만들었다.
원래는 class 하나하나 다 추가하고 span태그 추가하고 이렇게 해야하나 하다가, 노드복제하는 방법을 찾아냈다.
버튼을 누르니 새로운 박스가 추가되는 것을 확인했다.
- 버튼누르면 기록될 시간 가져오기.
new Date() 를 사용해서 현재시간을 가져왔다.
2020-12-24 22:23:51 이런식으로 추가할 거라 자잘한 메소드들이 많이 필요했다.
시간이 많이 들었다 ^^ 그래도 한번 정리해두면 다음에 쓸 때 편하니까. 잘 정리해둬야겠다.
- 트윗에 내용 추가하기
시간도 가져왔으니, 이제 내용이 출력되게 할 차례.
textbox 에 내용을 입력하고 트윗버튼을 누르면, 입력된 글자들을 DATA배열안에 객체로 추가되게 만들고, 추가된 객체를 새로복제한 태그들에 할당했다.
트윗버튼을 누를 때, 내가 작성한 내용이 추가되는 그 순간 너무 행복했다.
그런데 문제는.. 버튼을 한번 더 누르면 트윗이 추가되는 것이 아닌 방금 추가한 트윗이 변경이 되었다.
내가 원하는 것은 트윗버튼을 누를 때마다 트윗이 쌓이는 것이었다.
- 새로고침 되어야 하는, 엘리먼트 할당한 변수들 옮기기
트윗버튼을 누를 때마다, 내가 변경한 텍스트는 변경되는데 타임스탬프는 변동 없는 것을 발견했다.
버튼을 누를 때마다 시간이 새로고침이 안된다는 뜻이었다.
우선 시간과 관련된 변수들을 확인하고 업데이트 되게 할 방법을 고민했다.
여기서 진짜 시간소모 많이 했는데, 나는 이 과정을 이미 지났으니 간단하게 해결방법을 쓰겠다.
시간과 관련된 변수를 버튼클릭하는 함수 안에 넣었다. 그렇게 하면 버튼을 클릭할 때마다 시간이 새로고침 되었다.
이와 마찬가지로 트윗이 추가가 안되는 것도 같은 이유였다.
나는 전역변수에 엘리먼트가 추가될 부분을 할당했는데, 이렇게 하면 html을 크롬에 켜는 순간 변수값이 저장되어 어떤 이벤트가 일어나서 변동이 없다. 지역변수로 위치를 옮기면 해결이 되었다.
인상깊었던 것은 트윗버튼을 누를때마다 입력된 값은 DATA 배열에 차곡차곡 쌓이고 있었다. 하나는 작동이 잘 되고 있어서 그나마 다행이라고 생각했었다. 올바른 방향으로 가고 있다는 확신이 들었기 때문이다.
- 소감
처음 시작할 땐, 정말 막막했다. 페어가 일정이 있어서 나 혼자 진행하는 상황이었다. 나는 css, html이 정말 약하다. 한 눈에 바뀌는 점이 바로 보여서 좋다고 하는 동기들도 있는데, 나는 너무 세세하고 방대하다는 생각에 겁먹게 된다. 그래서 혼자하는 김에 천천히 다시 처음부터 복습하며 진행했다. 사실 안될 줄 알았는데, 되더라. 시간이 문제고 결국은 해낼 수 있다는 것을 깨달을 수 있었다. 역시 걱정할 시간에 코드 하나라도 더 치는 게 도움이 된다.
- ToDo
□ 필수조건들을 많이 달성했지만, 제일 어려워보이는 조건이 남았다. 닉네임을 누르면 그 닉네임이 작성한 트윗만 나오게 필터링하기. 고차함수배우면서 filter, reduce, map 를 열심히 공부했는데, 잘 활용할 수 있을까! 오늘 일정은 마무리 되서 다음주 월요일에 페어랑 함께 진행할 계획이다.
□ 타임스탬프가 1의자리숫자일때 한글자만 출력되는 것을 확인했다.
24:21:0 이런식으로 나온다. 24:21:00 으로 나올 수 있게 구현해야겠다.
□ 트윗버튼을 누르면 textbox에 있던 글자가 초기화되게 구현해야겠다. 트윗 버튼을 눌러도 textbox에 글자가 남아있어서 다른 내용을 작성하려면 수동으로 지워야하는 번거로움이 있다.
아무튼 오늘은 여기까지. 다음주에 트위틀러 관련 마지막 후기글을 작성하러 오겠다.
