[WIL] Week 2 회고

20230522 - 20230526 Week 2

자바스크립트 문법 개강 후 정신없는 한 주가 지나갔다.. 수업부터 첫 개인 과제 발제까지 😱
매일매일 TIL을 쓰고 싶었는데 강의 보고 부족한 부분 좀 찾아보고 하다보니(딴 짓을 그렇게 많이 한 것도 아닌데) 새벽 12시, 1시가 뚝딱 되어있더라..
그날 그날 정리하고 싶은데 공부를 막 시작하는 단계라 한꺼번에 지식이 쏟아져 들어오니 정리가 쉽지 않았다.
앞으로 공부하면서 이해가 잘 가지 않거나, 헷갈리는 개념 등 특별히 정리가 필요하다고 느껴지는 내용은 따로 정리할 계획이다.

 

---

개인과제1 개요

1. 순수 바닐라 자바스크립트만으로 영화 리스트 조회 및 검색 UI 구현
2. 학습해온 자바스크립트 문법을 최대한 활용
3. 스타일링 작업하며 css와 친해지기

 

1. movieAPI 불러오기

// movieAPI 불러오기
const fetchMovieData = async () => {
  const options = {
      method: 'GET',
      headers: {
        accept: 'application/json',
        Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1NjZmYTE3MGI2YTI5ZTY2NjNhMjBiZWVmMTM0ZGJlNSIsInN1YiI6IjY0NzA4ZmE3NzI2ZmIxMDE0NGU2MTU4MiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.WjMDg4jW2jKFKA7ASX32W7RWlkt6KKmrcmF6_Bn_fic'
      }
    };
  const response = await fetch(
    "https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=1",
    options
  );
  const data = await response.json();
  return data.results;
};

// 불러온 movieAPI로 카드 생성
// 비동기함수 async, wait
// map으로 새 배열 생성
const createMovieCards = async () => {
  const movies = await fetchMovieData();
  const cardList = document.querySelector(".card-list");
  cardList.innerHTML = movies
    .map(
      (movie) =>
        `<div class="movie-card" id=${movie.id}>
            <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" class="movie-poster" />
            <h3 class="movie-title">${movie.title}</h3>
            <p class="release-date">Release date: ${movie.release_date}</p>
            <p class="movie-overview">${movie.overview}</p>
            <p class="vote-average">Rating: ${movie.vote_average}</p>
        </div>`
    )
    .join("");

  const textElements = cardList.querySelectorAll(".movie-title, .release-date, .movie-overview, .vote-average");
  textElements.forEach((element) => {
    element.style.lineHeight = "1.5";
  });

 

1. fetch() 전역 함수
   • 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 프로미스를 반환하는 함수
   • 프로미스는 요청에 대한 응답을 나타내는 `Response` 객체
   • API에 GET 요청을 보내고, 응답을 JSON 형식으로 파싱하여 반환
     • JSON(JavaScript Object Notation) : Javascript 객체 리터럴 문법을 따르는 문자열로, 데이터를 구조화하고 표현하기 위한 형식으로 key-value 쌍의 집합으로 데이터를 표현
2. async/await
   • 비동기 함수란, 이벤트 루프를 통해 비동기적으로 작동하는 함수로서 암시적으로 `Promise`를 사용하여 결과를 반환하는 함수를 말한다.
   • `await` 키워드를 사용하여 `async` 함수 실행을 일시 중지하고 전달 된 `Promise`를 기다린 후, `async` 함수 실행을 다시 시작하고 완료 후 결과값을 반환
3. map
   • `map()` 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드이다.
   • 영화API에서 불러온 `movies` 배열의 각 요소를 순회하며 원하는 형식의 HTML 문자열을 생성하여 새로운 배열을 생성하기 위해 사용
4. join
   • 배열의 모든 요소를 문자열로 연결하는 메서드
   • `movies.map(...)`으로 생성된 HTML 문자열 배열의 요소를 하나의 문자로 연결하기 위해 사용
   • `.join("")`은 빈 문자열을 구분자로 사용하여, 배열의 요소들이 구분자 없이 이어져 하나의 큰 문자열을 만들어  `cardList.innerHTML`에 할당하여 HTML에 동적으로 추가한다.

 

2. 다크모드/라이트 모드 구현

• HTML
  • 오른쪽 상단에 다크모드/라이트모드를 전환할 수 있는 버튼
• CSS
  • 다크모드 전환 시 바뀌는 배경색, 기본 폰트 색상, 포인트 색상 등을 변수로 설정
• JavaScript
  • 다크모드/라이트모드
    • 다크 모드를 토글하는 darkMode() 함수 정의
      • HTML의 버튼인 .dark-btn 하위에 있는 `<span>` 요소를 선택하여 `btnDarkmode` 변수에 할당
      • `btnDarkMode`의 텍스트 내용을 확인하여 현재 모드를 나타내는 아이콘을 변경하고, body 요소의 클래스 리스트에 `dark-mode` 클래스를 토글하여 화면을 다크/라이트 모드로 전환

<div class="dark-btn_container">
  <button onclick="darkMode()" class="dark-btn">
  <span>🌙</span>
</button>

 

:root {
  --main-bg-color: linear-gradient(to bottom right, #e6e6e6, #a9bfdf);
  --main-font-color: #1a1a1a;
  --main-point-color: #5c7caa;
  --shadow-color: #a8aeba;
  --btn-bg-color: #526f99;
  --btn-point-color: #090d13;
  --btn-font-color: #e6e6e6;
}

.dark-mode {
  --main-bg-color: linear-gradient(to bottom right, #2b3643, #090d13);;
  --main-font-color: #dfdfdf;
  --main-point-color: #d4bf7c;
  --btn-bg-color: #40454e;
  --btn-point-color: #d4bf7c;
  --shadow-color: #030a11;
  }

 

function darkMode() {
  const body = document.body;
  body.classList.toggle("dark-mode");

  const btnDarkmode = document.querySelector(".dark-btn span"); // .dark-btn 내의 <span> 요소 선택
  if (btnDarkmode.textContent === "🌙") {
    btnDarkmode.textContent = "🌅";
    const inputCursor = document.getElementById("search-input")
    inputCursor.focus();
  } else {
    btnDarkmode.textContent = "🌙";
    const inputCursor = document.getElementById("search-input")
    inputCursor.focus();
  }
}

 

 

참고 - MDN Web Docs
Element.classList, fetch() 전역함수, async function, Array.prototype.map(), Array.prototype.join()