🔗 레퍼런스

https://www.wavve.com/

✅  구현 사항

1. 한 눈에 데이터 3개 노출하기 (swiper-slide)

2. 버튼으로 슬라이드 동작 구현하기 (swipe-button-next / swipe-button-prev)

html

<!-- 슬라이드 영역 -->
            <div id="main-banner" class="swiper-container banner">
                <div class="main01-nav">

                    <!-- bullet -->
                    <div class="swiper-pagination swiper-pagination-bullets">
                        <span class="swiper-pagination-bullet"></span>
                        <span class="swiper-pagination-bullet"></span>
                        <span class="swiper-pagination-bullet"></span>
                        <span class="swiper-pagination-bullet"></span>
                        <span class="swiper-pagination-bullet"></span>
                    </div>

                    <!-- prev, next -->
                    <button class="swiper-button-next"></button>
                    <button class="swiper-button-prev"></button>
            
                </div>

                <div class="swiper-wrapper-banner">

                    <div class="swiper-slide">
                        <div class="slide-txt">
                            <h1>제목</h1>
                            <p>아웃라인 텍스트</p>
                            <p>텍스트</p>
                        </div>
                        <img src="assets/main5.png" alt="banner">
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-txt">
                            <h1>제목</h1>
                            <p>아웃라인 텍스트</p>
                            <p>텍스트</p>
                        </div>
                        <img src="assets/main1.png" alt="banner">
                    </div>

                    <div class="swiper-slide">
                        <div class="slide-txt">
                            <h1>제목</h1>
                            <p>아웃라인 텍스트</p>
                            <p>텍스트</p>
                        </div>
                        <img src="assets/main2.png" alt="banner">
                    </div>

                    <div class="swiper-slide">
                        <div class="slide-txt">
                            <h1>제목</h1>
                            <p>아웃라인 텍스트</p>
                            <p>텍스트</p>
                        </div>
                        <img src="assets/main3.png" alt="banner">
                    </div>

                    <div class="swiper-slide">
                        <div class="slide-txt">
                            <h1>제목</h1>
                            <p>아웃라인 텍스트</p>
                            <p>텍스트</p>
                        </div>
                        <img src="assets/main4.png" alt="banner">
                    </div>

                    <div class="swiper-slide">
                        <div class="slide-txt">
                            <h1>제목</h1>
                            <p>아웃라인 텍스트</p>
                            <p>텍스트</p>
                        </div>
                        <img src="assets/main5.png" alt="banner">
                    </div>

                    <div class="swiper-slide">
                        <div class="slide-txt">
                            <h1>제목</h1>
                            <p>아웃라인 텍스트</p>
                            <p>텍스트</p>
                        </div>
                        <img src="assets/main1.png" alt="banner">
                    </div>
                </div>
            </div>

아직 슬라이드 안 텍스트들은 데이터 값을 받아온 상태가 아니라서 임의로 만들어놓았다. 캐러셀은 항상 api를 가져와서 사용했었는데 막상 직접 만드려고하니 머리가 띵했다.. 근데 어떻게.. 해야지.. 상단 구조를 잡아놓고 시작

swiper-container / banner : 최상위 클래스로 캐러셀의 전체 구조
swiper-wrapper-banner : 캐러셀 슬라이드의 전체 구조
swiper-slide : 캐러셀 이미지를 설정
swipe-button-prev / swipe-button-next : 캐러셀 사이드 버튼 설정

css

/* 슬라이드 */
.banner { 
    width: 100%;
    overflow: hidden;
    margin: 0 auto 80px;
    position: relative;
    min-width: 1250px;
    max-width: 3840px;
    min-height: 555px;
  }
  
  .banner .main01-nav {
    display: table;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}
  
  .banner .main01-nav button[class^="btn"] {
    display: table-cell;
    width: 34px;
    height: 34px;
    vertical-align: middle;
  }
 

  .banner .swiper-pagination { /* pagination */
    display: table-cell;
    position: static;
    width: auto;
    font-size: 0;
    vertical-align: middle;
  }
  
  .swiper-pagination {
    position: absolute;
    text-align: center;
    transition: opacity 0.3s;
    z-index: 10;
  }
  

  .banner .swiper-button-prev {
    right: 500px;
    background-image: url(../assets/prev.png);
  }
  
  .banner .swiper-button-next,
  .banner .swiper-button-prev {
    position: absolute;
    top: -300px;
    z-index: 20;
    background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    background-color: transparent;
    background-size: 100px auto;
    font-size: 0;
  }
  
  .swiper-button-next,
  .swiper-button-prev {
    position: absolute;
    top: 50%;
    z-index: 50;
    cursor: pointer;
    background-position: 50%;
    background-repeat: no-repeat;
  }
  
  .banner .swiper-button-next {
    left: 500px;
    background-image: url(../assets/next.png);
  }

