[VanillaJS] 고양이 사진첩 만들기

❗❗  데브코스 29일차 (09.09)

 

오늘 다룰 주제는

 "고양이 사진첩 만들기" 이다.

 

구현 요구사항

• 고양이 API를 통해 사진과 폴더를 렌더링 한다.
• 폴더를 클릭하면 내부 폴더의 사진과 폴더가 보여진다.
  • 현재 위치한 폴더의 경로도 렌더링 해준다.
• 루트 경로를 제외한, 나머지 경로에서 뒤로가기 버튼 추가
• 이미지 클릭하면 모달창으로 이미지 보여줌
  • esc를 누르거나 이미지 밖을 클릭하면 모달창 닫기
• API 로딩시 로딩 중임을 알리는 처리를 해준다.

 

✅ Modal 창 이벤트

예전에 과제테스트를 한번 경험삼아 본 적이 있었다. 요구 사항 중 하나가

이미지 클릭시 Modal 창으로 표현하고, 이미지 밖을 클릭하면 해당 모달창을 닫는 요구사항이었다.

그 당시에는 어떻게 구현해야할지 감이 안와서 그냥 지나쳤다. 하지만 이번 기회에 해당 이벤트 로직을 배울 수 있었다.

 

기본 로직은 다음과 같다.

1. 이미지 클릭시, 이미지 컴포넌트에 state값 변경(클릭한 이미지의 url)
2. state값이 변경됨에 따라 이미지 컴포넌트의 render가 실행된다.
3. render에서는 state값의 여부에 따라 컴포넌트를 화면에 보여줄지 정한다. (style.display 옵션으로 "block" or "none")
4. display값이 block로 표현되면서 화면에 보여진다.
5. 모달창을 닫기 위해서는 이미지 영역밖에 클릭시(이미지 컴포넌트의 class 값으로 판별) state값을 초기화 한다. 그러면 2,3번의 과정에 따라 diplay값이 none으로 표현되면서 화면에서 사라진다.

이미지컴포넌트 태그.addEventListener("click", (e) => {
    if (e.target.className === "지정한 img class태그이름") {
      닫는 이벤트 처리
    }
  });

+ key event에 따른 이미지 닫는 처리

 window.addEventListener("keyup", (e) => {
    if (e.key === "Escape") {
      닫는 이벤트 처리
    }
  });

 

📖 학습한 내용

• VanillaJS
  • 고양이 사진첩 만들기