Axios

• 쉽게 이야기해서 프론트엔드랑 백엔드랑 연결해주는 것이라고 생각하면 된다.
• Axios는 Promise기반의 API형식이 다양하게 제공이되며 별도의 로직을 구현할 필요없이 API만으로 간편하게 원하는 로직 구현
• Http 서버 로직을 처리하는데 비동기 방식으로 처리하는 것을 Promise 기반이라고 한다. 이건 javascript에서 한다.

axios 설치하기

yarn add axios

npm install axios

사용법 :

Http get axios.get(“url주소”).then().catch();
Http post axios.post(“url주소”).then().catch();

Http 요청에 대한 옵션속성 정의
ajax처럼 사용한다.

axios({
  method:’get’,
  url : ‘url주소’,
…..,
})

백엔드쪽 처리를 먼저 해줘야 한다.
백엔드와 프론트엔드 서버 모두 실행해줘야 한다.

spring

Controller

• axios가 비동기방식으로 처리해주는 것이기 때문에 기존 Ajax 사용시 적용하였던 @RestController 어노테이션을 적용해야 한다.
• react의 3000번대 port번호와, Spring의 8080번대 port 번호 이렇게 2개의 port번호를 써야 하기 때문에 @CrorssOrigin 어노테이션을 사용해야 한다.

package boot.data.controller;

import boot.data.dto.ShopDto;
import boot.data.service.ShopService;
import jakarta.servlet.http.HttpServletRequest;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

@RestController // react 는 무조건 RestController 이다.
@CrossOrigin // react 는 3000 포트, 스프링은 9002포트, 같이 쓸려면 이걸 무조건 해줘야 한다.
@RequestMapping("/shop")
public class ShopController {

    @Autowired
    private ShopService shopService;

    String photoName; // 리액트에서 업로드한 이미지명(혹은 변경한 이미지명..)
    @PostMapping("/upload")
    public String fileUpload(@RequestParam MultipartFile uploadFile,
                             HttpServletRequest request){
        // 업로드할 폴더 위치
        String path=request.getServletContext().getRealPath("/save");

        // 파일명
        String fileName=uploadFile.getOriginalFilename(); // 이름 겹칠꺼 때문에 sdf 해줬었다.

        // 파일명 변경
        SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmss");
        photoName=sdf.format(new Date())+fileName;

        System.out.println("fileName: "+fileName+"==>"+photoName);

        // save 폴더에 업로드
        try {
            uploadFile.transferTo(new File(path+"/"+photoName));
        } catch (IOException e) {
            throw new RuntimeException(e);
        }

        return photoName;
    }

    @PostMapping("/insert")
    public void insertShop(@RequestBody ShopDto dto){ // @RequestBody : json으로 보낸걸 java 클래스로 변환해야 하므로
        // 업로드한 사진으로 photo 변경해주기
        dto.setPhoto(photoName);
        // insert
        shopService.insertShop(dto);
    }

    @GetMapping("/list")
    public List<ShopDto> list(){
        return shopService.getShopDatas();
    }

    @GetMapping("/detail")
    public ShopDto detail(@RequestParam int num){
        return shopService.getData(num);
    }

}

React

Shop.js

• 기존 ajax 와 비슷한 방식으로 사용 가능하다.
• axois 라는 명령어를 사용한다.
• url을 이용하여 React와 Spring을 연결해준다.
• url은 Spring 매핑 주소에 해당하는 url을 사용한다.

import React, {useEffect, useState} from 'react';
import {useNavigate} from "react-router-dom";
import axios from "axios";
import ShopRowItem from "./ShopRowItem";

function Shop(props) {

    const navi=useNavigate(); // 이동할 수 있는 메서드

    // 백엔드에서 받아올 list에 대한 데이터 변수
    const [shopList,setShopList]=useState([]);

    // 데이터를 가져오는 함수를 가져와야 한다.
    const list=()=>{

        let url="http://localhost:9100/shop/list";

        axios.get(url)
            .then(res=>{
                // 스프링으로부터 받아온 list를 shopList에 넣기
                setShopList(res.data);
                console.log("len: "+res.data.length); // 이걸 여기서 출력(확인)후 RowItem에서 출력 예정이다.
            })
    }

    // 처음 렌더링 시 딱 한번 데이터 가져오기
    useEffect(()=>{
        console.log("list: ");
        list();
    },[]); // 여기서 ,[] 안적으면 계속 생성되네?


    return (
        <div style={{marginLeft:'100px'}}>
            <button type={"button"} className={'btn btn-info'} style={{width:'120px'}} onClick={()=>{
                navi("/shop/form");
            }}>상품등록</button>
            <hr/>
            <table className={'table table-bordered'} style={{width:'500px'}}>
                <thead>
                <tr>
                    <th width={'60'}>번호</th>
                    <th width={'140'}>상품명</th>
                    <th width={'300'}>상세보기</th>
                    {/*<th width={'60'}>수량</th>*/}
                    {/*<th width={'60'}>단가</th>*/}
                    {/*<th width={'60'}>입고일</th>*/}
                </tr>
                </thead>
                <tbody>
                {
                    shopList.map((row,index)=>(
                        <ShopRowItem row={row} idx={index}/>
                        ))
                }
                </tbody>
            </table>
        </div>
    );
}

export default Shop;