우선 슬라이드에 pagination 슬라이드 이미지 가운데 배치 시키고 backgroun-image로 이전/다음 버튼을 넣어주었다. 

.swiper-slide > img {
    width: 100%;
  }
  
  .swiper-wrapper-banner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    box-sizing: content-box;
    transition: 0.3s ease-in-out;
  }
  
  .banner .swiper-slide {
    float: left;
    position: relative;
    overflow: hidden;
    width: 1250px;
    padding: 0 10px;
    border-radius: 12px;
  }
  
  .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
  }


  .slide-txt{
    position: absolute;
    top:75%;
    left: 15%;
    transform: translate(-15%, -50%);
    color:#fff;
    font-size: 40px;
    line-height: 1.5em;
    font-weight: bolder;
  }

display : flex 로 슬라이드들을 가로로 정렬해주고 슬라이드의 가로 사이즈는 1250px로 맞춰주었다. 슬라이드마다 텍스트를 띄우기 위해 slide-txt가 들어가 있는 swiper-slide에 position:relative를 주고 왼쪽 아래 배치해 주었다.

Javascript

const sliderContainer = document.querySelector(".swiper-container");
const sliderWrapper = sliderContainer.querySelector(".swiper-wrapper-banner");
const slides = sliderWrapper.querySelectorAll(".swiper-slide");

const prevBtn = sliderContainer.querySelector(".swiper-button-prev");
const nextBtn = sliderContainer.querySelector(".swiper-button-next");
const pagination = sliderContainer.querySelector(".swiper-pagination");

필요한 요소들을 변수에 저장해준다. .swiper-slide는 배열로 가지고 올거기때문에 querySelectorAll 로 가지고 오자!

const slideCount = slides.length;
const size = slides[0].clientWidth; 
let currentIndex = 1;

slideCount에는 swiper-slide의 길이를 저장해주고, size는 슬라이드 0번째에 있는 컨텐츠의 크기를 확인할 수 있는 변수이다. slide의 사이즈는 css에서 1250px로 정했으니 size = 1250px이다.

currentIndex는 현재 위치를 저장하기 위한 변수이고 1번째 이미지를 메인으로 하기 위해 초기값을 1로 설정했다.

function updateSliderPosition() {
    sliderWrapper.style.transform = `translateX(${-size * currentIndex + 80}px)`; 
}

메인 배너가 배치되는 위치를 조정하는 함수로 updateSliderPosition()을 만들고 위치 값으로 슬라이드 사이즈와 현재 위치에 + 80px한 값을 넣어주었다. size = 1250px / currentIndex = 1 / + 80 으로 -1170 값이 나오는데 이 값은 처음 메인에 3개의 배너가 노출이 되어야 하기때문에 사이드에도 배너가 조금 보일 수 있게 밀어준 값이라고 생각하면 된다.

개발자 도구로 보면 이렇게 transform 으로 밀려있는걸 볼 수 있다!

function goToSlide(index) {
            sliderWrapper.style.transition = "0.3s ease";
            if (index < 0) {
                currentIndex = slideCount - 1;
            } else if (index >= slideCount) {
                currentIndex = 0;
            } else {
                currentIndex = index;
            }
            console.log(index);

            updateSliderPosition();
        }

다음으로 만들어야할 건 슬라이드를 움직이게 해주는 함수! 인덱스가 범위를 벗어나는지 확인하고 어떤 슬라이드가 노출되는지 조정한다. 이미지 슬라이드의 길이(이미지 장수)보다 커지면 안되므로 슬라이드에 포함된 이미지의 개수만큼만 작동할 수 있도록 인덱스가 슬라이드의 길이보다 크면 0으로 만들도록 했다.

