TIL

## 2020 05 25 여덟번째 TIL

CREDD 2020. 5. 26. 01:08

25일 til을 올리고 있지만 지금은 26일이고..

{(24일 til을 올리고 있지만 지금은 25일이고 나는 죽을맛이다)

(23일 til을 올리고 있지만 지금은 24일이고 나는 죽을맛이다의 데자뷰)}의 데자뷰

 

아침부터 끙끙대고 일정 끝난 후에 카페가서 더 해도 안되던게

결국 집에 와서 풀렸다.

준비는 다 돠어 있었는데, 코드간의 조합을 못했다.

이걸 하는게 리얼 프로겠지

페어분이 코드 짜는 동안 아무것도 못했다. 이런게 실력차인가 싶기도 하고.. 

이게 내 코드가 아니라는 생각과 함께 내가 건드렸다가 괜히 더 꼬일까봐 건드리질 못했다.

그래도.. 남이 코드 적는 모습을 보는 것이(나와 생각이 다른 것이) 도움이 된다고 생각한다.

실제로 오늘 문제를 해결하는 것에도 많은 도움이 됐다.

 

#### 오늘 한 일

- 트위틀러 기능 구현
        1) forEach를 활용해서 이름을 클릭 할 때마다 함수가 실행되게 구현했다.

        2) 각 트윗별로 ${}를 활용해 input.value값을 id로 줬다.div id = ${input.value}

        3) 받아온 id와 부모태그.firstChild(결국 '.name')의innerText를 비교해 같지 않으면

        4) 값이 다른 것들의 style을 "none"으로 돌렸다.

        5) 위와 같은 내용의 함수를 트윗을 생성할 때마다, 리프레시 할 때마다 실행하게 한 번 더 적어줬다.

        

   트윗마다 다른 id 할당 > id와 클릭 시 input.value비교 > 다르면 display none

 

//필터
function filterName(){
    document.querySelectorAll('.name').forEach(function(value) {value.onclick=function(){       //이름 클릭시 등록 트윗의 id 가져오기
        let idValue = value.id;
        console.log (idValue)
        for(let i = 0; i<document.querySelectorAll('.left').length; i++){                      //for문으로 트윗의 부모 태그 접근
            if(document.querySelectorAll('.left')[i].firstElementChild.innerText !== idValue){ //부모태그의 첫번째 자식의 inner텍스트가 아이디랑 일치하지 않으면
            document.querySelectorAll('.left')[i].style.display = "none";                      //디스플레이 none설정
            }
        }
    }
    })
}
////////////////////////////////////////////////////////////////////////////////////////////////////

지금 보니 몇 줄도 안되는 코드지만..오늘 하루의 고생이 다 담겨 있다. 초기화를 해서 다시 재생성을 할까, html비교를 어떻게 해야될까, 아이디를 할까말까 ,함수는 어떻게 쓰고 ,forEach는 겁나 어렵고 등등 모든 고민이 다 들어가 있다. 사실 페어분이 먼저 해결을 하고 기뻐하시길래 너무 부러웠지만 완성 후의 기분은 나도 똑같았다. 이 맛에 프로그래밍 하지 라는 페어분의 말에 100%공감한다.


#### 오늘 느낀 점
ㄴ filter기능 구현 > 금요일날 빨리 끝났다고 여유 부릴 것이 아니었다... 리얼 헬 게이트가 열렸다.

ㄴ forEach 메소드를 활용하는 것이 좀 부족했다. 이해를 하고 넘어왔어야 했는데.. 많이 헤맸다.

ㄴ 하다보면 풀리게 되어 있다. 검색도 좀 하고, 조금 더 다른 방식으로 생각해보자


#### 오늘 하려고 한 일
- til 쓰기(빼먹지 않기) o

- 같은 이름의 유저가 올린 트윗들 필터링 하는 기능 구현 o

- 페어 하면서 배운거 제대로 기록하고, 일정 후에 구현해보기 o



#### 내일 할 일
- til 쓰기(빼먹지 않기)

- underbar 과제 포기하지 않기

- 혹시 부족하면 일정 끝난 후 오늘 처럼 또 하기