[TIL] 어쩌다 라이브 코딩

yeols·2023년 10월 20일

[TIL]

목록 보기

20/72

미니 튜터 해본 썰..

캠프 참가 인원 중 많은 분들이 코딩을 처음 접해보신 분들이 상당히 많다.
그렇다보니 개인 과제(vanilla Javascript + tmdb api활용) 진행에 많은 어려움을 격는다고 하셔서 실력이 많이 부족하나마 라이브 코딩을 진행하며 간략한 설명을 곁들여 html구조, css 레이아웃 살짝, 과제 내용의 필수 기능까지만 코딩을 진행 하였다.
html+css로 간단하게나마 큰 레이아웃을 잡는 방법만 제시하고, 디자인적 요소는 하지않았다.
디자인까지 들어가면 라이브 코딩이 너무 길어질거같아서이다..

개인과제는 tmdb에서 제공하는 open api를 통해 영화 list를 받아와 영화 card list를 출력하고
검색을 통해 검색된 영화를 영화 card list 출력하는 과제이다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>코드 만들조</title>
    <link rel="stylesheet" href="./css/styles.css">
  </head>
  <body>
    <section class="wrapper">
      <header class="header-wrapper">
        <h1>내배캠 영화 정보</h1>
        <form id="search_form">
          <input type="text" placeholder="검색어를 입력해주세요.">
          <button>검색</button>
        </form>
      </header>
      <main class="main-wrapper">
        <section class="main__movie-cards">


        </section>
      </main>
    </section>
    <script type="module" src="./js/getApi.js"></script>
    <script type="module" src="./js/app.js"></script>
  </body>
</html>

/* Reset */
body {
  margin: 0;
}

h1, h2, h3 {
  margin: 0;
}

/*contents*/
body {
  display: flex;
}

.wrapper {
  width: 1300px;
  max-width: 1400px;
  box-shadow: inset 0 0 20px red;
  margin: 0 auto;
}

.header-wrapper {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}

.main-wrapper {
  padding: 0 20px;
}

.main__movie-cards {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
}

.main__movie-card {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main__movie-cards .main__movie-img img,
.main__movie-cards .main__movie-info {
  width: 200px;
}

html 에서 큰 레이아웃을 잡아나가면서 css에서 정렬을 할때 어떻게 하는지를 조금씩 설명하면서 완성했고,
중요한 javascript를 작성하기 시작했다.
이렇게 쓰다보니 flex를 정말 사랑하는 사람인가보다.. 뭔 죄다 flex...... 맥북도 flex....

api를 담당하는 js파일

// getApi.js
const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization:
      "Bearer APIKey",
  },
};

export const getMovies = (url) => {
  return fetch(url, options)
    .then((response) => response.json())
    .catch((err) => console.error(err));
};

메인 로직이 들어있는 js

import { getMovies } from "./getApi.js";

const makeMovieCard = (movieData) => {
  const mainMovies = document.querySelector(".main__movie-cards");
  mainMovies.innerHTML = "";
  movieData.results.forEach((movie) => {
    const { id, poster_path, overview, title, vote_average } = movie;
    const movieCard = document.createElement("div");
    movieCard.classList.add("main__movie-card");

    movieCard.innerHTML = `
    <div class="main__movie-img">
      <img src="https://image.tmdb.org/t/p/w500${poster_path}" alt="">
    </div>
    <div class="main__movie-info">
        <h3>${title}</h3>
        <p>${overview}</p>
        <span>Rating: ${vote_average}</span>
   </div>
    `;
    mainMovies.append(movieCard);
  });
};

const searchMovies = async (searchKeyword = "") => {
  let url = "https://api.themoviedb.org/3/movie/popular?language=ko-KR&page=1";
  if (searchKeyword.replaceAll(" ", "") !== "")
    //키워드가 있으면
    url = `https://api.themoviedb.org/3/search/movie?query=${searchKeyword}&include_adult=false&language=ko-KR&page=1`;

  const movieData = await getMovies(url);
  makeMovieCard(movieData);
};

const $searchForm = document.querySelector("#search_form");
$searchForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const keyword = event.target.children[0].value;
  searchMovies(keyword);
});

searchMovies();

js에서는 기본적으로 tmdb에서 로직을 만들어주기에 크게 어려운부분이 없을거같아 간단히 await를 사용해 data를 처리할 때와 Promise의 then 메소드를 사용했을때 차이점을 설명하였고, 과제의 큰 흐름을 설명하며 필요 함수를 작성하였다.

이런식으로 함수 호출과 함수들을 호출했을때 또 어떤 함수를 호출하는지 설명하며 어떻게하면 좀 더 재사용 가능한 코드가 될지 같이 고민하며 완성했다.

처음에 의도는 과제를 받아서 어떤식으로 생각하고 진행하는지 그런 큰 그림을 알려드리고 싶었다.
50분 정도 진행 했고 잘 전달되었을지는 모르겠지만 누구에게 알려주는게 정말 정말 어려웠고 진이 빠지는 경험이었다.
프로젝트 발표랑은 또 다른 느낌이다.. 사전에 html+css만 살짝 연습하고 js쪽은 정말 생각 나는대로 구상하고 진행했는데 나름 만족스럽다. 조금씩 '발전은 하는구나' 라고 속으로 뿌듯했다. (뿌듯해도되나..?)

한편으로는 잘못된 방법을 알려드리는게 아닐까하는 마음도 있다.
배우는 입장에서 너무 나선건 아닌지 하는 마음이 계속 남아있는데.. 잘한걸까..? 모르겠다..

생각보다 많은 인원 앞에서 이렇게 라이브 코딩을 하며 설명하는게 너무너무 어려웠고 아직 부족한점이 많은걸 느낀다.
전문적으로 강의를 하시는분들은 강의를위해 얼마나 많은 준비를 하는지 알것같기도 하다..