//슬라이드 무한루프
        sliderWrapper.addEventListener("transitionend", () => {
            // currentIndex가 마지막일 인덱스일 경우
            if (currentIndex === slides.length - 1) {
                //첫번째 인덱스로 돌아감
                currentIndex = 1;
                sliderWrapper.style.transition = "0s";
                sliderWrapper.style.transform = `translateX(${-size * currentIndex + 80}px)`;
            }
            // 첫번째 인덱스일 경우
            if (currentIndex === 0) {
                // 마지막 슬라이드 이전 슬라이드
                currentIndex = slides.length - 2;
                sliderWrapper.style.transition = "0s";
                sliderWrapper.style.transform = `translateX(${-size * currentIndex + 80}px)`;
            }
        });

이제 슬라이드가 무한으로 돌아가는 루프를 만들어보자. 슬라이드의 이미지가 마지막에 도달했을 때 인덱스를 조정하는 무한 루프 함수를 만들었다. transitionend 이벤트를 사용해서 만들어보았다

✏️ transitionend

transitionend 이벤트는 CSS transition 이 완료되면 발생한다.
transition 속성이 제거되거나 display가 none으로 설정된 경우와 같이 완료 전에 
transition이 제거된 경우에는 이벤트가 생성되지 않는다.

currentIndex가 마지막일 인덱스일 경우 슬라이드의 길이에서 -1 한 값과 현재 위치가 같다면 처음 인덱스로 돌아가도록한다. 이때 transition을 0s로 해서 아무런 애니메이션 효과가 없도록한다. 

첫번째 인덱스일 경우 마지막 슬라이드가 첫번째의 이전 슬라이드가 되도록 슬라이드 길이에서 -2를 해준다. 

nextBtn.addEventListener("click", () => goToSlide(currentIndex + 1));
prevBtn.addEventListener("click", () => goToSlide(currentIndex - 1));

마지막으로 다음 버튼과 이전버튼에 이벤트 리스너를 달면 완성이다. 중간에 막히긴 했는데 첫번째 슬라이드 이미지 = 마지막 슬라이드 이미지를 넣고 마지막 슬라이드 이미지 = 첫번째 슬라이드 이미지를 넣으니까 해결 완료.. 마지막에 갔다가 다시 맨 처음으로 후리리릭 가는게 싫어서 참고사이트를 보고 한 꼼수다 후후.. 왜 이렇게 다들 잘할까.. 난..? 내일은 배너에 실제 api 데이터를 가지고 와야하는데 나 잘할 수 있게찌..

🔗 참고사이트

https://velog.io/@wjddnjswjd12/javascript%EB%A1%9C-carousel-slide-%EA%B5%AC%ED%98%84%ED%95%B4%EB%B3%B4%EA%B8%B0

https://velog.io/@reasonz/2022.05.23-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BA%90%EB%9F%AC%EC%85%80-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0

https://ejunyang.tistory.com/entry/PP-TMDB-api-%EC%82%AC%EC%9A%A9%ED%95%B4-%EC%98%81%ED%99%94-%EB%AA%A9%EB%A1%9D-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0

✅  필수 사항

1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기

2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기

3. 영화정보 카드 리스트 UI 구현

- 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수

- 카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창을 띄우기

4. 영화 검색 UI 구현

5. Javascript 문법 요소를 이용하여 구현

- const와 let만을 이용한 변수 선언 필수

- 화살표 함수

- 배열 메소드 : 하기 예시 중 2개 이상 사용

• forEach
• map
• filter
• reduce
• find

- DOM 제어하기 : 아래 api 목록 중 2개 이상 사용하기

