[TIL🔥] Day24(9/9)

김다슬·2021년 9월 10일

KDT TIL grepp 고양이 사진첩 데브코스 바닐라js 프로그래머스 프론트엔드

Today I Learned

목록 보기

20/22

Introduction

이번주는 계속해서 채용 과제 위주로 강의를 듣고 실습을 진행 중이다.
오늘은 프로그래머스에 올려져있는 프론트엔드 과제인 고양이 사진첩을 구현해보았다. 어언 이번년도 4월쯤 처음 알고리즘 공부하고 html, css 공부하면서 저 문제를 봤었는데 그때 당시에는 아예 도전도 못했었다.
내가 저걸 풀 수 있는 미래가 언제쯤 올까라는 생각을 했는데 이제는 바닐라 JS를 이용해 구현하는 자체가 재미있다. 그리고 두려움도 어느정도 사라지게 되었다.
알고리즘도 꾸준히 풀고 과제도 계속 접해보며 익숙해져야겠다~~😆

오늘 새롭게 배운 것

고양이 사진첩 구현하기
- Element.classList
- 키보드 이벤트

오늘은 구현하면서 새롭게 배운 방법들과 문법들에 대해 간단히 정리해보고자한다.

Element.classList

클래스의 속성값 전체를 바꾸는 것이 아니라 개별 클래스를 조작하고 싶을 때 사용
element.className은 클래스 문자열 전체를 바꾸기 때문에, 클래스 하나만 추가, 제거 하고 싶은 경우 사용

<body class="main page">
  <script>
    for (let name of document.body.classList) {
      alert(name); // main과 page가 출력됨
    }
  </script>
</body>

classList의 메서드

add : class를 추가
remove : class를 제거
toggle : class가 존재할 경우 제거, 그렇지 않은 경우 추가
contains : class의 존재 여부에 따라 true/false 반환

여기서 주의할 점은 element.classList의 type은 Object이기 때문에 배열 메서드를 쓸 경우 Array.from을 이용해 변환 후 사용해야한다.

키보드 이벤트

사용자가 키를 누르거나 놓을 때 발생하는 이벤트
키를 누를 때는 keydown, 키를 놓을 때는 keyup
element.key를 통해 특정 키를 누르거나 놓을 때 동작하도록 구현 가능

키보드 이벤트 예시

아래와 같이 키보드 이벤트를 통해 ESC를 누를 경우 모달 창이 닫히거나, Backspace키를 누를 경우 뒤로가기 처리 등을 구현할 수 있다.

window.addEventListener('keyup', (e) => {
    // 누른 키가 ESC인 경우 함수 호출
    if (e.key === 'Escape') {
      // 함수 구현 
    }
  });

window.addEventListener('keyup', (e) => {
    // 누른 키가 Backspace인 경우 함수 호출
    if (e.key === 'Backspace') {
      // 함수 구현 
    }
  });

Comment

점점 구현할 수 있는 것이 많아져서 기분이 좋다. 그날 배운 것을 그날 정리하고 복습할 수 있도록 TIL을 꾸준히 써야겠다.
강의를 들을 때는 이해가 가지 않던 부분도 혼자 검색으로 찾아보며 정리할 때 이해가 가는 경우가 많다. 리스트로 만들어두고 시간 날 때마다 찾아봐야겠다.
한 달째 24시간이 부족한 경험 중이다ㅎㅎ 언제쯤 많은 것을 배워 시간을 효율적으로 쓸 수 있는 날이 올까...
그 날을 기다려본다 🤔