[TIL] 스파르타) Javascript 문법 종합반 1주차 수강, TMDB 개인 과제 완료

 

[JS 문법 종합반] 1주차 : 자바스크립트 기본 문법 | Notion

JavaScript 개인 과제 | Notion

 

--

 

학습 키워드: javascript, array, filter, transform, flip, hover

 

1. JS Array의 기능들과 filter()

 - 자바스크립트 문법 종합반 1주차를 수강했는데, 전부 다 아는 내용이라고 생각했지만 자세히보니 배열 부분에서 몰랐던 한 가지 특징이 있었다. 바로 배열의 기능들인데, JS에서는 마치 배열이 stack이나 queue 처럼 작동할 수 있게 하는 array의 기능들이 존재한다.

// 배열을 스택처럼 사용하기
let stack = ['a', 'b', 'c'];
stack.push('d'); // ['a', 'b', 'c', 'd']
stack.pop(); // ['a', 'b', 'c']

 - push(param): 배열의 맨 뒤에 파라미터 항목을 추가한다.

 - pop(): 배열의 맨 뒤 항목을 삭제한다.

// 배열을 큐 처럼 사용하기
let queue = ['a', 'b'];
queue.push('c'); // ['a', 'b', 'c']
queue.shift(); // ['b', 'c']

// 또 다른 기능
queue.unshift('d'); // ['d', 'b', 'c']
// 배열을 잘라주는 slice와 자르고 교체해주는 splice도 있다.

 - shift(): 배열의 맨 앞 항목을 삭제한다.

 - unshift(param): shift의 반대로, param의 항목을 배열 맨 앞에 추가한다.

 

 - 또 다른 기능들로 map() 과 filter() 가 있다. 둘 모두 괄호 안에서 callback function을 구현해줘야한다.

let arr = ['a', 'b', 'c'];

arr.map(function(item) => {
	return item + 'f';
});
// ['af', 'bf', 'cf']

arr.filter(function(item) => {
	return item.includes('b') || item.includes('c');
});
// ['b', 'c']

 - map(cb): callback function을 통해 index마다 들어갈 결과값을 리턴해줘야 한다.

 - filter(cb): callback function을 통해 배열을 필터할 조건문을 리턴해줘야 한다.

 - 둘 모두 새로운 array가 반환되므로 변수 지정을 통해 따로 저장해줘야 이어서 쓸 수 있다.

 

 

2. 개인 과제 완료, CORS와 http-server 패키지 (NPM)

GitHub - donkim1212/nbc_ch2_tmdb: 내배캠) Chapter2 개인 과제

 - 하루를 꼬박 투자해서 오늘 받은 개인 과제를 완료했다. 기본적으로 지난번의 '미니프로젝트1'과 비슷한 구성이었다. 이번 과제는 jQuery를 사용하지 않고 바닐라 JS로만 구현해서 TMDB (The Movie DB) API를 이용해 영화 정보를 불러오는 작업이 핵심 목표였다. 아니나 다를까 또 CORS 에러가 발생했는데, 이제부터는 그런 일이 없도록 npm의 http-server를 -g 파라미터와 함께 설치하여 로컬 서버를 빠르게 구성할 수 있도록 조치했다.

npm -g http-server
http-server -c-1 -p 8081

 

 - npm이 이미 설치되어 있다면 프로젝트 디렉토리에서 위 작업을 수행하면 된다. http-server는 기본적으로 브라우저 캐싱을 사용하기 때문에, 새로고침을 해도 코드가 바로 반영되지 않는다. "-c-1" 파라미터를 추가하면 캐싱이 비활성화되고, "-p 8081" 파라미터로 아직 캐싱 정보가 없는 8081 포트에서 실행해줬다.

 

 

