화면처럼 .env.local 파일을 하나 만들어서
이렇게 이름과 키를 넣어준다.
그 다음에 axios로 요청을 보내는데
getTmdbPopular({ commit }) {
const TMDB_API_KEY = process.env.VUE_APP_TMDB_API_KEY;
const API_URL = `https://api.themoviedb.org/3/movie/popular`;
const params = {
api_key: TMDB_API_KEY,
language: "ko",
region: "KR",
};
axios({
url: API_URL,
method: "GET",
params,
}).then((res) => {
console.log(res);
console.log(res.data.results);
commit("GET_TMDB_POPULAR", res.data.results);
});
},
위 코드처럼 process.env.(내가 설정한 키 이름)으로 키를 만들어준다.
그리고 params에 api_key값으로 넣어서 axios에 전달하면 정상적으로 키 입력이 완료된다.
키를 설정했으면 서버를 다시 껐다 켜야 제대로 적용이 된다.
반응형
'Vue' 카테고리의 다른 글
Vuex state 데이터 새로고침으로부터 지키는 방법 (1) | 2024.04.01 |
---|---|
오랜만에 해보는 Vuex 도입 (1) | 2024.04.01 |
Vuex에서 새로고침 시 store 초기화 막는 방법 (0) | 2023.05.17 |
Vuex에서 회원가입 하면 로그인 컴포넌트 불러오는 방법. (1) | 2023.05.16 |