[클라우딩 어플리케이션 엔지니어링 TIL] 240118 - 고양이 사진 검색 실습 2

Intro

---

강의가 밀리니까 부담이 크다...

과제를 먼저 풀어볼까 했는데 생각보다 복잡해서 해설 강의를 듣고 복습차 과제를 풀어보려 한다.

오늘은 이벤트 핸들러로 모달 제어하는 것과 로컬 스토리지 저장하고 불러오기, 다음 페이지 api 요청하기를 실습했다.

 

 

 

오늘 학습한 내용

: 모달제어, 로컬스토리지, 스크롤다음페이지

---

 

👩‍💻 모달 창 제어
이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC 키를 누르거나 / 모달 우측의 닫기(x) 버튼을 누르면 닫히도록 수정해야 합니다.

 

 

닫기 버튼 클릭 || 모달 영역 밖 클릭 시 모달 창 닫기

this.$imageInfo.addEventListener('click', (e) => {
  if (e.target.className === 'ImageInfo' || e.target.className === 'close') this.closeImageInfo();
});

 

event.target으로 어떤 요소를 클릭했는지 확인한다.

모달 창 바깥 영역은 className이 ImageInfo인 div 요소이므로 className이 ImageInfo인 요소를 클릭했을 경우와 또는 close라는 클래스 네임을 가지고 있는 버튼 요소를 클릭했을 경우에 창을 닫는 이벤트를 작성하면 된다.

 

 

키보드의 ESC 키를 눌러 모달창 닫기

: Escape 키가 눌렸다는 이벤트가 감지되었을 때, 동작을 실행하는 코드를 작성해야 한다.

KeyboardEvent로 해결할 수 있다. KeyboardEvent의 유형으로는 keypress, keyup, keydown이 있다.

 

keypress, keyup, keydown 차이

⚠️ keypress는 더 이상 권장되지 않는 기능이다. 사용하지 말 것

 

keypress는 문자 값을 생성하는 키를 누르면 이벤트가 시작된다. 그러나, 한글 입력 시에는 정상 동작하지 않는 문제가 있다. 그리고 Escape 입력도 받을 수 없는 단점이 있다.

keydown은 키를 누를 때 이벤트가 시작된다. keypress와 동작하는 게 같지만 문자 값 생성 여부에 관계 없이 모든 키에 대해 이벤트가 시작되는 차이점이 있다.

반대로, keyup은 키를 놓을 때 발생하는 이벤트이다.

 

다음은 esc 키를 눌렀을 때, 이벤트를 발생시키고자 할 때 생성하는 코드 예시이다.

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') this.closeImageInfo();
});

 

e.key를 통해 어떤 키가 눌렸는 지 파악하고 조건문을 사용해 컨트롤할 수 있다.

 

keyboardEvent 인스턴스 속성

• KeyboardEvent.code

이벤트가 나타내는 물리적 키의 코드 값을 문자열로 반환

ex) KeyA, KeyB, Digit1, Digit2, Backquote, Backspace, Enter, ControlLeft...

 

• KeyboardEvent.key

이벤트가 나타내는 키의 키 값을 나타내는 문자열을 반환

ex) a, b, 1, 2, `, Backspace, Enter, Control...

 

 

 

 

---

👩‍💻 로컬스토리지 다루기
최근 검색한 키워드를 SearchInput 아래에 표시되도록 만들고, 해당 영역에 표시된 특정 키워드를 누르면 그 키워드로 검색이 일어나도록 만듭니다. 단, 가장 최근에 검색한 5개의 키워드만 노출되도록 합니다.
페이지를 새로고침해도 마지막 검색 결과 화면이 유지되도록 처리합니다.

 

localStorage

로컬 스토리지(localStorage)를 통해 로컬 저장소에 접근할 수 있다. 로컬 스토리지는 페이지나 브라우저를 닫아도 내용을 기억하는 저장소를 의미한다.

sessionStorage와 비슷하나 세션 스토리지는 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라지는 점이 다르다.

 

로컬 스토리지는 key / value 형태로 저장되며, value는 항상 문자열이다.

따라서 배열이나 객체를 저장할 경우엔 JSON 파싱하거나 split을 통해 문자열을 배열로 바꾸는 과정이 필요하다.

• 로컬 스토리지 값 추가하기

localStorage.setItem('lastResult', JSON.stringify(result))

• 로컬 스토리지 값 읽어오기

JSON.parse(localStorage.getItem('lastResult'))

• 로컬 스토리지 값 삭제하기

localStorage.removeItem('lastResult')

 

 

 

 

 

---

👩‍💻 스크롤 & 다음 페이지 로딩
검색 결과 화면에서 유저가 브라우저 스크롤 바를 끝까지 이동시켰을 경우, 그 다음 페이지를 로딩하도록 만들어야 합니다.
과제 API 명세에 page에 대한 내용이 없습니다. 아래처럼 작업을 해주세요- /cats/search?page=1, /cats/search?page=2처럼 엔드포인트에 page라는 파라미터를 추가해 주세요- 1페이지는 파라미터를 붙일 필요 없습니다.- page 파라미터를 제어하는 상태를 추가하여 작성해 보세요.

 

getBoundingClientRect()

: 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환한다.

top, bottom, left, right 값을 뽑아낼 수 있다.

데이터 양이 많아지면 계속 값을 반환하기 때문에 메모리 누수 원인이 될 수 있다.

 

IntersectionObserver

선택한 요소와 뷰포트를 관찰해 해당 요소가 화면에 보이는 지 안보이는 지 판단하는 기능을 제공한다.

원하는 이미지가 보일 경우 (마지막 요소 이미지) 다음 페이지를 로딩하는 동작을 구현하면 스크롤 바를 끝까지 이동시켰을 경우, 그 다음 페이지를 로딩하도록 만들 수 있다.

if (item.isIntersecting) {
  let dataIndex = Number(item.target.dataset.index);
  // 마지막 요소인지 체크
  if (dataIndex === this.data.length - 1) {
    this.onNextPage();
  }
}

 

 

lazy loading

이미지가 로딩되기 전에 더미 이미지를 통해 화면 요소들을 배치한 후, 로딩이 완료된 후에 더미 이미지를 로딩된 이미지로 바꾸면 UI가 자연스러워진다.

`<li class="item" data-index=${idx}>
  <img src="https://via.placeholder.com/200x300" data-src=${cat.url}  alt=${cat.name} />
</li>`

 

요소의 dataset 기능을 활용한다.

img의 src 속성을 처음에 더미 데이터로 넣고 로딩이 완료된 후 dataset의 src를 불러와 img의 src 속성 값으로 변경해주면 된다.

const $img = item.target.querySelector('img');
$img.src = $img.dataset.src;

 

 

 

 

 

마무리

---

오늘 배운 내용들은 실제 개발에서 자주 보이고 쓰이는 코드들을 학습한 것 같아서 유익했다.

과연 내가 혼자 짠다고 하면 잘 할 수 있을까? 아직 과제를 안풀어봐서 모르겠다. ㅎㅎ 점점 코드가 많아지니 헷갈리는 부분도 많이 생긴다.

복습이 꼭 필요한 부분인 것 같다.

강의가 약간 밀려있는데 복습도 하려면... 주말에도 열심히 들어서 이번 주 강의는 다 끝낼 수 있도록 해야겠다.