[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®ion=KR&page=1",
topRated:
"https://api.themoviedb.org/3/movie/top_rated?language=ko-KR®ion=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;