#TIL(Today I Learned)_23.10.19

# 오늘 한 일 

1) 오전중에 새롭게 배정된 팀과 팀회의_진행 사항 및 어려운점  O 
2) 오전 중에 강의 3주차 복습하기_3주차 계속 진행중  O 
3) 2주차 강의자료내용 정리 끝내기(정리 완료)   O 
4) 오늘 만든 뼈대 코드에 개인과제 살 붙이는 작업_git 커밋 후 css 제작 부분과 javascript에서 api작업 진행중 O 
5) 알고리즘 문제 풀이 참여: 개인작업으로 인해 알고리즘 문제 잠시 중단  X

                                                   
                                                   <개인 프로젝트 영화 페이지 제작 진행 중... >

 

# 오늘의 느낀 점 

// 과제를 진행하면서 어려웠던 점

 

오늘은 오전에 팀 회의를 하면서 팀원들과 평소보다 대화를 길게 나눴다. 전부 코딩이 처음이지만 으쌰으쌰하는 분위기로 아침부터 좋은 스타트로 진행하였다. 오전에 어제 정리하던 2주차 강의 내용을 블로그에 정리한 이후에 3주차 강의를 듣다가 css로 들어가서 뼈대에 살을 붙이는 작업을 진행하였다.

와이어 프레임과 구글에 비디오 테이프 모양을 검색해가면서 비디오 테이프 모양으로 영화 검색창을 만드는 작업을 했다. 작업하다 보니 생각보다 너무 어려웠다. 왼쪽은 테이프가 감기는 부분으로 검색이라는 행동 이전에 랜덤으로 사진 혹은 영상이 나오다가 검색이 실행되면 검색한 영화와 관련된 정보가 이벤트로 뜨는 것을 생각했고, 우측에는 설명과 별점이 뜨는 걸 상상해가면 만들었는데 음......역시 디자인에는 소질이 없나보다. 생각했던 모양보다 더 아기자기한 모양이 나와버렸다. 프론트 개발자분들이 존경스러울 정도....

css로 작업을 하다가 진행 순서가 잘못 된 거 같아서 이전 팀인 able 조원에게 조언을 구하였다. 지금 하고 있는 방식이 맞는건지, 더 효율적인 순서가 있는지 문의를 하고 답변을 받았다....혹시나 했는데 역시나 css보다 api를 먼저 작업하는 것이 더 좋은 방법이 좋다고 한다....이 얘기를 듣고 바로 api 작업을 먼저 진행하기 시작했다.

개인 과제 발제 내용을 따라서 진행했는데 api를 적용하는게 이해가 안돼서 지금의 조원 한분과 함께 튜터님께 찾아가서 문의드렸다. 문의를 하면서 어느정도 적용 방법과 궁금증은 풀렸지만 뭔가 답답한 느낌이 계속 들었다. 나중에 튜터님도 지금 너무 맨땅에 헤딩하는 것 같다고 사전강의 영상을 보고 참고하는 것을 추천하셨는데 강의가 만료되어 어쩔 수 없이 강의 재발급까지 맨땅에 헤딩하면서 진행하기로 했다.

시간이 제법 흐르고 하다가 너무 막혀서 결국 이전 팀원을 찾아가 다시 질문하였다. 오픈 api를 js파일에 적용시키는 방법과 원리를 설명들었다. 팀원이었던 분은 배열과 화살표 함수를 사용하여 적용을 시켰는데 나는 다른 방법으로 적용 시켜보고싶어서 열심히 구글링을 하였지만 결국은 비슷하게 따라갈 수 밖에 없어서 너무 아쉬웠다.

내일 오전에 기회가 된다면 오늘 작성한 코드를 가져가서 able 팀원들에게 여쭤봐야겠다. 아직까지는 부랴부랴 따라가고 있기는한데 과제가 너무 어렵게 느껴진다. 매일 매일이 너무 답답하기에 언제쯤 내 코드를 적용하는 날이 올 수 있을까싶다. 역시 뭐하나 쉽게 가는건 없고 산넘어 산이지만 열심히해서 빨리 성장하고 싶다.

 

//금일 작성한 api코드와 문제점

// The Movie Database (TMDb) API 키 및 엔드포인트 정의
const api_key = `8206b490bb080c4a5d3dfd083e2b914d`;
const apiUrl = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1';

