데브매칭 연습 - 고양이 사진 검색 사이트

🔗 고양이 사진 검색 사이트

 

 

 

이번 문제는 처음부터 구현하는 것이 아니라

구현이 일부 되어있는 것을 수정하고 기능을 추가하는 문제였다.

 

class 문법이 나와서 조금 당황했다..ㅎ 게다가 무려 4시간!!

 

수정하는 것이다 보니 따로 local vscode에서 하지 않고

온라인 vscode에서 진행하려고 했는데 이번엔 온라인 vscode에서 cors가 떴다...

 

보통 제공해 주는 테스트 환경에서는 cors가 안뜰 것이라고 예상했는데

이미 테스트 시작은 누른 상태라 포트를 잘못 타고 들어갔나.. 이것저것 시도해 보다가

안되길래 코드를 전부 vscode로 옮기고 어제 설치한 Allow CORS 확장 프로그램을 실행시키니

로컬에서나마 작동을 시킬 수 있었다...

 

초반에 시간을 좀 썼지만 부랴부랴 과제를 마치고 팀원들한테 물어보니

팀원들은 정상적으로 되었다고 한다 @.@ 왜 나만 ㅠ_ㅠ?!!

 

필수 구현 사항은 몇개 없어서 다 했지만 추가 구현 부분은 6개정도를 구현하지 못했다ㅜ

흠 초반에 시간을 뺏기지 않았더라도 1~2개정도밖에 더 구현 못했을 것 같다. 

 

 

💡 알게된 점

 

1. 다크모드

다크모드를 지원하는 서비스를 구현해본 적은 없었는데 문제로 나와서 검색해서 풀었다!

@media (prefers-color-scheme: dark) {
  body {
    color: #ffffff;
    background-color: #000000;
  }
}

이렇게 지정해서 할 수 있는거는 알고 있었지만

직접 작성을 해본 것은 처음이었는데 과제에서는 아주 간단하게 구현했찌만

다음에 다크모드 지원하는 서비스를 만들어보고 싶는 생각이 들었다,,

 

 

2. Image loading attribute

 

문제 중에 image에 lazy loading을 적용하라는 이야기가 있었는데

왠지 오래걸릴 것 같아서 다른 구현사항으로 넘어갔는데 

<img src="URL" loading="lazy">

팀원 코드를 보니 img태그에 lazy 속성이 저렇게 직접적으로 있었다니?

이전에 접했었는데 까먹은건지 나는 뭔가 처음 보는 듯 했다.

 

 

3. 슬라이드 배너

랜덤으로 고양이 사진을 보여주는 배너 섹션을 추가하는게 있었는데

이것도 오래 걸릴 것 같아서 다음 구현사항으로 넘어갔다가 시간이 없어서 못 풀었었는데

팀원 코드를 참고해서 다시 구현해보니 생각보다 간단했다.

 

  render() {
    const sliceList = this.randomList.slice(this.bannerIndex, this.bannerIndex + this.SLICE_COUNT);

    this.$banner.innerHTML = `
      <button class="left-button"><</button>
      <ul>
      ${sliceList.map((cat) => `<li><img src="${cat.url}"></li>`).join('')}
      </ul>
      <button class="right-button">></button>
    `;
  }

  setEvent() {
    this.$banner.addEventListener('click', (e) => {
      if (e.target.className === 'left-button') {
        let nextIndex = this.bannerIndex - this.SLICE_COUNT;

        if (nextIndex < 0) {
          nextIndex = this.randomList.length - this.SLICE_COUNT;
        }

        this.setBannerIndex(nextIndex);
      }

      if (e.target.className === 'right-button') {
        let nextIndex = this.bannerIndex + this.SLICE_COUNT;

        if (nextIndex > this.randomList.length - 1) {
          nextIndex = 0;
        }

        this.setBannerIndex(nextIndex);
      }
    });

 

4. 모달 fadeIn/fadeOut

처음에 transition으로 어떻게 해보려 했는데

display none;처리하는 부분이생각처럼 잘 안되어서 (지금 생각해보면 당연함..ㅎ)

다음 구현 사항으로 넘어갔다가 못 푼 부분이었다.😅

다시 구현해보니 애초에 animation으로 했으면 금방 풀었을 듯 하다.

.ImageInfo {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.ImageInfo.fadeIn {
  animation: fade-in 0.5s;
}

.ImageInfo.fadeOut {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
    visibility: hidden;
  }
}


// ImageInfo.js

  render() {
    if (this.data.visible) {
      const { name, url, temperament, origin } = this.data.catData;

      this.$imageInfo.innerHTML = `
      /* 생략 */
      `;

      this.$imageInfo.style.display = 'block';
      this.$imageInfo.classList.add('fadeIn');
      this.$imageInfo.classList.remove('fadeOut');
    } else {
      this.$imageInfo.classList.add('fadeOut');
      this.$imageInfo.classList.remove('fadeIn');
    }
  }