Consideration of the code_API적용에 대한 코드

# Async/Await 사용 방식

• 가독성과 유지보수가 중요한 경우: 코드가 더 명확하게 보이며, 에러 처리가 직관적입니다. 
• 동기적인 코드처럼 작성하고 싶을 때: `async/await`는 코드가 동기적으로 실행되는 것처럼 보이게 해줍니다.
• 복잡하거나 가독성이 중요한 프로젝트에서는 `async/await`를 사용하는 것을 권장합니다.
• 간단한 작업이나 코드가 간결하게 유지될 때에는 Promise체인을 고려할 수 있습니다.

***예시)

async function fetchAndDisplayMovies() {
  try {
    const data = await fetchMovies();
    displayMovies(data);
  } catch (error) {
    handleError(error);
  }
}

 

# Promise 체인 사용 방식

• 간단한 비동기 작업의 경우: 코드가 간결하고 작업이 단순한 경우, `then( )` 메소드를 사용하여 Promise 체인을 작업할 할 수 있습니다. 
• 선호도나 코드 길이에 따라: 개발자가 Promise 체인을 선호하거나 코드가 길어지지 않을 경우에 선택할 수 있습니다. 

***예시)

function fetchAndDisplayMovies() {
  fetchMovies()
    .then(data => displayMovies(data))
    .catch(error => handleError(error));
}

---

## 개인 프로젝트 작업 중 오픈 API 적용에 관하여 

# 이전에 완성한 코드 _ Async/Await 사용 

const api_key = `8206b490bb08\914d`;
const apiUrl = 'https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=1&api_key=' + api_key;

const fetchMovies = async () => {
  try {
    const response = await fetch(apiUrl, {
      method: 'GET',
      headers: {
        accept: 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.status}`);
    }

    const data = await response.json();

    const movieContainer = document.getElementById('movie-card-container');
    
    data.results.forEach(movie => {
      const card = document.createElement('div');
      card.classList.add('movie-card');
      card.innerHTML = `
        <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" />
        <h2>${movie.title}</h2>
        <p>${movie.overview}</p>
        <p>Rating: ${movie.vote_average}</p>`;
      
      card.setAttribute('data-movie-id', movie.id);
      
      card.addEventListener('click', () => {
        const movieId = card.getAttribute('data-movie-id');
        alert(`Clicked on movie with ID: ${movieId}`);
      });

      movieContainer.appendChild(card);
    });
  } catch (error) {
    console.error(error);
  }
};

fetchMovies();

---

# 이후에 완성한 코드 _ Promise 체인 사용

const api_key = `8206b490bb08\914d`;
const apiUrl = 'https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&page=1&api_key=' + api_key;

const fetchMovies = () => {
  fetch(apiUrl, {
    method: 'GET',
    headers: {
      accept: 'application/json',
    },
  })
  .then((response) => {
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    const movieContainer = document.getElementById('movie-card-container');

    data.results.forEach((movie) => {
      const card = document.createElement('div');
      card.classList.add('movie-card');
      card.innerHTML = `
        <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" />
        <h2>${movie.title}</h2>
        <p>${movie.overview}</p>
        <p>Rating: ${movie.vote_average}</p>`;

      card.setAttribute('data-movie-id', movie.id);

      card.addEventListener('click', () => {
        const movieId = card.getAttribute('data-movie-id');
        alert(`Clicked on movie with ID: ${movieId}`);
      });

      movieContainer.appendChild(card);
    });
  })
  .catch((error) => {
    console.error(error);
  });
};

fetchMovies();

 

# 이전 코드와 현재 코드의 차이점

// 이전 코드 (async/await 사용)

const fetchMovies = async () => {
  try {
    // fetch 메소드를 await으로 동기적으로 처리
    const response = await fetch(apiUrl, {
      method: 'GET',
      headers: {
        accept: 'application/json'
      }
    });

    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.status}`);
    }

    // response.json() 메소드를 await으로 동기적으로 처리
    const data = await response.json();

    // 데이터를 처리하고 DOM에 추가

  } catch (error) {
    console.error(error);
  }
};

---

// 현재 코드 (async/await 미사용)

const fetchMovies = () => {
  return fetch(apiUrl, {
    method: 'GET',
    headers: {
      accept: 'application/json',
    },
  })
    .then((response) => {
      // fetch 메소드의 Promise를 사용하여 비동기 처리
      if (!response.ok) {
        throw new Error(`Network response was not ok: ${response.status}`);
      }
      return response.json(); // response.json() 역시 Promise를 반환
    })
    .then((data) => {
      // 데이터를 처리하고 DOM에 추가
    })
    .catch((error) => {
      console.error(error);
    });
};

 

### 두 코드의 주요 차이점 

 

1. async/await vs. Promise 체인:

• 이전 코드에서는 async/await를 사용하여 비동기 작업을 동기적으로 처리했습니다.
• 현재 코드에서는 Promise 체인을 사용하여 비동기 작업을 처리했습니다

2. .then() 메소드:

• 현재 코드에서 .then() 메소드를 사용하여 각각의 비동기 단계를 연결했습니다. 이는 Promise를 연결하는 방식으로 비동기 코드를 작성하는 전통적인 방법입니다.

3. 에러 처리:

• 이전 코드에서는 try...catch를 사용하여 에러를 처리했고, catch 블록에서 에러를 콘솔에 출력했습니다.
• 현재 코드에서는 .catch() 메소드를 사용하여 에러를 처리하고 콘솔에 출력했습니다.

---