3. CSS transform, hover를 이용한 Container 회전으로 카드의 앞 뒷면 구현하기

 - 이번 개인 과제 역시 '미니프로젝트1'에서 구현했던 포토카드 형식의 div와 비슷한 카드를 구현했는데, 지난 번에 사용한 방법은 mousemove와 mouseleave 이벤트를 통한 회전 각도 계산이었다면, 이번에는 css의 hover 기능을 이용한 카드 뒤집기를 아래의 사이트를 참고하여 구현했다.

How To Create a Flip Card with CSS

.poster-container {
    background-color: transparent;
    width: 100%;
    height: auto;

    /* padding: 0px 0px 0px 20px; */

    text-align: center;
}

.cardholder {
    display: inline-block;
    position: relative;

    perspective: 1200px;
}

.card {
    position: relative;
    /* float: left; */
    
    width: 300px;
    height: 450px;
    
    text-align: center;

    margin: 20px 20px auto auto;

    transition: transform 0.5s;
    transform-style: preserve-3d;
}

.cardholder:hover .card {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    
    border: 1px solid white;
    border-radius: 10px;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card-front {
    color:white;
}

.card-back {
    background-color: black;
    color:white;
    transform: rotateY(180deg);
}

<div class="poster-container" id="card-container-01">
    <div class="cardholder" onclick="alert('영화 id: ${id}')">
        <div class="card">
            <div class="card-front" style="background-image:url('이미지URL')">

            </div>
            <div class="card-back">
                <h1>제목</h1>
                <p>내용</p>
                <p>ratings: 별점</p>
            </div>
        </div>
    </div>
</div>

 

 - 최대한 풀어서 설명하면 다음과 같다.

 

1) card-front와 card-back: 각각 카드의 앞, 뒷면의 style이고, 뒷면에 해당하는 card-back을 transform: rotateY 를 이용하여 180도 회전시켜둔다. 그 다음 .card-front, .card-back 에 공통으로 적용되는 css에 position:absolute; 와 backface-visibility: hidden; 을 추가한다. 여기서 -webkit 뭐라고 되어있는 라인은 사파리 브라우저를 위한 것이라고 한다. 호환성 이슈가 있는듯하다. position을 absolute로 설정해야 div끼리 겹치는 것이 가능해지고, backface-visibility를 hidden으로 설정하면 뒷면 상태의 div가 화면에 노출되지 않게되어 front와 back에 해당하는 div들이 서로를 각자의 뒷면처럼 보여줄 수 있게 된다.

2) card: 이제 이 front와 back에 해당하는 div들을 card 라는 div로 묶어준다. 이 wrapper 컨테이너의 position은 absolute가 아니어도 상관 없다. 여기서 transition 값을 transform 0.5s 로 지정하면 transform의 회전이 0.5초에 걸쳐 진행된다. 가장 밑의 transform-style: preserve-3d; 은 div element가 회전 상태를 3D로 유지할 수 있도록 만들어준다.

3)  .cardholder:hover: 이번 구현에서 가장 중요한 포인트는 바로 :hover 인데, :hover 앞에 오는 클래스에 마우스가 호버되는 경우 작동하게 되는 방식이다. 여기서는 .cardholder:hover .card 라고 되어있는데, 이는 cardholder 클래스에 마우스가 호버된 경우 해당 element 하위의 .card 클래스를 대상으로 작동하게 된다. '.card:hover로 card 클래스에 바로 적용하면 안되느냐?' 라고 생각할 수 있는데, hover를 발생시키는 div와 실제 회전하게 될 div가 동일하면 마우스를 움직일때마다 회전이 멈칫거리는 현상이 생긴다. 그래서 card의 상위에 cardholder 라는 컨테이너를 하나 더 추가하여 둘을 분리하면 회전이 방해받지 않고 매끄러워진다.

4) poster-container: 마지막으로 poster-container에 각각의 cardholder를 담는 구조라는 것을 감안하고 styling을 해주면 된다.

 

-- 

 

 - 아직 프로젝트 제출 기한까지는 시간이 많으므로 모듈간 의존성 문제 등을 해결할 방법을 생각해봐야겠다.