ajax에서 axios를 이용한 get방식에대한 질문입니다만

[황정후]

axios.get('url')의 방식으로 가져오는 get방식에서

강사님이 올려놓은 서버 말고 제가 로컬로 만들어놓은 json파일을 가져와서 불러오려고했는데요

경로를 설정해주는것만으로는 안되더라구요 ex)axios.get('../data/productdata2.json')

그래서 import ProductDataJson from '../data/productdata2.json'; 이런식으로 하나 import해서 가져와주고 다시 axios.get(ProductDataJson); 으로 가져와봤습니다만 이것조차 안됐습니다

로컬환경에서 json데이터를 가져오려면 어떻게해야할까요 

구글링을 해보면 axios를 이용하면 로컬환경에선 안된다는 말도있고..그러네요 제가 잘 못찾아서 그런건지 

 

[codingapple]

json파일을 public 폴더에 집어넣고 ajax 요청으로 가져와봅시다 

import로 가져오는건 src폴더에 있으면 됩니다 

[황정후]

import ProductDataJson from '../data/productdata2.json';

이렇게 경로를 지정해주고 import 한다음

 

axios.get(ProductDataJson)
          //서버에 ajax요청이 성공했을때 then()함수가 실행이된다.
          .then((result)=>{
            console.log(result)
            console.log(result.data)
          })
          // 반대로 요청에 실패했을땐 catch()함수가 실행이된다.
          .catch(()=>{
            console.log('요청에실패함');
          })

 

어떠한 방법으로든 log 를 확인하려고하는데 잘안되는모양인지 catch가 실행되며 

개발자도구에는

http://localhost:3000/[object%20Object],[object%20Object],[object%20Object]

여기서 실패했다는 내용만 나오고있습니다 ... 

public 폴더내에 json파일을 작성하고 불러오는과정에서 생기고있는 오류입니다 

어떻게하면 axios를 이용해서 로컬환경에있는 json파일을 불러올수있을까요 ㄷㄷ..

 

[codingapple]

public 폴더에 json파일 넣고 axios.get('/어쩌구.json') 이것만 하시면 됩니다 

[황정후]

그렇게 사용해봤더니

xhr.js:177 GET http://localhost:3000/assets/lib/data/productdata2.json 404 (Not Found)

이런 err메세지가 개발자도구에서 출력됩니다 ㄷㄷ.. 

경로를 절대경로와 상대경로 둘다 잡아주어봤는데 결과는 같습니다...

[codingapple]

잉 잘될텐데요 경로를 잘못 적은게 아닐까요 코드는 어떻게 작성했습니까 

[황정후]

// eslint-disable-next-line 
import React, {useState} from 'react';
import { Navbar , Nav , NavDropdown , Jumbotron , Button } from 'react-bootstrap'; 
import libProductData from '../../lib/data/productdata';
import ProductCard from './ProductCard';
// ajax를 위한 axios
import axios from 'axios';
// axios를 사용하여 local json data 불러오기
import ProductDataJson from '../data/productdata2.json';
console.log(ProductDataJson);
document.write(JSON.stringify(ProductDataJson));

