231018 TIL

개인 프로젝트 과제의 발제가 있었다.
JS 과정을 마무리하며, JS 문법의 핵심을 적용해 볼 수 있는 영화 검색 사이트를 제작하는 것이다.

과제에는 필수 요구사항이 주어졌다.

1. 순수 바닐라JS만 사용하기.
2. 영화 정보 OpenAPI인 TMDB를 활용해, 인기영화 데이터 가져오기.
3. 영화 정보 카드 리스트 UI 구현 (+카드 클릭시, 영화 ID를 알려주는 얼럿창)
4. 영화 검색 UI 구현
5. 기재된 JS 문법 요소를 이용하여 구현.
   5-1. const, let 만을 이용한 변수 선언
   5-2. 화살표 함수 사용
   5-3. 배열 메소드 2개 사용
   5-4. DOM 제어하기 (기재된 API목록 중 2개 이상 사용)

확실히 강의에 배운 것들을 아주 제대로 활용해야만 하는 그런 조건이다.
API 같은 경우 프론트 엔드에서 중요하다고 했으니, 꾸준히 친밀감을 쌓게 하는 것이라고도 느껴진다.
앞으로의 과제에도(팀이든, 개인이든) API는 빠질 수 없는 요소 일테다.

일단은 와이어 프레임을 좀 생각해보기 위해서, 예시로 제공된 사이트에 들어가봤다.
꽤나 심심하고 투박한 디자인의 페이지가 떴다.
하지만 그 심심하고 투박한 디자인 안에는 강의 속 내용이 다 들어있었다.
아마 지금 내 수준에서, 내가 만들어낼 수 있는 최선의 결과물도 이것과 같지 않을까?
그런 생각이 들었다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>무비티아이</title>

</head>

<body>

    <header>
        <h1>무비티아이</h1>
        <h4>INFP의 최애픽은 뭘까?</h4>
        <h4>MBTI 별로 선호하는 영화 랭킹은?</h4>
    </header>

    <form class="searchbox"> <!--서치박스 코드 시작-->
        <label>영화 찾기 : </label>
        <input type="text" id="search-input" placeholder="원하는 영화 제목을 검색하세요.">
        <button type="submit" id="search-btn">검색</button>
    </form> <!--서치박스 코드 끝-->

    <section class="card-list"> <!--카드리스트 섹션 코드 시작-->
        <div class="movie-card">
            <img src="https://image.tmdb.org/t/p/w500/3bhkrj58Vtu7enYsRolD1fZdja1.jpg" alt="The Godfather">
            <h2 class="movie-title">The Godfather</h2>
            <p>
                about movie
            </p>
            <p>
                MBTI Pick!
            </p>
            <h3>rating</h3>
        </div>
        <div class="movie-card">
            <img src="..." alt="">
            <h2 class="movie-title">movie title</h2>
            <p>
                about movie
            </p>
            <p class="text-pick">
                MBTI Pick!
            </p>
            <h3>rating</h3>
        </div>
        <div class="movie-card">
            <img src="..." alt="">
            <h2 class="movie-title">movie title</h2>
            <p>
                about movie
            </p>
            <p class="text-pick">
                MBTI Pick!
            </p>
            <h3>rating</h3>
        </div>
        <div class="movie-card">
            <img src="..." alt="">
            <h2 class="movie-title">movie title</h2>
            <p>
                about movie
            </p>
            <p class="text-pick">
                MBTI Pick!
            </p>
            <h3>rating</h3>
        </div>
        <div class="movie-card">
            <img src="..." alt="">
            <h2 class="movie-title">movie title</h2>
            <p>
                about movie
            </p>
            <p class="text-pick">
                MBTI Pick!
            </p>
            <h3>rating</h3>
        </div>
    </section> <!--카드리스트 섹션 코드 끝-->

</body>

</html>

그래도 일단 박아보자, 하는 생각으로 뼈대는 만들어봤다.
정말 볼품없는 뼈대지만, 일단 css를 넣어볼까...싶었다.

* {
    background-color: black;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: white;
}


header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


h1 {
    font-size: 48px;
}

자...과연 어떻게 나올까?

일단은 여기까지 한 것 만으로도 뿌듯하다.
물론 예시 사이트에서 개발자 도구로 하나, 하나 어떻게 되어있는지 혼자 코드를 분석해(나름)보고 도움 받아 만든 것이지만...
그럼에도 뿌듯하다.

헌데 그러다 저녁 쯤, 같은 팀원 분이 만든 것을 보게 되었다.

물론 어느 정도 하다가 부트캠프에 합류하신 분이지만, 내 것과는 차원이 달랐다.ㅋㅋ

약간 실소가 나올 정도로 달랐다.

아까 느꼈던 뿌듯함은 사라지고 부끄러움이 남았다.
물론 어떻게 보면 당연한 차이지만, 그래도 부끄러운 건 어쩌겠나.
그리고 그 부끄러움은 전혀 나쁜 것도 아닐 테다.
오히려 더 몰입할 동력원이 되어 주겠지.
그러니 내일은 한 발 더 나아간 개린이...아니..코린이가 될 것이다.