78일차_20201130

Twittler 구현을 마쳤다.

와이어프레임-목업 구현을 기반으로 여럿 기능을 추가했다

 

1. DOM을 이용해 객체 배열 데이터베이스 기반 트윗 작성

2. Random tweet 작성

3. ID 클릭시 해당 ID가 작성한 Tweet 만 필터링해 display

4. 3의 상태에서 go back 버튼 클릭시 원래대로 회귀

5. ID, Comment 창에 아무 입력이 없을 시 ID, Comment를 입력하라는 글귀 alert하는 유효성 검사 삽입

6. Comment가 50자를 넘어갈 시 입력 불가한 유효성 검사 삽입

 

Twittler 를 작성하며 제일 관건이 되는 부분은 아무래도 DOM의 활용이었다.

브라우저에서 작성되는 항목들을 바로 대입하여 함수가 진행되어야 하다 보니 상황에 따라 필요한 element의 콘텐트를 뽑아내는 데 한참 애를 먹었다.

제일 크게 와닿았던 것은 querySelector 와 getElementById, getElementsByClassName 의 엄밀함의 차이이다.

querySelector를 사용했을 때 내가 원하는 엘리먼트를 찾아오려면 일단 겹치지 않는 엘리먼트를 만들기 위해 ID를 남발하게 되고 그렇게 가져온다고 하더라도 CSS를 위치의 기준으로 삼기 때문에 ID나 Class가 바뀌었을 때 해당 엘리먼트를 똑같은 방법으로 찾기 어려웠다.

그런 상황에서 불변의 Class 혹은 ID를 가진 부모 엘리먼트에서 getElementById('ID').children[i] 이런 식으로 인덱스를 정의해 놓는 것이 클래스와 아이디에 구애받지 않고 해당 엘리먼트를 불러오는 데 훨씬 효과적이라고 생각한다.

invalid 조건이 많이 필요했던 해당 프로젝트의 경우 저것 때문에 계속해서 반복되는 null 의 바다에서 허우적거리며 버린 시간만 몇시간이다..

하지만 한번에 많은 항목의 CSS를 수정하는 데에는 querySelectorAll이 훨씬 효과적이라고 생각한다. 정리하면 특정 상황에서 하나의 엘리먼트에만 적용해야 하는 조건일 때에는 getElementById, getElementsByClassName을 사용하고 복수의 엘리먼트에 적용해야 할 때는 querySelectorAll을 사용하는게 효율적이라는 생각이다.

결론적으로 엘리먼트에 변화를 주고자 할 때 어떤 방법을 선택해야 효율적인지 알게 되었고 CSS의 Class/ID를 이용하여 유효성을 검사하는 방법, content의 변화로 display의 변화를 동반하는 방법을 제대로 배우게 된 것 같다.

 

이제 당면한 과제는 반복되는 코드들을 함수에 담아 똑같은 상황이 반복될 때 함수만 호출하여 코드의 길이를 줄이는 것이다..

 

아주 간단한 것 같은데 나는 익숙하지가 않다. 오히려 하드코딩하듯 줄줄이 다 써버리는 게 차라리 마음이 편하다.

아직은 코린이라는 반증이라고 생각한다.

 

더불어 주석의 중요성과 ctrl+s의 중요성.. 몇번 강조해도 지나치지 않다.