티스토리 뷰

웹/django

[django] Web Browser 와 Web Application Server 통신

코딩계란 2024. 1. 30. 01:49
728x90

Ajax

Asynchronous Javascript XML(eXtensible Markup Language)의 약자로 Javascript의 비동기식 방식을 이용해서 XML을 가져오는 것. 최근에는 데이터 포맷에 상관없이 비동기적으로 데이터를 가져오는 기술을 의미한다. Ajax는 콜백 방식을 이용한다. 여기서 콜백 방식은 별도의 함수를 만들어서 연결하는 방식을 의미한다. 

 

  • 동기: 하나의 요청이 발생하면 다른 요청은 전부 대기하고 요청을 처리할 때 까지 기다린 후 다음 요청을 처리하는 방식
  • 비동기: 하나의 요청이 발생해서 처리 중이더라도 다른 요청을 처리할 수 있는 방식

장점

  • 페이지 이동없이 고속으로 화면을 전환
  • 서버 처리를 기다리지 않고 비동기 요청이 가능.
  • 클라이언트에서 데이터를 처리할 수 있다. 

단점

  • Ajax를 사용할 수 없는 브라우저가 존재
  • Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.

 

구현 방법

  1. XMLHttpRequest 객체 생성
  2. 처리 결과를 받을 이벤트 리스너를 등록
  3. 서버에 전송할 데이터(파라미터)가 있으면 데이터를 준비한다. 
  4. open 메서드를 이용해서 연결
  5. send 메서드를 이용해서 요청을 전송

 

전체 데이터 가져오기 구현(실습)

먼저 django 프로젝트를 생성한다. 생성 방법은 아래 링크 참조

 

[Django, python] Django 설치 및 프로젝트 생성

Django 패키지 이름: django Django 설치 pip install django 개발 방식(MTV) 프로그래밍을 할 때 역할 별로 분리해서 구현(Django의 개발 방식) Model: 데이터 처리 관련 부분 Template: 출력 관련 부분. 최근에는 거

growingegg.tistory.com

 

urld의 처리를 다른 모듈에게 위임하고자 할 때 사용하는 패키지를 import

from django.urls import include
from 사용자 정의 애플리케이션 import views

#예시
from django.urls import include
from myapp import views

 

urlpatterns = [
    path('admin/', admin.site.urls),
    path("ajax/", views.ajax)
]
 
#ajax/ 라는 요청이 왔을 때 apiapp.views 파일의 ajax 함수가 처리하도록 설정

 

apiapp 의 views.py 파일에 요청을 처리하기 위한 ajax 함수를 생성하고 작성

from django.shortcuts import render
#요청이 오면 templates 디렉토리의 ajax.html을 출력
def ajax(request):
    return render(request, "ajax.html")

 

javascript에서 JSON 데이터 사용

결과 = JSON.parse(JSON 문자열) : 배열이나 객체로 변환해서 리턴
결과 = JSON.stringify(자바스크립트 객체): JSON 문자열로 변환해서 리턴

애플리케이션 디렉토리(위 코드에선 myapp)에 templates 디렉토리를 생성하고 그 안에 ajax.html 파일을 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
</head>
<body>
    
</body>
<script>
    //ajax 요청 객체 생성
    let request = new XMLHttpRequest();
    //요청을 준비
    request.open('GET', '../example/books/')    
    //요청 - 데이터가 없는 경우는 따옴표를 대입
    request.send('')
    //서버에서 요청이 전송되면 호출될 콜백 메서드를 등록
    request.addEventListener('load', function(e){
        //데이터를 확인: 텍스트 와 JSON은 responseText
        //XML인 경우는 responseXML
        //JSON 문자열을 직접 출력
        //alert(request.responseText);

        //받아온 문자열을 JavaScript 객체로 변환
        let data = JSON.parse(request.responseText);

        //자바스크립트는 for ~ in 으로 배열을 순회하면 인덱스가 리턴됩니다.
        for (idx in data){
            alert(data[idx].bid + data[idx].title)
        }
    })
</script>

</html>

데이터 삽입 구현 - POST 방식에 데이터 전송

ajax.html 파일의 스크립트만 수정해서 확인

<script>
    //ajax 요청 객체 생성
    let request = new XMLHttpRequest();

    //POST 방식에서 전송할 데이터를 생성
    let formdata = new FormData();
    formdata.append('bid', 4);
    formdata.append('title', '손자병법');
    formdata.append('author', '손무');
    formdata.append('publisheddate', '2024-01-29')

    //요청을 준비하고 전송
    request.open("POST", "../example/books/");

    //데이터 변환
    request.setRequestHeader("Content-type", 
        "application/x-www-form-urlencoded");
    let param = "";
    for(let pair of formdata.entries()){
        param += pair[0] + '=' + pair[1] + '&';
    }

    request.send(param);

    request.addEventListener("load", function(e){
        alert(request.response.Text);
    });