// 영화 정보를 가져와 웹 페이지에 표시하는 함수 정의
const fetchMovies = async () => {
  try {
    // API에 GET 요청을 보내기 위한 fetch 사용
    const response = await fetch(apiUrl, {
      method: 'GET',
      headers: {
        accept: 'application/json',
        Authorization: `Bearer ${api_key}`, 
      }
    });
    
    // HTTP 응답 상태 코드 확인
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.status}`);
    }

    // API 응답 데이터를 JSON 형식으로 변환
    const data = await response.json();

    // 영화 카드를 표시할 HTML 컨테이너 가져오기
    const movieContainer = document.getElementById('movie-card-container');
    
    // API에서 받은 각 영화 정보에 대해 반복 처리
    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>`;
      
      // 카드에 영화 ID 속성 추가
      card.setAttribute('data-movie-id', movie.id);
      
      // 카드를 클릭했을 때 이벤트 리스너 추가
      card.addEventListener('click', () => {
        const movieId = card.getAttribute('data-movie-id');
        alert(`Clicked on movie with ID: ${movieId}`);
      });

      // 카드를 HTML 컨테이너에 추가
      movieContainer.appendChild(card);
    });
  } catch (error) {
    // 오류 처리: 콘솔에 오류 메시지 출력
    console.error(error);
  }
};

// fetchMovies 함수 호출하여 영화 정보 가져오기
fetchMovies();

 

// 개선해야할 부분 

1. API키를 노출하지 않고 숨기기: API 키를 직접 코드에 노출시키면 보안에 취약할 수 있음. API 키를 서버 측에서 처리하거나 환경 변수로 숨겨야함.

2. 중첩 피하기: .`then()`으로 연결된 프라미스 체인을 사용하는 대신 `async/await`를 사용하여 코드를 더 가독성 있게 만들 수 있음.

3. 에러 처리 향상: 에러 처리를 향상시켜 예외가 발생할 경우 더 유용한 메시지를 출력해야함.

4. 요소를 생성하고 설정하는 함수 만들기: 반복적으로 사용되는 코드를 함수로 추출하여 코드를 간결하게. 

5. 템플릿 이터럴을 사용하여 문자열을 깔끔하게 만들기. 

 

// 개선된 코드 

// The Movie Database (TMDb) API 키 및 엔드포인트 정의
const api_key = `8206b490bb080c4a5d3dfd083e2b914d`;
const apiUrl = 'https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1';

// 영화 정보를 가져와 웹 페이지에 표시하는 함수 정의
const fetchMovies = async () => {
  try {
    // API로 데이터를 가져오기 위한 fetch 함수 사용
    const response = await fetch(apiUrl, {
      method: 'GET',
      headers: {
        accept: 'application/json',
        Authorization: `Bearer ${api_key}`,
      },
    });
    
    // HTTP 응답 상태 코드 확인
    if (!response.ok) {
      throw new Error(`Network response was not ok: ${response.status}`);
    }

    // API 응답 데이터를 JSON 형식으로 변환
    const data = await response.json();
    
    // HTML에서 영화 정보를 표시할 컨테이너 엘리먼트를 가져옴
    const movieContainer = document.getElementById('movie-card-container');
    
    // API에서 받은 각 영화 정보에 대해 반복 처리
    data.results.forEach(movie => {
      // 각 영화 정보로 카드 엘리먼트 생성
      const card = createMovieCard(movie);
      
      // 카드를 영화 정보를 표시할 컨테이너에 추가
      movieContainer.appendChild(card);
    });
  } catch (error) {
    // 오류 처리: 콘솔에 오류 메시지 출력
    console.error(error);
  }
};

// 각 영화 정보를 기반으로 카드 엘리먼트를 생성하는 함수 정의
const createMovieCard = (movie) => {
  // 새로운 div 엘리먼트를 생성하고 CSS 클래스를 추가
  const card = document.createElement('div');
  card.classList.add('movie-card');
  
  // 카드 내부 HTML을 구성
  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>`;
  
  // 데이터 속성을 사용하여 카드에 영화 ID 추가
  card.setAttribute('data-movie-id', movie.id);
  
  // 카드를 클릭했을 때 이벤트 리스너 추가
  card.addEventListener('click', () => {
    const movieId = card.getAttribute('data-movie-id');
    alert(`Clicked on movie with ID: ${movieId}`);
  });

  // 생성된 카드 반환
  return card;
};

// fetchMovies 함수 호출하여 영화 정보 가져오기
fetchMovies();

# 내일 할 일 

1) 오전 팀회의를 통해 개인과제 진행 상황 체크 및 어려운점 파악해서 질문 리스트 만들기  
2) 오전 중에 able팀 찾아가서 api 관련하여 코드 비교해보며 분석하기 
3) 개인과제 검색 기능 구현하기 

4) 이전 able 팀장님이 조언해준 내용 추가로 찾아서 공부하기