function WrapIndex(){
  let [productData , productDataModify] = useState(libProductData);

  return(
    <>
      <Jumbotron className="jumbo-background">
        <h1>Keycaps-Master</h1>
        <p>
          This is a simple hero unit, a simple jumbotron-style component for calling
          extra attention to featured content or information.
        </p>
        <p>
          <Button variant="primary">Learn more</Button>
        </p>

      </Jumbotron>

      <div className="container">
        <div className="row"> 
          {
            // map함수의 파라미터는 두개까지 입력할수있으며 
            // 첫번째는 해당 함수의 데이터값과 두번째 i 는 자동으로 증가되는 값을말한다
            // 지금같은 반복문의 상황같은경우는 어떤 파라미터를 써도 결과값이 같으므로 상황에맞게 사용하면된다
            // key 값은 필수
            productData.map( (productdata,i) => {
              return <ProductCard key={i} propsProductData={productData[i]}/>
            })
          }
        </div>
        <button className="btn btn-primary" onClick={ ()=>{
          // axios.get('https://codingapple1.github.io/shop/data2.json')
          // axios.get(ProductDataJson)
          axios.get('assets/lib/data/productdata2.json')
          //서버에 ajax요청이 성공했을때 then()함수가 실행이된다.
          .then((result)=>{
            console.log(result)
            console.log(result.data)
          })
          // 반대로 요청에 실패했을땐 catch()함수가 실행이된다.
          .catch(()=>{
            console.log('요청에실패함');
          })
        } }>
          더보기
        </button>
      </div>
    </>
  );
}

export default WrapIndex;

 

요게 코드 전문입니다 app.js에 메인페이지를 작성하고싶지않아서 컴포넌트를배울때 같이 나눠놨습니다.

[codingapple]

import로 json 데이터 가져오는 부분은 다 지우고 

ajax get요청만 깔끔히 남겨봅시다 그리고 경로를 axios.get(‘/assets/lib/data/productdata2.json’) 이렇게 슬래시부터 시작하도록 해보시고

json파일이 실제로 /public/assets/lib/data 폴더안에 있는지도 확인합시다 

[황정후]

// eslint-disable-next-line 
import React, {useState} from 'react';
import { Navbar , Nav , NavDropdown , Jumbotron , Button } from 'react-bootstrap'; 
import libProductData from '../../lib/data/productdata';
import ProductCard from './ProductCard';
// ajax를 위한 axios
import axios from 'axios';

function WrapIndex(){
  let [productData , productDataModify] = useState(libProductData);

  return(
    <>
      <Jumbotron className="jumbo-background">
        <h1>Keycaps-Master</h1>
        <p>
          This is a simple hero unit, a simple jumbotron-style component for calling
          extra attention to featured content or information.
        </p>
        <p>
          <Button variant="primary">Learn more</Button>
        </p>

      </Jumbotron>

      <div className="container">
        <div className="row"> 
          {
            // map함수의 파라미터는 두개까지 입력할수있으며 
            // 첫번째는 해당 함수의 데이터값과 두번째 i 는 자동으로 증가되는 값을말한다
            // 지금같은 반복문의 상황같은경우는 어떤 파라미터를 써도 결과값이 같으므로 상황에맞게 사용하면된다
            // key 값은 필수
            productData.map( (productdata,i) => {
              return <ProductCard key={i} propsProductData={productData[i]}/>
            })
          }
        </div>
        <button className="btn btn-primary" onClick={ ()=>{
          // axios.get('https://codingapple1.github.io/shop/data2.json')
          // axios.get(ProductDataJson)
          axios.get('/assets/lib/data/productdata2.json')
          //서버에 ajax요청이 성공했을때 then()함수가 실행이된다.
          .then((result)=>{
            console.log(result)
            console.log(result.data)
          })
          // 반대로 요청에 실패했을땐 catch()함수가 실행이된다.
          .catch(()=>{
            console.log('요청에실패함');
          })
        } }>
          더보기
        </button>
      </div>
    </>
  );
}

export default WrapIndex;

말씀주신대로 해봤고 경로도 확인해봤지만...(src에 따로 폴더이동없이 그냥 두기도해봤습니다.)
그래도 똑같이 404 err 뜨면엇 not found가 나오네요 

[codingapple]

지금 파일이

shop프로젝트폴더 

ㄴ public

   ㄴassets

      ㄴlib

         ㄴdata

안에 productdata2.json 있는거 맞죠? 

잘 있으면 그럴리없습니다 

그래도 에러나면 그냥 github pages 이런 곳에 json파일 올리고 그걸 get요청으로 가져오는게 맘편할듯요 

 

[글쓴이]

글