[TIL] 2021.11.15

오늘 한 일

• FLEX 속성 복습 및 레이아웃 구현
• 데일리 영어 스피킹 공부하기
• 인터랙티브 웹 개발 강의 듣기
  • 자바스크립트 이벤트의 기본 동작 및 위임 방법
  • 클릭 이벤트를 활용한 예제 웹 페이지 구현해 보기

결과물

• 클릭 이벤트 연습 예제 (1) (Page 바로가기)
  • 움직이는 캐릭터 마우스 클릭 시 삭제 기능 구현
    

    <script>
        (function () {
            // 이벤트 위임
            const stage = document.querySelector('.stage');

            function clickHandler(e) {
                if (e.target.classList.contains('ilbuni')) {
                    // console.log(e.target)
                    stage.removeChild(e.target);
                }
            }
            stage.addEventListener('click', clickHandler);
        })();
    </script>

• 클릭 이벤트 연습 예제 (2) (Page 바로가기)
  • 마우스 클릭 시, 문이 열리면서 캐릭터 이동하는 기능 구현
  • 다른 문 클릭 시 기존에 열려있는 문 닫히게 기능 구현
  • 문 외 다른 곳 클릭 시 기존에 열려있는 문 닫히게 기능 구현

  <script>
        (function() {
            const stageElem = document.querySelector('.stage')
            //  현재 활성화된 아이템을 저장
            let currentItem = null;

            // 활성화
            function activate(elem) {
                elem.classList.add('door-opened');
                currentItem = elem;
            }

            // 비활성화
            function inactivate(elem) {
                elem.classList.remove('door-opened')                
            }


            function doorHandler(e) {
                const targetElem = e.target;

                if (currentItem) {
                    inactivate(currentItem);
                }

                if (targetElem.classList.contains('door-body')) {
                    activate(targetElem.parentNode);
                }
            }

            stageElem.addEventListener('click', doorHandler);            
        })();
    </script>

출처: https://inf.run/VYT9

오늘 느낀 것

• 스스로 부족한 점을 되돌아 보고 빠르게 실력을 키우고 싶어
  무턱대고 강의를 3개나 결제했더니, 진짜 하루가 바쁘게 지나간다.

  그래도 새로운 강의를 들으면서 기존에 배웠던 내용도 리마인드할 수 있었고,
  css와 JavaScript를 활용해 여러 기능들도 구현해 보니, 재미있게 공부할 수 있었다.

  아직은 강의를 보면서 따라 하는 수준이지만, 나중에 프로젝트를 진행할 때 적용하고,
  또, 스스로 분석도 해볼 수 있도록 다양한 JavaScript 예제 문제를 많이 풀어볼 것이다.

내일 할 일

• 프론트엔드 스쿨 12일차 수업 듣기
• 데일리 영어 스피킹 공부하기
• 인터랙티브 웹 개발 강의 듣기