inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계

9. 환경변수

404 에러가 자꾸 떠요...

784

김동규

작성한 질문수 6

0

import axios from 'axios';

const api = axios.create({
  baseUrl: 'https://api.themoviedb.org/3',
  headers: { 'Contnt-type': 'application/json' },
});

api.interceptors.request.use(
  function (config) {
    // Do something before request is sent
    console.log('request start', config);
    return config;
  },
  function (error) {
    // Do something with request error
    console.log('request error', error);
    return Promise.reject(error);
  },
);

// Add a response interceptor
api.interceptors.response.use(
  function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    console.log('get response', response);
    return response;
  },
  function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    console.log('response error', error);
    return Promise.reject(error);
  },
);

export default api;

 

import { createAsyncThunk } from '@reduxjs/toolkit';
import api from '../api';

const API_KEY = process.env.REACT_APP_API_KEY;
const getMovies = createAsyncThunk('movie/getMovies', async () => {
  const popularMovieApi = await api.get(
    `/movie/popular?api_key=${API_KEY}&language=en-US&page=1`,
  );

  // let url =
  //   'https://api.themoviedb.org/3/movie/popular?api_key=<<api_key>>&language=en-US&page=1';
  // let response = await fetch(url);
  // let data = await response.json();

  // let url2 =
  //   'https://api.themoviedb.org/3/movie/top_rated?api_key=<<api_key>>&language=en-US&page=1';
  // let response2 = await fetch(url2);
  // let data2 = await response2.json();

  // let url3 =
  //   'https://api.themoviedb.org/3/movie/upcoming?api_key=<<api_key>>&language=en-US&page=1';
  // let response3 = await fetch(url3);
  // let data3 = await response3.json();
});

export const movieAction = {
  getMovies,
};

 

 

api key는 잘 넘어오는데

get response가 안넘어와요ㅜㅜ

react redux web-api

답변 1

1

코딩알려주는누나

안녕하세요 

에러를 보시면 api호출하신 주소가 localhost:3000/movies임을 보실 수 있습니다 

즉 내 컴퓨터에다 요청을 했기에 404 에러가 나는겁니다 

baseurl이 적용이 안된 모습이네요 

baseUrl을 baseURL 로 바꾸시고 다시 시도 부탁드립니다

모바일 버전에 쓰이는 이미지를 다운받고 싶어요

0

76

1

vite를 꼭 써야하나요

0

69

1

쇼핑몰관련 질문드립니다.

1

89

2

전체 소스코드는 어디서 받을 수 있나요?

0

256

1

소스코드는 어디서 받을 수 있는지요...

0

258

1

마지막 프로젝트 데모 페이지가 보이지 않습니다.

0

222

1

TMDB 사이트 API 가져오기

0

572

1

5.리덕스 유용한 툴 소개

1

297

1

json-server 최신버전이면 검색이 안나올 수 있습니다.

4

859

3

연락처 검색 버튼이 작동하지 않아요

0

379

1

영화 API

0

809

2

더보기..

0

380

1

미니 쇼핑몰 작업하는 중에 리스트가 잘 안나옵니다.

1

391

1

매칭되는 action이 없을 때 반환값이요

0

384

1

openweather api 호출 했는데 401가 나요!

0

1337

1

React-Router 설치중오류

0

1933

1

api 인터셉터사용시 post

0

419

1

상세페이지 api

0

387

1

netlify에 REACT_APP_API_KEY 환변경변수 추가하고 배포해도 API_KEY가 없다고 에러가 나옵니다

0

417

1

예고편

0

292

2

reducer는 함수라고 해서 function을 넣으셨는데...

0

310

1

프로젝트 진행하다가 오류가 나서 더이상 진행을 못하고 있습니다 ㅠ

0

405

2

num에 사용한 {}

0

227

1

여기서 똑같이 썻는데. 저는 에러가 나는데 혹시 해결방법을 알려주실수있을까요?

0

656

1