Project 회고록 | 영화 스트리밍 플랫폼 Website 화면 만들기

SeoYum·2021년 12월 10일

CSS JavaScript html project

Project 회고록🌊🌊

목록 보기

1/1

프롤로그

5월부터 10월, 백엔드 국비 과정 수료
11월 중순부터 프론트엔드 기초 개념 공부

그리고 12월부터 나👩‍💻(it's me!)는
무작정 만들고, 분석하고, 수정하고를 반복하기로 결심했다.

소개

이번 첫 글은 유튜버 'Lama Dev'의 영상 중 아래 링크를 참고하였습니다.
https://www.youtube.com/watch?v=AOlkcLtyXkw

프로젝트명 : 영화 스트리밍 플랫폼 웹사이트 화면 구현
기획 및 제작 : myuum
분류 : 화면 구현
제작 기간 | 배포일 : 2021.12.09 (1-day)
주요 기능 : 슬라이드 리스트, CSS .active를 활용한 라이트모드 다크모드, 영화 리스트 hover 액션
사용 툴 : HTML, CSS, JavaScript

React를 마주하고 개념을 익히고, 기획과 디자인 감각을 복구하는 기간 동안 살짝히 굳었던 머리와 Html용 손타자를 풀어보자는 마음으로 알고리즘의 선택을 받은 영상 하나를 PICK해 클론코딩을 시작했다.

구현한 화면 구성을 다음과 같다.

Toggle버튼 클릭 시, 라이트모드와 다크모드 변환☀️🌙
영화 아이템 슬라이드 리스트
리스트 오른쪽 화살표 클릭 시, 한 아이템씩 슬라이드 skip 동작
영화 리스트 마우스 호버 액션 추가

이미 모두 알았고, 한번 작성했던 적이 있었던 코드들이었지만 예상과 달리 그 이상으로 시간이 소요되었다..

어려웠던 부분

movieWeb.JS

const arrows = document.querySelectorAll(".arrow");
const movieLists = document.querySelectorAll(".movie-list");

arrows.forEach((arrow, i) => {
    const itemNumber = movieLists[i].querySelectorAll("img").length;
    let clickCounter = 0;

    arrow.addEventListener("click", () => {
        const ratio = Math.floor(window.innerWidth/270);
        clickCounter++;
        if (itemNumber - (4 + clickCounter) + (4 - ratio) >= 0) {
            movieLists[i].style.transform = `translateX(${
                movieLists[i].computedStyleMap().get("transform")[0].x.value -
                300
            }px)`;
        } else {
            movieLists[i].style.transform = "translateX(0)";
            clickCounter = 0;
        }
    });

위 코드 중 이해하는 시간이 필요했던 코드는

if (itemNumber - (4 + clickCounter) + (4 - ratio) >= 0) {
	movieLists[i].style.transform = `translateX(${
        movieLists[i].computedStyleMap().get("transform")[0].x.value -
        300}px)`;
} else {
	movieLists[i].style.transform = "translateX(0)";
	clickCounter = 0;
}

Element.computedStyleMap()이라는 함수였다.

movieLists[i].computedStyleMap().get("transform")[0].x.value

computedStyleMap()은 해당 함수를 element에 사용하여 계산된 모든 스타일을 검색하는 기능을 한다.

이를 차례대로 정리해본다면,

movieLists[i].computedStyleMap()
: movieLists 배열 요소의 size를 계산한다.
movieLists[i].computedStyleMap().get("transform")
: get("transform")을 추가로 작성하여 CSS 중 transform의 값을 가지고 온다. 해당 movieList의 CSS 코드 중에 transform 값이 부여되지 않으면 value : none으로 값이 출력된다.
movieLists[i].computedStyleMap().get("transform")[0].x.value
: 계산되어 가지고 온 movieLists 배열 요소들의 transform값 배열 요소 중 [0]번째의 x값은 가지고 온다.

보완점

이 외에 특별히 헷갈리는 코드는 없었지만, 수정이 필요한 코드들과 빠진 기능들이 많이 보였다.

전체적으로 버튼과 아이콘에도 hover 액션이 필요하고, 컬러 모드 변환 시의 움직임이 정적이기 때문에 부자연스러웠고 footer의 부재는 페이지를 미완성으로 만들었다. 그리고 화살표 버튼이 양쪽에 있어 리스트는 양쪽 모두로 클릭 액션이 가능하도록 하며, 위의 리스트 슬라이드 액션을 다른 코드로 수정하여 코드 정리가 필요한 듯 하다.

마무리

역시나 자만은 금물이다. 쉬워보이는 코딩도 두들겨보고 다시 자판을 두들겨봐야한다🧐

추가로 클론코딩을 한다고 해서 결코 아무 생각 없이 따라 가는 것이 아닌,

"이 함수는 왜 작성하는 거지? 어디에 활용하는 거지?"
"이 강의는 이렇게 작성했지만 나는 다른 코드로 작성해 봐야겠다."

와 같은 생각이 끊기지 않는 코딩 공부가 되어야 한다는 것이다.

앞으로 난이도가 다소 쉽고 간단한 toy 프로젝트는 1차 클론코딩, 2차 클론코딩 코드 기반에 원하는 기능 추가하여 보완 단계를 거칠 계획이며,
난이도가 다소 어렵고 익숙해지는 시간이 필요한 프로젝트는 최소 3차 코딩을 거치고 차수별로 보완과 업그레이드를 걸쳐 자체적인 코드 리뷰를 해볼 생각이다.

오늘도 고생..이 아니라 코딩 조금만 더하고 자자🐈‍🐈‍🐈‍

"오늘도 도움주신 개발자분들, 감사드립니다. 항상 배워갑니다"

SeoYum

노트북과 눈싸움이 일상인 프론트준비생

Project 회고록 | 영화 스트리밍 플랫폼 Website 화면 만들기