We-Co

[We-Co] 비동기 통신 AJAX를 알아보자! 본문

Web

[We-Co] 비동기 통신 AJAX를 알아보자!

위기의코딩맨 2023. 6. 29. 09:53
반응형

안녕하세요. 위기의 코딩맨입니다.

오늘은 웹 통신 중, 동기, 비동기 통신이있는데 비동기 통신 방법인 Ajax에 대해서 알아보도록 하겠습니다.

 

먼저 동기, 비동기 통신에 대한 차이점을 알아봐야겠죠??

간단하게 말하면 전체와 부분 통신이라고 이해하시면 됩니다.

 

웹에서 어떤 작업을 진행했을 시, 전체 화면을 로드시키는 방법이 동기

어떤 작업을 진행했을 시, 한 부분만 로드되는 부분이 비동기 통신으로 생각하시면 됩니다.

 

비동기 통신을 하는 이유는 서버에 부하를 최소화하기 위함입니다.

전체를 로드하는 것보다는 부분을 로드하는게 부화가 적게 걸리겠죠~?

 

[ AJAX ]

Ajax는 Asynchronous JavaScript and XML의 약자로서,

비동기 자바스크립트와 XML을 의미하고 있습니다.

 

웹개발에서 사용되는 기술로, 웹 페이지를 동적으로 업데이트하고 서버와 비동기적으로 데이터 통신을 위해 사용됩니다.

주로 JavaScript형태에서 많이 사용되며, 웹 애플리케이션 성능을 향상시키고, 부하를 최소화 할 수 있습니다.

 

흐름으로는 먼저 HTML단에서 시작을 합니다.

  • 웹 페이지에서 버튼 생성 
  • JavaScript를 사용하여 Ajax 요청 생성하여 각각 필요한 데이터와 상황에 맞는 설정을 해줍니다.

이제 Urls를 통해  View단으로 옮겨져서 Python 코드로 시작됩니다.

  • Ajax를 통해 데이터나 요청을 받아들여서 설정한 작업을 진행합니다.
  • 다시 작업이 진행되면 결과 성공 여부를 반환합니다. 여기서 사용할 Html 결과도 같이 반환하기도 합니다.

이제 장점을 알아보도록 하겠습니다.

  • 웹 페이지의 성능을 향상시킬 수 있습니다. 위에서 언급 했듯이 부하가 최소화가 되므로 성능이 향상될 수 있습니다.
  • 통신이 비동기적으로 이루워 지며, 다른 작업들을 동시에 수행할 수 있습니다.
  • 많이 사용되는 기술이므로 다양한 웹기술과 호환이 용이하다는 장점이 있습니다.

 

단점도 알아보도록 하죠!

  • 악의적으로 Ajax의 요청을 조작하거나 데이터를 악용할 수 있어 보안조치가 필요합니다.
  • 오래되 브라우저에서는 Ajax 기술이 동작하지 않을 수 있습니다.
  • 개발 복잡성, 흐름에서 Html, JavaScript, python 여러 흐름을 보여 개발 흐름에 있어서 복잡해 보일 있습니다.

 

 

 

 

오늘은 웹에서 상용하는 비동기 통신 AJAX에 대해서 간단하게 알아보았습니다.

부하도 줄여주고 여러측면에서 도움을주고 있어 기술적으로 상당히 많이 사용되고 있습니다.

다음번에는 코드도 설명드리도록 하겠습니다.

반응형