느낀점 위주입니다.
- 엘리먼트 변수들을 충분히 많이 만들었는데, 하다보니 또 만들어야 했다.
함수를 먼저 만들 것인지, 엘리먼드 변수들을 먼저 만들 것인지 고민하게 됐다.
약간 닭이 먼저인지 알이 먼저인지와 비슷하다는 느낌이 들었지만,
경험을 쌓으면서 어떤 것이 더 나은지 판단 할 수 있을 것이라고 생각한다.
- 첫단추를 잘 끼워야한다.
처음 기본으로 받은 데이터 배열이 최신날짜순으로 있었다.
DATA = [최근날짜요소 , ... ,오래된날짜 요소]
이걸 아무생각없이 li 태그들에 배치했다.
<li> 최근날짜요소
<li> ..
<li> ..
<li> ..
<li> 오래된날짜요소
그리고 나는 새로운 트윗이 추가될때마다 아래배열처럼 넣었다.
DATA = [최근날짜요소 , ... ,오래된날짜 요소, 새트윗1, 새트윗2]
그리고 li태그는 prepend 를 이용해여 맨 위 li 에 위치하게 했다.
<li> 새트윗2
<li> 새트윗1
<li> 최근날짜요소
<li> ..
<li> ..
<li> ..
<li> 오래된날짜요소
유저닉네임을 눌렀을 때 해당 유저트윗만 필터해서 볼수있게 설정하고.
check new tweet 버튼을 누르면 모든 트윗을 볼수있게 되돌아올때 문제가 발생했다.
해당버튼을 누르면, 나는 태그들의 textcontent들을 다 지우고, DATA에 객체들이 저장되어 있으니까
순서대로 배열하려고 했다. 하지만.. 뒤죽박죽 되어버린 배열들을 보며 경악했다.
숫자로 쉽게 정리하자면
DATA = [5, 4, 3, 2, 1, 6, 7, ...] 이런 식이었다.
그걸 li 태그들 순서대로 배열하려니 .. 트윗 순서가 뒤죽박죽 되는게 당연했다.
DATA 값을 쓰고있는 함수들이 많아서, 도저히 DATA 배열순서를 바꿀 자신이 나지 않았다.
해결방법으로, 얕은 복사를 이용해서 check new tweet 버튼을 누를때 사용하는 배열을 새로 만들었다.
사실 배열순서는 신경쓰지 않았다. 필터를 하고 나서야 순서의 중요성을 깨닫게 되었다.
다음부터는 배열순서까지도 내 의지를 넣어야겠다고 생각했다.
- 막힐 땐 강의내용 한번 더 보기
유저닉네임을 누르면 해당 유저트윗만 보이게 만드는 기능 구현할 때, 또 다시 벽에 가로막혔다.
처음에는 버튼을 만들고 테두리를 없애고 텍스트만 넣어서, 버튼이지만 버튼처럼 보이지 않고, 버튼기능을 하게 만들어야 하나 했다. 그러나 버튼을 따로 설정하지 않아도 해당 텍스트부분을 클릭하면 이벤트가 일어나게 연결하면 되는 것이어서 간단하게 처리할 수 있었다.
문제는 닉네임들마다 누르면 그 닉네임을 필터링하는 함수를 연결되게 해야 하는데, 그게 정말 힘겨웠다. 우선 유저이름 한개로만 연습을 했다. 해당 태그를 가져와서 함수를 연결해서 필터하게 만들었다. 그런데 두번째 닉네임, 세번째 닉네임, ... 등 다른 닉네임도 누르면 해당 함수로 연결하는 방법이 생각나지 않았다.
엘리먼트 하나하나 가져와서 변수선언을 하려니, 새 트윗이 늘어나면 닉네임도 늘어나는데 저절로 엘리먼트변수를 늘어나는 방법은 너무 복잡하다고 판단했다. 엘리먼트 하나하나를 가져와서 하나의 버튼처럼 작동하게 할 수 있을까 등등 많은 생각을 떠올렸지만, 쓸만해보이는 생각은 없었다.
많은 시행착오를 겪으면서 깨달았다. 마우스를 클릭하는 지점을 가져올수만 있다면!! 해결할 수 있다는 것을.
문득 강의내용중에 카페포스기 예시가 떠올랐다. 홀린듯이 다시 그 내용을 확인했다.
그리고 예시부분에 function 함수이름(event) { console.log(event)} 부분을 발견했다. 연습겸 시도해보니 결과는 환상적이었다.
MouseEvent {isTrusted: true, screenX: 506, screenY: 457, clientX: 434, clientY: 326, …}
이런식으로 좌표가 찍혔다. 콘솔창의 화살표를 열어보니 이렇게 멋진 객체를 확인할 수 있었다.
(상략)
pageX: 434
pageY: 326
path: (7) [div.row.h50, div.col.w70, div#container, body, html, document, Window]
relatedTarget: null
(하략)
path 부분을 열어서 화살표를 누르다보면 textContent 까지 확인할 수 있다. 그 후부터는 일사천리였다.
조금 더 일찍 깨달았다면 좋았을텐데라고 생각해봤지만, 그래도 고민을 하면서 내가 진짜로 필요하다고 생각한 것과 코드스테이츠에서 준비한 내용이 딱 맞물려서, 한번더 내가 옳은 방향으로 생각하고 있구나라고 느꼈다.
- 대단한 세상에서 산다는 것을 깨달았다.
이렇게 단순한 동작을 하는 프로그램도 만들어내기가 힘든데, 내가 사용하는 카카오톡, 유튜브, 넷플릭스 등등 얼마나 복잡한 코드로 짜여져 있는걸까. 지금은 시간이 너무 없어서 다른길로 샐 시간이 없다. 하지만 나중에 개인시간이 생긴다면, 내가 자주 쓰는 프로그램 위주로 클론코딩을 해보고싶다.
