[TIL] 유데미X사람인 취업 부트캠프 1기 34일차 / netflex만들기

[1. 오늘 배운 것]

1. movies.api.js

- .env.template에서 엑세스 토큰을 받아온다 토큰은 비밀이다

- options객체로 method, headers를 정의한다

- accept : 응답받을 데이터 형식을 json으로 지정

- Authorization : API요청에 대한 인증 정보 제공

const TMDB_ACCESS_TOKEN = process.env.REACT_APP_TMDB_ACCESS_TOKEN;

const options = {
  method: "GET",
  headers: {
    accept: "application/json",
    Authorization: `Bearer ${TMDB_ACCESS_TOKEN}`,
  },
};

- API받아오기

- 비동기 처리를 위해 async 함수로 생성

- 두 개의 API를 받아오므로 객체 생성 (endpoints)

- fetch를 이용해서 해당 endpoint로 GET요청을 보냄

- fetch는 promise를 반환하므로, await을 사용해서 작업이 처리될 때까지 기다림 

- json메서드를 사용하여 HTTP응답 내용을 json 형식으로 파싱

- 위의 과정 또한 비동기 작업이므로 await 사용

- TMDB API의 응답 results라는 키를 사용하여 결과를 제공하는데 그 결과를 movies 변수에 할당함

const getMovies = async (type) => {
  const endpoints = {
    nowPlaying:
      "https://api.themoviedb.org/3/movie/now_playing?language=ko-KR&region=KR&page=1",
    topRated:
      "https://api.themoviedb.org/3/movie/top_rated?language=ko-KR&region=KR&page=1",
  };
  const response = await fetch(endpoints[type], options);
  const data = await response.json();
  const movies = data.results;

  return movies;
};

 

2. auth.context.js

- initialValue : 초기값 객체, 로그인 상를 false로 설정하고 signIn, logOut을 빈 함수로 설정

- AuthContext : createContext를 사용해서 인증 정보를 전역적으로 공유

const initialValue = {
  isLoggedIn: false,
  signIn: () => {},
  logOut: () => {},
};

const AuthContext = createContext(initialValue);

- AuthProvider : 사용자 인증 정보를 관리하는 컴포넌트

- useState를 사용하여 isLoggedIn 상태를 관리

- signIn 및 logOut 함수를 정의하여 해당 상태를 업데이트

- createContext로 생성된 AuthContext.Provider를 사용하여 value prop으로 사용자 인증 정보를 제공하고, 자식 컴포넌트(children)를 렌더링

export function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const signIn = () => setIsLoggedIn(true);
  const logOut = () => setIsLoggedIn(false);

  const value = {
    isLoggedIn,
    signIn,
    logOut,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

- useAuth 함수 : useContext를 사용하여 AuthContext의 값을 가져오는 커스텀 훅

export const useAuth = () => useContext(AuthContext);

export default AuthContext;