document.createElement(tagName) //새로운 HTML 요소를 생성합니다.
document.getElementById(id) //id 속성을 기준으로 요소를 선택합니다.
document.getElementsByTagName(name) //태그 이름을 기준으로 요소를 선택합니다.
document.getElementsByClassName(name) //클래스 이름을 기준으로 요소를 선택합니다.
document.querySelector(selector) //CSS 선택자를 이용하여 요소를 선택합니다.
document.querySelectorAll(selector) //CSS 선택자를 이용하여 모든 요소를 선택합니다.
element.innerHTML //해당 요소 내부의 HTML 코드를 변경합니다.
element.textContent //해당 요소 내부의 텍스트를 변경합니다.
element.setAttribute(attr, value) //해당 요소의 속성 값을 변경합니다.
element.getAttribute(attr) //해당 요소의 속성 값을 가져옵니다.
element.style.property //해당 요소의 스타일 값을 변경합니다.
element.appendChild(child) //해당 요소의 하위 요소로 child를 추가합니다.
element.removeChild(child) //해당 요소의 하위 요소 중 child를 삭제합니다.
element.classList.add(class) //해당 요소의 클래스에 새로운 클래스를 추가합니다.
element.classList.remove(class) //해당 요소의 클래스 중에서 특정 클래스를 제거합니다.
element.classList.toggle(class) //해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.
element.addEventListener(type, listener) //해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.
element.removeEventListener(type, listener) //해당 요소에서 등록된 함수를 제거합니다.
event.preventDefault() //이벤트가 발생했을 때 기본 동작을 취소합니다.
event.stopPropagation() //이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.
window.location.href //현재 페이지의 URL을 가져옵니다.
window.alert(message) //경고 메시지를 출력합니다.
window.confirm(message) //확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.

🔥 완성

각 영화 카드를 눌렀을 때 고유 id가 alert 뜨기도 했고, 영화 제목을 검색했을 때 해당 영화만 뜨도록 구현도 완료했다!

순수 바닐라는 너무 오랜만이고 실무에서도 제이쿼리만 쓰다보니 너무 헷갈리고 메서드도 잘 기억이 안난다

그래서 요즘은 알고리즘 문제들만 주구장창 푸는 중이다. 풀다보니 메서드 기억이 새록새록 올라와서 요즘 꽤 재미 붙이고있다.

👀 영화 검색하기

function searchMovies() {

    const mycards = document.querySelector('#mycards'); //카드 품은 wrap
    const movieCard = mycards.querySelectorAll('.col'); //카드
    const searchInput = document.querySelector('#searchInput'); //입력칸
    const searchBtn = document.querySelector("#searchBtn"); //검색버튼

}

사용자가 검색한 영화 제목이 포함되어있지 않은 카드들은 display:none; 하는 코드를 짜봤다. 우선, dom요소들을 가져오고 각 변수에 선언해준다. 검색 기능이 아예 감도 안잡힐 때 🧑🏻‍🦱은채 튜터님한테 물어봤는데 querySelector로 html 요소들을 가지고와서 작업하면 편리하다고 말씀해주셨다. 전에는 주구장창 getElementById만 써서 특정 아이디가 아니면 동작을 안해서 골머리를 썼는데.. 

function searchHandle(e){
        e.preventDefault();
        let userInput = searchInput.value;

        movieCard.forEach((el) => {
            el.classList.remove('hidden');
            let movieTitle = el.getElementsByTagName('h2')[0].innerText;
            if (!movieTitle.toLowerCase().includes(userInput)) {
                el.classList.add("hidden");
            }
        })
    }

let userInput = searchInput.value;

우선 검색 버튼을 눌렀을 때 실행하는 이벤트 핸들러를 만들어주고 userInput 변수에 사용자가 입력한 값을 할당해준다. 

