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

Intro

---

오늘은 드디어! 최종 모의테스트를 풀었다.

시간이 너무 짧았다. 2시간 짜리는 아닌 것 같은데.. 2시간이 주어졌다. 금요일(19일)에 풀어야 하는 테스트가 진짜인 것 같다.

아무튼, 해설 강의를 들으며 따라하다가 막상 혼자 하려니 뭐부터 시작하면 좋을까 고민을 많이 했다.

시간이 부족해 다 풀진 못했지만 못 푼 거 다시 풀어보고 복습해야겠다.

 

 

 

오늘 학습한 내용

: 모의테스트

---

<< 모의테스트 푼 문제들 >>

HTML, CSS 관련

✅ 현재 HTML 코드가 전체적으로 <div> 로만 이루어져 있습니다. 이 마크업을 시맨틱한 방법으로 변경해야 합니다.

 

 

검색창과 검색 결과창은 section으로 구분했고 class name을 주었다.

검색 결과 리스트는 ul-li 태그로 변경했다.

---

✅ 유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.
992px 이하: 3개 / 768px 이하: 2개 / 576px 이하: 1개

@media screen and (max-width: 992px) {
  .SearchResult {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .SearchResult {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}

@media screen and (max-width: 576px) {
  .SearchResult {
    grid-template-columns: repeat(1, minmax(250px, 1fr));
  }
}

 

미디어 쿼리 사용법은 익숙치 않아서 매번 검색해서 찾아본다.

외워야겠다. @media screen...

 

 

 

이미지 상세 보기 모달 관련

✅ 디바이스 가로 길이가 768px 이하인 경우, 모달의 가로 길이를 디바이스 가로 길이만큼 늘려야 합니다.

@media screen and (max-width: 768px) {
  .SearchResult {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }

  .ImageInfo .content-wrapper {
    width: 100%
  }
}

 

이 문제도 미디어쿼리 문제

max-width: 768px일 경우 처리하는 부분에 width: 100%를 추가해 가로 길이만큼 늘리는 스타일을 적용했다.

 

---

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

this.$imageInfo.addEventListener("click", e => {
  if(e.target.className === "ImageInfo" || e.target.className === "close") this.setState({
      visible: false,
      image: null
    })
  })

document.addEventListener("keydown", e => {
  if(e.key === 'Escape') this.setState({
    visible: false,
    image: null
  })
})

 

해설 강의 들으면서 공부한 부분이어서 수월하게 해결했다.

콜백함수가 같아서 이 부분은 함수로 뺐어도 좋을 것 같다.

 

---

✅ 모달에서 고양이의 성격, 태생 정보를 렌더링합니다. 해당 정보는 /cats/:id 를 통해 불러와야 합니다.

• api.js

export const api = {
  ...
  fetchCatInfo: async id => {
    const result = fetchData(`${API_ENDPOINT}/api/cats/${id}`)
    return result
  },
  ...
}

 

• SearchResult.js

...

this.$searchResult.querySelectorAll(".item").forEach(($item, index) => {
  $item.addEventListener("click", async () => {
    const catInfo = (await api.fetchCatInfo(this.data[index].id)).data
    this.onClick(catInfo);
  });

  ...

});

 

• App.js

import { api } from './api.js'

...

this.searchResult = new SearchResult({
  $target,
  initialData: this.data,
  onClick: image => {
    this.imageInfo.setState({
      visible: true,
      image
    });
  }
});

...

 

api.js에서 id로 조회하는 API를 생성하고 SearchResult에서 고양이 이미지를 클릭했을 경우 App에서 받은 onClick함수를 실행한다.

처음엔 SearchResult에서 api를 호출하려 했는데 App에 imgaeInfo를 수정해줘야하니 App에서 호출하는 게 좋은 것 같았다.

 

 

 

 

검색 페이지 관련

✅ 페이지 진입 시 포커스가 input에 가도록 처리하고, 키워드를 입력한 상태에서 input을 클릭할 시에는 기존에 입력되어 있던 키워드가 삭제되도록 만들어야 합니다.

 

• SearchInput.js

class SearchInput {
  constructor({ $target, onSearch, onRandomSearch }) {
    ...
    
    // input 클릭 시 기존 입력된 키워드 삭제
    this.$searchInput.addEventListener("click", e => {
      e.target.value = ''
    })
    
    this.render()
  }

  render() {
    // 페이지 진입 시 포커스
    this.$searchInput.focus()
  }
}

export default SearchInput

 

강의를 다 안들어서 그런가.. 해설 강의에서 안풀어 본 문제들이 있어서 풀어봤다.

포커스를 어떻게 줄지 고민하다가 구글링으로 focus()를 사용하면 된다는 것을 알게되었다.

페이지가 렌더될 때 포커스를 주도록 구현하면 될 것 같아서 render()함수에 구현했다.

 

input클릭 시 기존 입력한 내용을 삭제하기 위해 input click이벤트에 e.target.value를 초기화 해 주었다.

 

 

---

✅ SearchInput 옆에 버튼을 하나 배치하고, 이 버튼을 클릭할 시 /api/cats/random50을 호출하여 화면에 뿌리는 기능을 추가합니다. 버튼의 이름은 마음대로 정합니다.

 

• api.js

import { RESULT_STATUS, API_ENDPOINT } from './config.js'

const fetchData = async url => {
  try {
    const result = (await fetch(url))
    if(result.status === 200) return result.json()
    else throw new Error(RESULT_STATUS[result.status])
  } catch(e) {
    alert(e)
  }
}

export const api = {

  ...
  
  fetchRandomCats: async () => {
    const result = fetchData(`${API_ENDPOINT}/api/cats/random50`)
    return result
  },
  
  ...
  
}

 

• App.js

...

this.searchInput = new SearchInput({
  $target,
  
  ...
  
  onRandomSearch: async () => {
    const data = (await api.fetchRandomCats()).data
    this.setState(data)
  }
});

...

 

• SearchInput.js

class SearchInput {
  constructor({ $target, onSearch, onRandomSearch }) {
    const $wrapper = document.createElement("section")
    $wrapper.className = "input-wrapper"
    
    ...

    const $randomBtn = document.createElement("button")
    this.$randomBtn = $randomBtn
    this.$randomBtn.className = "RandomButton"
    this.$randomBtn.textContent = "랜덤고양이|"
    $wrapper.appendChild(this.$randomBtn)

    this.$randomBtn.addEventListener("click", () => {
      onRandomSearch()
    })

    ...
  }

  ...
  
}

export default SearchInput

 

api 호출 관련 문제를 풀어보면서 알게된 건 App.js에서 api를 요청하고 응답 받은 데이터들을 클래스 컴포넌트에게 전달해주는 식으로 구현하는 게 코드가 직관적이고 데이터를 효율적으로 관리할 수 있는 것 같다.

 

 

 

---

✅ 검색 결과 각 아이템에 마우스 오버시 고양이 이름을 노출합니다.

• SearchResult.js

...

this.$searchResult.querySelectorAll(".item").forEach(($item, index) => {

  ...
  
  $item.addEventListener("mouseover", () => {
    const $catName = $item.querySelector(".catName")
      $catName.style.display = "block"
  })

  $item.addEventListener("mouseout", () => {
    const $catName = $item.querySelector(".catName")
    $catName.style.display = "none"
  })
});

 

이것도 해설 강의에서 못 본 문제

마우스 오버, 마우스 아웃 이벤트로 고양이 이름을 display block -> none으로 변경하는 코드를 작성했다.

고양이 이름을 어떻게 띄워야 할지 UI상 고민이 많은 문제였다.

시간이 부족해서 완성도 있게 구현은 못헀다.

• style.css

.SearchResult .catName {
  display: none;
  position: relative;
  top: -100px;
  z-index: 1;
  background-color: lightgray;
}

 

position: relative를 이용해서 이미지 위에 올려보았는데 만족스럽진 않다.

좀 더 고민해서 다시 구현해봐야겠다.

 

 

 

코드 구조 관련

✅ ES6 module 형태로 코드를 변경합니다.

 

• index.html

<script type="module" src="src/main.js"></script>

 

 

---

✅ API fetch 코드를 async, await문을 이용하여 수정해주세요.
해당 코드들은 에러가 났을 경우를 대비해서 적절히 처리가 되어있어야 합니다.

• api.js

import { RESULT_STATUS, API_ENDPOINT } from './config.js'

const fetchData = async url => {
  try {
    const result = (await fetch(url))
    if(result.status === 200) return result.json()
    else throw new Error(RESULT_STATUS[result.status])
  } catch(e) {
    alert(e)
  }
}

export const api = {
  fetchCats: async keyword => {
    const result = fetchData(`${API_ENDPOINT}/api/cats/search?q=${keyword}`)
    return result
  },
  fetchCatInfo: async id => {
    const result = fetchData(`${API_ENDPOINT}/api/cats/${id}`)
    return result
  },
  fetchRandomCats: async () => {
    const result = fetchData(`${API_ENDPOINT}/api/cats/random50`)
    return result
  }
}

 

async, await문을 이용해 수정한 코드

 

• config.js

export const API_ENDPOINT =
  "https://q9d70f82kd.execute-api.ap-northeast-2.amazonaws.com/dev";

export const RESULT_STATUS = {
  500: 'Server Error',
  400: 'Bad Request',
  401: 'Unauthorized',
  404: 'page not found'
}

 

상수는 config.js 파일로 분리

HTTP 상태코드별로 에러 메시지를 분리해 보았다.

 

 

 

 

마무리

---

미처 다 풀지 못한 문제들도 차근차근 고민해보며 해결해봐야겠다.

일단 강의부터... 다시 열심히 들어야지