</script>

 

 

fetch API

프로미스 기반의 API. 프로미스 기반에서는 .then 이나 .catch를 연달아 작성해서 처리한다.

 

fetch() global function - Web APIs | MDN

The global fetch() method starts the process of fetching a resource from the network, returning a promise that is fulfilled once the response is available.

developer.mozilla.org

 

ajax.html 파일의 스크립트를 수정해서 전체 데이터 가져오기 구현

<script>
    //첫번째 then 에서는 어떤 데이터인지만 알려주면 파싱을 해서 다음 then 에게 넘겨준다.
    //다음 then에서 data를 사용하면 됩다.
    //여러 개의 문장을 수행해야 하는 경우 { }로 감싸면 된다.
    //예외에 대한 처리는 catch로 수행할 수 있고 catch의 매개변수는 예외 객체이다.
    fetch('../example/books/')
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.log(error));
</script>

 

 

Axios 라이브러리 

Promise 기반 HTTP 클라이언트 기반의 비동기 데이터 요청을 위한 라이브러리. 동일한 코드로 node.js 기반의 서버 와 클라이언트에서 동일한 기능을 수행하는 것이 가능

 

 

시작하기 | Axios Docs

시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코

axios-http.com

 

ajax.html 파일의 스크립트를 수정해서 전체 데이터 가져오기 구현

<!-- axios 라이브러리를 사용하기 위한 링크 설정 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    axios.get('../example/books/')
    .then((response) => console.log(response.data))
    .catch((error) => console.log(error));
</script>


일반적으로 ajax 보다는 fetch api 가 fetch api 보다는 axios 라이브러리를 사용하는 것이 코드가 간결하다.
그렇지만 axios는 표준 기술이 아니기 때문에 외부에 영향을 받게 된다.

 

 

기타

Web Socket

  • ajax 나 fetch api 는 무상태(이전의 상태를 기억하지 않음) 방식이며 연결을 유지하지 않는다.
  • ajax 나 fetch api를 이용해서는 채팅처럼 계속해서 데이터를 주고 받는 서비스를 구현하기가 어렵다.

ajax 나 fetch api를 이용해서 채팅을 구현하면 오버헤드가 너무 큼

Web Push

  • 클라이언트의 요청이 없어도 서버가 클라이언트에게 데이터를 전송하는 것
  • 예전에는 ajax polling을 이용해서 구현했지만 지금은 Web Push(Server Side Event)를 이용해서 구현한다.
  • 모바일의 경우 APNS(Apple Push Notification Service) 나 FCM(Firebase Cloud Messaging)이 UDP로 구현되어 있기 때문에 부인봉쇄에 사용할 수 없다.

CSRF

  • Cross-Site Request Forgery 의 준말로 사용자가 의도하지 않은 공격을 시도하는 행위
  • 이 공격을 막는 방법은 토큰을 발급해서 토큰이 있는 사용자만 서버에게 요청을 할 수 있도록 하면 된다.
  • 장고의 경우는 클라이언트가 외부에서 만들어진 경우 csrf 설정을 필수로 요구한다.

SOP(Same Origin Policy - 동일 출처 정책)

  • 자바스크립트는 기본적으로 동일 도메인 내에서만 요청이 가능. 
  • SOP가 적용되지 않는 태그
    <img>, <video>, <a> <audio>, <embed>, <object>
  • ajax 나 fetch api는 SOP가 적용되기 때문에 도메인 다른 서버에 데이터 요청할 수 없다.
  • 서버에 접속할 수 있는 클라이언트의 도메인을 등록해주거나 react 와 같은 클라이언트 사이드 애플리케이션 프레임워크에 접속할 수 있는 서버의 도메인을 등록해주어야 한다.
  • 근본적으로는 서버에서 작업을 해야 하지만 react의 경우는 클라이언트에 설정을 하면 node로 만들어진 서버의 프록시 설정을 이용해서 가능하도록 한다.
728x90

'웹 > django' 카테고리의 다른 글

[django]데이터 저장 형식, DB 데이터를 json으로 변환  (0) 2024.01.25
[django]웹 서비스 구현 방식, REST  (0) 2024.01.25
[Django, python] Django 템플릿 엔진  (0) 2024.01.25
[Django, python] Django model  (1) 2024.01.25
[Django, python] Django 파라미터, 데이터베이스 연동  (1) 2024.01.24