movieCard.forEach((el) => {}

forEach문으로 이미 만들어진 무비 카드들에서 사용자가 입력한 값과 영화 제목이 일치하면 일치한 영화는 제외하고 나머지 카드들은 hidden 클래스는 add하면 된다.

let movieTitle = el.getElementsByTagName('h2')[0].innerText;

각 카드 안 <h2>태그의 0번째 텍스트를 movieTitle 변수에 할당해준다. 

<div class="col">
        <img src=${image} class="card-img-top" alt="포스터">
        <div class="card-body">
            <h2 class="card-title">${title}</h2>
            <p class="card-text">${overview}</p>
            <p class="card-vote">${vote}</p>
        </div>
    </div>

 카드가 위 구조로 짜여져 있다. <h2>태그는 .card-title 로 각 카드의 영화 제목을 담고있다.

if (!movieTitle.toLowerCase().includes(userInput)) {
   el.classList.add("hidden");
}

그리고 toLowerCase()로 대소문자 관계없이 값을 받을 수 있도록 하고, 사용자가 입력한 값과 영화 제목이 일치하지 않을 경우 카드를 모두 숨겨준다. hidden 클래스는 css파일에 미리 만들어두고, 간편하게 classList로 추가했다가 삭제했다. 

searchBtn.addEventListener("click", searchHandle);

마지막으로 검색 버튼에 이벤트 리스너를 붙여 클릭했을 때 위에 생성한 이벤트 핸들러가 동작하게 해주면 끝 !!

 if (movieTitle === movieTitleArr[i]) { // 배열 === 스트링 false
    document.getElementById('swipe').style = 'display:none';
    document.getElementById('title-area').style = 'display:none';
    movieArr[i].style = 'display:block';
}

처음 코드는 이렇게 짰었는데 피드백을 받고 위에 설명한 코드대로 수정했다. 이 코드는 특정 아이디 값의 html 요소에 직접적으로 style을 먹여줬다. 피드백받은 사항 중 하나였고 다시보니 코드가 그리 깨끗해 보이진 않는 것 같다.

https://ejunyang.tistory.com/entry/PP-TMDBThe-Movie-DB-api-%EC%82%AC%EC%9A%A9

✅  필수 사항

1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기

2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기

3. 영화정보 카드 리스트 UI 구현

- 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수

- 카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창을 띄우기

4. 영화 검색 UI 구현

5. Javascript 문법 요소를 이용하여 구현

- const와 let만을 이용한 변수 선언 필수

- 화살표 함수

- 배열 메소드 : 하기 예시 중 2개 이상 사용

• forEach
• map
• filter
• reduce
• find

- DOM 제어하기 : 아래 api 목록 중 2개 이상 사용하기

document.createElement(tagName) //새로운 HTML 요소를 생성합니다.
document.getElementById(id) //id 속성을 기준으로 요소를 선택합니다.
document.getElementsByTagName(name) //태그 이름을 기준으로 요소를 선택합니다.
document.getElementsByClassName(name) //클래스 이름을 기준으로 요소를 선택합니다.
document.querySelector(selector) //CSS 선택자를 이용하여 요소를 선택합니다.
document.querySelectorAll(selector) //CSS 선택자를 이용하여 모든 요소를 선택합니다.
element.innerHTML //해당 요소 내부의 HTML 코드를 변경합니다.
element.textContent //해당 요소 내부의 텍스트를 변경합니다.
element.setAttribute(attr, value) //해당 요소의 속성 값을 변경합니다.
element.getAttribute(attr) //해당 요소의 속성 값을 가져옵니다.
element.style.property //해당 요소의 스타일 값을 변경합니다.
element.appendChild(child) //해당 요소의 하위 요소로 child를 추가합니다.
element.removeChild(child) //해당 요소의 하위 요소 중 child를 삭제합니다.
element.classList.add(class) //해당 요소의 클래스에 새로운 클래스를 추가합니다.
element.classList.remove(class) //해당 요소의 클래스 중에서 특정 클래스를 제거합니다.
element.classList.toggle(class) //해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.
element.addEventListener(type, listener) //해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.
element.removeEventListener(type, listener) //해당 요소에서 등록된 함수를 제거합니다.
event.preventDefault() //이벤트가 발생했을 때 기본 동작을 취소합니다.
event.stopPropagation() //이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.
window.location.href //현재 페이지의 URL을 가져옵니다.
window.alert(message) //경고 메시지를 출력합니다.
window.confirm(message) //확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.

🦴 와이어 프레임

와이어 프레임으로 기획부터 하고 대충 어디에 뭘 가져다 놓을껀지 정해봤다

웨이브를 레퍼로 삼아서 했는데 결과물은 깔끔하게 나온 것 같다

TMDB api 페이지에 뿌리기

1. api 가져오기

패치를 실행했을 때 console창에서 results에 데이터가 저장되어있는지 확인할 수 있다.

const options = {
  method: 'GET',
  headers: {
    accept: 'application/json',
    Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5ZDE3MGZlMGJlM2UwZDE3NzkyMGE3MDQxZmQ1NGM4NiIsInN1YiI6IjY2MjVkYTMzMjIxYmE2MDE3YzE1NDQ1ZSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.tRZNYVownPtQj6yIFrodZCqJZfvFyuPxHjF_kH8JMyI'
  }
};

fetch('https://api.themoviedb.org/3/movie/popular?language=en-US&page=1', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));

