API 테스트를 위한 Axios <-> Django 서버 연동하기.

개요.

(React + TypeScript 사용)

Tr, Td 태그를 이용하여 퍼블리싱을 완료하고. 서버에서 데이터를 받아와서 화면에 출력하는 기능을 구현하는 도중. 백엔드가 API개발이 완료가 안되었다고 해서 임의로 테스트를 하기 위해 진행을 해보았다.

 

(시간도 살짝 남아서 Django를 이용해서 테스트를 해보고 싶었다...)

 

Node.js 설치 및 Django 프로젝트, 가상환경 설정 등 기본적인 설정은 생략하도록 하겠다.

 

Django에서도 Model, Serializer를 이용하지 않고 바로 JSON형식 데이터를 직접적으로 응답을 보내는 방식으로 테스트를 하였다.

 

 

VS Code

먼저 서버로 요청을 보내기 위한 라이브러리 Axios를 설치해준다.

npm install axios
//axios는 JavaScript로 작성된 HTTP 클라이언트 라이브러리입니다.
//GET, POST, PUT, DELETE등 다양한 메서드 기능지원

Promise 기반: axios는 Promise 기반 API를 사용하여 비동기 요청을 처리합니다. 이는 간단하게. then() 사용하여 요청 응답을 처리할 수 있음을 의미합니다.

---

UseState 배열등 이해를 위한 몇 가지 코드만 발췌

const [inputValue, setInputValue] = useState<string>(''); // 모달창 input박스 안 데이터를 읽어오는 배열.

  interface MedicineData {
    medicine_name: string;
    medicine_code: string;
    medicine_pcode: string;
    medicine_company: string;
    check: boolean;
  }

  const [mediData, setMediData] = useState<MedicineData>([
    {
      medicine_id: '',
      medicine_name: '',
      medicine_code: '',
      medicine_pcode: '',
      medicine_company: '',
    },
  ]);
  
  // 서버로 부터 읽어온 데이터를 저장하는 UseState 배열
  
    const changeInputBox = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
    // 모달창 input박스에서 글씨가 입력되면 onChange이벤트 발생하는데 그때마다 배열 최신화.
    console.log('입력중...');
  };
// input 박스에 입력이 들어올때마다 배열 최신화

  const searchMedi = () => {
    //서버로 inputValue값 넘길 로직 작성
    if (inputValue.trim() == '') {
      alert('감색어를 입력하세요!!');
      //trim() 을 사용해서 공백문자 줄바꿈 제거 후 검증
      return;
    }
    console.log('전송중,,');
    axios
      .post('http://127.0.0.1:8000/test/', { query: inputValue })
      .then((response) => {
        console.log('서버 응답:', response.data);
        setMediData(response.data);
        // console.log('테스트', mediData);
        // console.log('테스트2', mediData[0]["medicine_id"]);
      })
      .catch((error) =>
        console.error('서버로 데이터를 보내는데 실패했습니다:', error),
      );
  };

 

Axios를 이용한 통신의 핵심 로직은 다음과 같다.

axios
      .post('http://127.0.0.1:8000/test/', { query: inputValue })
      .then((response) => {
        console.log('서버 응답:', response.data);
        setMediData(response.data);
        // console.log('테스트', mediData);
        // console.log('테스트2', mediData[0]["medicine_id"]);
      })
      .catch((error) =>
        console.error('서버로 데이터를 보내는데 실패했습니다:', error),
      );

 

"axios.post("요청할 서버의 주소와 경로"),{ " 변수명 " : " 전달할 값 "})"

{query: inputValue} 로 서버에 데이터가 전송이 되는데, 자동적으로 JSON형식으로 전송이 된다.

 

http://localhost:5173 -> http://127.0.0.1:8000  로 요청을 할 예정이다.

 

http://127.0.0.1:8000/test/ 이 부분은 Django에서 URL 매핑을 다음과 같은 경로로 했기 때문이다.

 

아까 위에서 설명했듯 Axios는 자바스크립트의 Promise를 기반으로 한 비동기 API요청이다.

 

요청이 성공적이면. then("요청 성공 시 로직") 으로 갈것이고, 실패를 했다면 .catch("요청 실패시 로직") 으로 갈 것이다.

---

Django

먼저 기본적인 프로젝트를 생성했다고 가정하고. 간단하게 URL맵핑을 먼저 하겠다.

 

프로젝트 구조

 

reactAPIConnectTest/urls.py

from django.contrib import admin
from django.urls import path, include
import myapp

urlpatterns = [
    path('admin/', admin.site.urls),
    path('test/', include('myapp.urls')),
]

 

myapp/urls.py

from .views import TestView;
from django.urls import path, include

urlpatterns = [

    path('', TestView.as_view()),
]

 

myapp/views.py

from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status


class TestView(APIView):
    def post(self, request):
        query = request.data.get('query')  # request.data를 사용하여 POST body에서 데이터를 가져옵니다.
        print(query)
        print("요청 들어옴.")

        response_data = [
            {
                'medicine_id': "1",
                'medicine_name': "타이레놀 500정",
                'medicine_code': "1234565",
                'medicine_pcode': "ABCDEFGHIJ",
                'medicine_company': "우성제약",
            },
            {
                'medicine_id': "2",
                'medicine_name': "아스피린",
                'medicine_code': "987654",
                'medicine_pcode': "ZYXWVUTSRQ",
                'medicine_company': "동아제약",
            },
            {
                'medicine_id': "3",
                'medicine_name': "부루펜",
                'medicine_code': "112233",
                'medicine_pcode': "LMNOPQRST",
                'medicine_company': "유한양행",
            },
            {
                'medicine_id': "3",
                'medicine_name': "부루펜",
                'medicine_code': "112233",
                'medicine_pcode': "LMNOPQRST",
                'medicine_company': "유한양행",
            },
            {
                'medicine_id': "3",
                'medicine_name': "부루펜",
                'medicine_code': "112233",
                'medicine_pcode': "LMNOPQRST",
                'medicine_company': "유한양행",
            },
        ]

        return Response(response_data, status=status.HTTP_200_OK)

 

이렇게 하면 기본적인 연동이 완료가 되고.

 

API 요청 시 JSON형식으로 데이터 받아진다.

 

 

 

https://kingmusung.tistory.com/53

[연동문제] CORS로 인한 서버 연동문제(axios <=> django)