posts/react-12/

[utterances-bot]

[React] 리액트 페이지네이션(pagination) 구현하기 (1) | ChanBLOG

컴퓨터/IT/알고리즘 정리 블로그

https://chanhuiseok.github.io/posts/react-12/

[llsrrll96]

useEffect(() => {
    async function fetchPosts(){
        setLoading(true);
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setPosts(response.data);
        setLoading(false);
    }
    fetchPosts()
},[]);

[rlawndks4]

Unhandled Rejection (Error): Request failed with status code 404 이 에러가 계속 떠서 고생합니다 ㅠㅠ const response = await axios.get('https://jsonplaceholder.typicode.com/posts'); 이 줄이 계속 문제라구 뜨네여 ...

[ChanhuiSeok]

@rlawndks4 작성하신 코드나, 개발자 도구를 켰을 때 뜨는 오류 로그 등을 좀 더 자세히 보여주실 수 있을까요??

[rlawndks4]

× Unhandled Rejection (Error): Request failed with status code 404 ▶ 6 stack frames were collapsed. async C:/Users/SEC/Desktop/emart_juan/emart_manager/Admin2/emart_manager/src/pages/KioskManagerPage/KioskManager/index.js:81 78 | 79 | useEffect( async() => { 80 | setLoading(true);

81 | const response = await axios.get('https://yts.mx/api/v2/list_movies.json'); | ^ 82 | setPosts(response.data); 83 | setLoading(false); 84 | },[]); View compiled This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

이렇게요 ㅠ

[rlawndks4]

https://github.com/rlawndks4/emart_manager/blob/master/src/pages/KioskManagerPage/KioskManager/index.js

이 코드 있는 깃허브 주소에요 ㅠ

[ChanhuiSeok]

@rlawndks4 우선 https://jsonplaceholder.typicode.com/posts 자체의 URL 문제는 없었습니다. 아래처럼 axios 사용 시 유효한 URL이라면 데이터를 잘 받아올 수 있습니다. https://playcode.io/new/ 사이트에서 아래와 같이 소스코드를 입력해 보시면 응답값이 불러와 지고 있었습니다.

import axios from 'axios'

async function fetchData(){
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response);
 }
fetchData();

// 혹은 아래처럼 작성해도 응답 확인 가능
//(async () => {
//  const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
//  console.log(response);
//})();

제가 @rlawndks4 님의 프로젝트 코드를 전부 살펴보지는 못하겠지만, 같은 URL임에도 해당 부분에서만 오류가 나는 것으로 봐서는 별도로 구현하신 백엔드 코드나 api 를 proxy 하는 어딘가로 인해 오류가 발생하는 것이 아닐까 생각됩니다.

axios를 사용하는 부분을 try-catch문으로 감싸서 에러값을 확인하고 요청한 url 값이 맞는지, 그리고 개발자 도구의 Network 탭을 확인해서 정상적으로 요청되는지 등 다양한 정보를 확인하시는 방법이 있습니다.

 try{
    const response = await axios.get('https://jsonplaceholder.typicode.com/postsddddd');
    console.log(response);
  } catch (e){
    console.log(e.response);
    console.log(e.config);
  }

[rlawndks4]

감사합니다!