[TIL] 영화 API 협업 시 생겼던 오류 해결 내용 (css 적용 관련)

1. 탭 버튼을 클릭하면 해당 탭으로 이동하며 화면이 바뀌는 기능 구현 하면서/
   조원분이 만드셨던 폴더에서 작업을 진행하던 중 내 개인 폴더에서는 작동하던 html, js 파일이 제대로 작동하지 않았다.
   특별한 오류 내용도 나오지 않고 답답하던 중 알아보니 모두 함께 공유하는 css 파일에서 특정 태그들에 이렇게 display: block; 을 해놓으면 태그에 어떤 스타일을 주던지 상관없이 화면에 다 보여지게 한다는 의미다.

            ```
            // css
            ~~
            footer,
            header,
            hgroup,
            menu,
            section,
            nav {
              display: block;
            }
            ~~

            ```

          <section id="tabSection2" class="tabSection" hidden > // <- 이 부분
            <swiper-container>
              <div #swiperRef="" class="swiper mySwiper">
                <h4 class="slideTitle">장르별 top 10</h4>
                <button class="more slideMore">more</button>
                <div id="section2" class="swiper-wrapper">
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-scrollbar"></div>
              </div>
            </swiper-container>
          </section>

위 코드를 보면 section 태그에 hidden 이라는 속성을 줬는데 css 에서 기본 셋팅으로 display: block 을 해놓으니 태그에 무슨 속성을 줘도 계속 숨겨지지 않고 다 보여졌던 것이다.
그래서 display: block 적용됬던 태그 중 section 을 제거하니 각 탭 이동시 선택한 탭 외의 탭 화면들은 보이지 않게 적용이 잘 되었다. 해결!!

2. 팀원께서 swiper을 활용해 버튼을 누르면 화면이 오른쪽으로 넘어가는 슬라이드 기능 구현한 부분에 api 에서 가져온 데이터를 가져와 넣으려고 했는데 옆으로 넘기는 버튼이 작동하지 않았다. 확인해보니 js 나 html 파일에는 문제가 없었다.
   알고보니 swiper 에서 제공하는 기능은 거기에 맞는 클래스 같은게 이미 적용되어 있고 그 클래스를 사용해야 원하는 기능을 쓸 수 있었나보다.
   그래서 기존에 insertAdjacentHTML 문법으로 넣으려고 했던 html 탬플릿의 클래스 값을 swiper에서 주는 양식에 맞게 사용했더니 잘 적용이 되었다.

      let movieList = `
      <div class="swiper-slide">
      <div class="slideCard" id = ${id}>
        <img class="poster" src="https://image.tmdb.org/t/p/w300${src}" alt="" / >
        <h5 class="title">${title}</h5>
        <span class="avg">평점 ${vote_average}</span>
        <span class="releasDate">${release_date}</span>
      </div>
    </div>
            `
      document
        .querySelector('#section3')
        .insertAdjacentHTML('beforeend', movieList)

프론트를 만들면서 어려운 오류를 만날거라 생각하지 않았는데
미쳐 생각하지도 못한 부분에서 자잘한 오류를 만났고 해결하는데도 꽤 시간이 걸렸다.
앞으로 작업하면서 해당 항목에 적용되는 css, class 등을 잘 확인해야겠다.