2. movieList 변수에 영화 results 넣고, forEach 구문으로 순회해서 각 변수에 데이터 할당하기

// 영화 데이터 조회
fetch('https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1', options)
    .then(response => response.json())
    .then((data) => {
        let movieList = data['results'];
        const container = document.querySelector('#mycards')
        const movieArr = container.querySelectorAll('.col');

        let templete = ``; // const 하지말것, 재할당 불가
        movieList.forEach(a => {
            let image = 'https://image.tmdb.org/t/p/w500' + a['poster_path'];
            let title = a['title'];
            let overview = a['overview'];
            let vote = a['vote_average'].toFixed(1); // 소수점 1자리수까지 노출
            let movieid = a['id'];
 
 });

3. 카드 템플릿 생성

// 카드 템플릿 생성
            templete += `
            <div class="col">
            <a href=${movieid}>
                <img src=${image} class="card-img-top">
                 <div class="card-body">
                    <h2 class="card-title">${title}</h2>
                    <p class="card-text">${overview}</p>
                    <p class="card-vote">★ ${vote}</p>
                 </div>
             </a>
            </div>`;

3-1. 새로운 html 요소를 생성

(document.createElement)하고 생성한 태그에 클래스명(element.className)을 줘서 dom을 만드는 방법도 있다

const card = document.createElement('div');
            card.className = 'col';
            const img = document.createElement('img');
            img.className = 'card-img-top';
            const titleEl = document.createElement('h2');
            titleEl.className = 'card-title'
            const overviewEl = document.createElement('p');
            overviewEl.className = 'card-text';
            const voteEl = document.createElement('p');
            voteEl.className = 'card-vote';


            img.src = image;
            titleEl.innerText = title;
            overviewEl.innerText = overview;
            voteEl.innerText = vote;

            card.append(img, titleEl, overviewEl, voteEl);

            document.getElementById('mycards').append(card);

4. 만들어진 템플릿 html 에 붙여주기

document.getElementById('mycards').innerHTML = templete;

🚩 영화 검색 사이트 구현

• Javascript과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작합니다.
• 영화정보 오픈API인 TMDB(The Movie DB)를 사용합니다.
• TMDB API문서 https://developer.themoviedb.org/reference/intro/getting-started

✅  필수 사항

1. jQuery 라이브러리 사용없이 순수 바닐라 자바스크립트 사용하기

2. TMDB 오픈 API를 이용하여 인기영화 데이터 가져오기

3. 영화정보 카드 리스트 UI 구현

- 카드에는 title(제목), overview(내용 요약), poster_path(포스터 이미지 경로), vote_average(평점) 이렇게 4가지 정보가 필수

- 카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창을 띄우기

4. 영화 검색 UI 구현

5. Javascript 문법 요소를 이용하여 구현

- const와 let만을 이용한 변수 선언 필수

- 화살표 함수

- 배열 메소드 : 하기 예시 중 2개 이상 사용

• forEach
• map
• filter
• reduce
• find

- DOM 제어하기 : 아래 api 목록 중 2개 이상 사용하기

document.createElement(tagName) //새로운 HTML 요소를 생성합니다.
document.getElementById(id) //id 속성을 기준으로 요소를 선택합니다.
document.getElementsByTagName(name) //태그 이름을 기준으로 요소를 선택합니다.
document.getElementsByClassName(name) //클래스 이름을 기준으로 요소를 선택합니다.
document.querySelector(selector) //CSS 선택자를 이용하여 요소를 선택합니다.
document.querySelectorAll(selector) //CSS 선택자를 이용하여 모든 요소를 선택합니다.
element.innerHTML //해당 요소 내부의 HTML 코드를 변경합니다.
element.textContent //해당 요소 내부의 텍스트를 변경합니다.
element.setAttribute(attr, value) //해당 요소의 속성 값을 변경합니다.
element.getAttribute(attr) //해당 요소의 속성 값을 가져옵니다.
element.style.property //해당 요소의 스타일 값을 변경합니다.
element.appendChild(child) //해당 요소의 하위 요소로 child를 추가합니다.
element.removeChild(child) //해당 요소의 하위 요소 중 child를 삭제합니다.
element.classList.add(class) //해당 요소의 클래스에 새로운 클래스를 추가합니다.
element.classList.remove(class) //해당 요소의 클래스 중에서 특정 클래스를 제거합니다.
element.classList.toggle(class) //해당 요소의 클래스 중에서 특정 클래스를 추가 또는 제거합니다.
element.addEventListener(type, listener) //해당 요소에서 이벤트가 발생했을 때 호출할 함수를 등록합니다.
element.removeEventListener(type, listener) //해당 요소에서 등록된 함수를 제거합니다.
event.preventDefault() //이벤트가 발생했을 때 기본 동작을 취소합니다.
event.stopPropagation() //이벤트의 버블링을 방지하기 위해 이벤트 전파를 중지합니다.
window.location.href //현재 페이지의 URL을 가져옵니다.
window.alert(message) //경고 메시지를 출력합니다.
window.confirm(message) //확인 메시지를 출력하고 사용자의 답변에 따라 Boolean 값을 반환합니다.

TMDB api key 생성

2. pick a language 에서 javascript 선택 후 토큰 입력하기

3.  코드에 내 토큰을 적용하고 Try it! (꼭 Success 를 확인하고 내 코드로 옮겨주세요!)

+ 아차 인기 영화 데이터를 가져와야하니까 Top Rated 선택!  

🦴 와이어 프레임이란?

간단한 모양만으로 인터페이스를 시각적으로 묘사한 것이다.

와이어프레임은 페이지 요소의 구성방식, 페이지에 표시될 내용, 인터페이스의 작동 방식 을 설명하는데 사용된다.

와이어 프레임은 프로젝트 개발에서 매우 중요한 과정 중 하나이다. 어떤 레이아웃에 따라 구성할 것인지 

포함되는 주요 기능은 무엇인지 등을 최대한 단순하게 확인하고 의견을 나눌 수 있는 기준이 된다.

회사에 다닐 때는 웹 디자이너분이 피그마로 와이어 프레임 + 디자인까지 전달해주셔서 직접하는 일은 없었는데

캠프를 시작하면서 팀플 첫 작업이 와이어 프레임이었다. 나름 찾아보면서 작업했는데 매 프로젝트를 진행하면서

더 섬세하고 구체화할 수 있을 것 같다.

✅ 와이어 프레임 기본 양식

1. 타이틀

화면의 제목과 url, id를 입력한다. 그리고 버전이 달라지면 구분하기 위해 버전을 기재한다.

2. 시각화

콘텐츠, 버튼과 같이 실제 화면에 필요한 구성 요소를 그린다. 

3. 설명

정적 화면으로 버튼인지 단순 텍스트인지 확인하기 어렵다. 때문에 설명을 상세히 적어야 하는데 화면에 번호를 표시하거나

표시한 번호에 화면에 대한 설명을 적는 것이 필요하다.

🧚🏻 팀 프로젝트 : '개발참십조' 팀원 소개

https://www.figma.com/file/ErtFcnwvxa2B0cvEdN28RG/Untitled?type=design&node-id=0%3A1&mode=design&t=BUIlltmifYRaz2ZW-1

☝🏻 와이어 프레임 작성

팀원 소개 웹페이지는 인스타그램 레이아웃과 유사하게 작업했다. 메인페이지에는 팀별 목표와 우리 팀만의 특징이 프로필 텍스트로 들어가도록하고, 소통하는 방법은 하이라이트 스토리 디자인으로 작업해서 넣었다

피드에는 팀원들 사진을 넣고 사진 마다 해당하는 팀원의 상세페이지로 이동하도록 구상해봤다.

상세 페이지에 팀원의 설명과 블로그 주소, 깃허브, 이메일 주소 자신에 대한 설명과 TMI(?) 내용을 넣기로 했다.

또, CRUD가 들어가도 된다고해서 방명록 기능을 추가했다

각 팀원 상세페이지 하단에 고정된 섹션으로 배치하기로 했다 팀원들과 이야기하며 프레임을 짰는데

역시 집단 지성이 좋다..👍