2021년 4월 26일 코드스테이츠 DAY-22 (Twittler 목업 modal 실패 사례와 해결 사례 및 버튼 이벤트 추가, ipad 반응형 추가 )

2021년 4월 25일 코드스테이츠(Twittler 목업 modal update) 미해결

어제 자면서도 이것을 해결하지 못해서 악몽을 꿨다. 

 

주말동안 완결을 못냈다는 뭔가모를 패배감이 있었지만 그래도 해냈다. ㅠㅠㅠㅠㅠ

 

일단 먼저 결과를 보자. 

 

 

 

MODAL 

 

모달을 총 3가지 방식으로 도전을 했었는데

 

• 첫번째는 document.querySelector('ul')로 화면에 있는 ul을 다 잡을 수 있다는 착각에 빠져 한참을 진행했었으나 fail
• 두번째에는 이벤트위임으로 모달창을 띄우는 것 까지는 성공했고, 삭제하기 위한 함수를 따로만들었으나 거기에 document상에 없는 모달창을 querySelector로 잡아왔더니(모달창은 내가 comment창을 눌러야만 생성되는 거였기에) 없는 것을 이벤트핸들러로 넣었다고 새빨간 에러가 발생했었으므로 fail.
• 마지막으로 그렇다면 모달창을 새로 만들지 말고 기존 있는 comment창을 변형시켜 보는 건 어떨까라는 아이디어를 잡아서 전개하였더니 success.

딱 하고나서는 엄청난 성취감이 느껴져서 happyhappy였으나 곧 다른 욕심이 나기 시작했다.

 

조금 더 역동적으로 움직이는 모달창을 만들고 싶다는 것.

 

처음 등장할때의 그 애니메이션이 너무 이상하지 않은가!

 

이제 없어지게하는 원리를 알았으니 이것을 적용시켜 조금 더 예쁘게 만드는 것을 손놓지말고 틈틈히 고민해보자. 

 

버튼 이벤트 추가

 

어렵기 보다는 약간의 번거로운 작업이었다. 

 

createElement와 prepend/appendchild/append 그리고 classList.add 이 세가지의 연속이었다. 

 

하지만 이 기능을 구현해보는 동안 prepend/appendchild/append의 차이점을 알았고 이를 기능에 적용 시켰다.

 

코드를 보자

 

function tweetHandler(){
    if(editorYourName !== '' && editorYourContent !== ''){
        twitBtn.disabled = false;
        const getCommentAreaUl = document.createElement('ul');
        commentContainer.prepend(getCommentAreaUl); //commentContainer가 전역에 변수로 선언되어 있음.
        getCommentAreaUl.classList.add('comment-area');
        const getCommentLi = document.createElement('li');
        getCommentAreaUl.append(getCommentLi);
        getCommentLi.classList.add('comment');

        const getUserNameDiv = document.createElement('div');
        getCommentLi.appendChild(getUserNameDiv);
        getUserNameDiv.classList.add('username');
        getUserNameDiv.textContent = editorYourName.textContent;

        const getContentDiv = document.createElement('div');
        getCommentLi.appendChild(getContentDiv);
        getContentDiv.classList.add('content');
        getContentDiv.textContent = editorYourContent.textContent;

        const getBelowContentDiv = document.createElement('div');
        getCommentLi.appendChild(getBelowContentDiv);
        getBelowContentDiv.classList.add('below-content');
        getBelowContentDiv.textContent = new Date();
    }else{
        twitBtn.disabled = true;
    }
}

twitBtn.addEventListener('click', tweetHandler);

쓰고나니 너무 난잡해서 이 코드를 줄일 수 있는 방법이 있을까를 고민하게 된다. 

 

얼마전 유튜브 영상에서 고차함수 관련하여 코드를 줄이는 방법을 봤었는데

 

여기에 적용할 수 있을까라는 궁금증이 생긴다.

 

반응형 추가

 

시간이 넉넉하지 않아 ipad 크기까지(크롬기준 width : 1024px)까지만 작게 수정을 해보았다. 

 

창을 많이 왔다갔다하며 조금씩 뭐가 더 안정감이 있는지 많이 보는게 포인트인 것 같다. 

 

앞으로 스마트폰의 크기로 줄었을때, 메뉴를 없애고 hamburger를 넣어서

 

메뉴바가 나오는 interaction 또한 추가해보고 싶다.

 

 

느낀점 

 

Twittler 목업을 코드스테이츠에서 정해준 기준 이상으로 업데이트를 하며 음...

 

일단은 내가 자발적으로 하는 부분이라서 그런지 아니면

 

interaction에 흥미를 많이 가지고 있어서인지는 모르겠지만 재밌다!

 

그리고 나는 이론만 집어넣으면 잘 적용이 안되는데

 

뭔가를 만들면서 공부하니까 다방면으로 도움이 되는 것 같다.

 

하나를 만들면 또 다른게 더 필요하겠다라는 생각이 들어서 살짝 힘들지만

 

그래도 조금씩 조금씩 구색을 갖추는 것 같아서 마음이 좋다.  

 

앞으로도 계속 업데이트를 하겠다!