Ajax

Preface

어제는 JSP 공부 도중 jQuery에 관한 내용이 나와 jQuery를 간단히 살펴봤었는데,

이번엔 코드에서 jQuery에서 제공하는 Ajax와 관련된 부분이 나왔다.

해당 내용만을 공부할까 하다가 기왕 공부하는거 Ajax의 개념에 대해 확실히 짚고 넘어가는 것이 좋을 것 같다는 생각이 들어 생활코딩의 Ajax 강의를 봤다.

이번 글을 업로드한 후엔 jQuery의 Ajax 강의를 보고 간단히 정리할 생각이다.

JSP 공부를 시작하기 전엔 HTML, CSS, JS, Java 관련 지식만 있으면 아무 문제 없이 책을 이해할 수 있을 것이라 생각했지만, 막상 공부를 시작하니 요구되는 사전 지식이 꽤 많다.

- Ajax(Asynchronous JavaScript and XML): 웹 애플리케이션에서 비동기적으로 데이터를 교환하기 위해 사용되는 기술의 집합

1) 특정 부분의 내용만 바뀌므로 사용자가 변경되는 부분에만 집중할 수 있다.

→ 시간과 돈, 네트워크 자원의 절약

2) 프로그래밍 언어에서 클래스와 비슷한 개념으로 하나의 파일을 수정하면 모든 파일이 수정되는 효과를 얻을 수 있다.

→ 특정 부분을 정적으로 표현하는 것이 아닌 원하는 내용만 서버에서 동적으로 뽑아와서 나타낼 수 있다.

3) 각각의 페이지가 모두 HTML 코드를 가지고 있을 필요가 없이 바뀌는 내용만 가지고 있으면 된다.

→ Single-Page Appliacation을 구현할 수 있다.

- Single-Page Application(SPA): 웹 애플리케이션의 디자인 패턴 중 하나로 전통적인 웹 애플리케이션과는 달리, 단일 페이지로 구성되며 페이지의 전체적인 리로딩 없이 동적으로 콘텐츠를 업데이트한다.

- SPA는 초기에 한 번만 페이지 전체를 로드하고, 그 이후에는 필요한 데이터와 템플릿을 비동기적으로 로드하여 동적으로 콘텐츠를 업데이트한다. 이를 위해 주로 Ajax와 JavaScript 프레임워크 또는 라이브러리(예: React, Angular, Vue.js)를 사용한다.

- SPA의 주요 특징
1) 페이지 전체의 리로딩 없음: SPA는 초기 로딩 이후에는 페이지 전체를 리로딩하지 않고 콘텐츠를 업데이트합니다. 사용자가 다른 페이지로 이동하거나 데이터를 요청할 때에도 페이지를 다시 로드하는 대신 필요한 부분만 업데이트합니다. 이는 빠른 응답성과 부드러운 사용자 경험을 제공합니다.
2) 동적 업데이트: SPA는 데이터와 템플릿을 비동기적으로 로드하여 동적으로 콘텐츠를 업데이트합니다. 이는 사용자의 상호작용에 따라 필요한 부분만 업데이트하거나 새로운 콘텐츠를 추가할 수 있는 유연성을 제공합니다.
3) 클라이언트 측 렌더링: SPA는 주로 클라이언트 측에서 콘텐츠를 렌더링합니다. 초기에 필요한 데이터를 서버로부터 받아와 클라이언트에서 동적으로 처리하고 화면에 표시합니다. 이는 서버 부하를 줄이고 클라이언트 측에서 더 많은 작업을 처리할 수 있도록 합니다.
4) 라우팅: SPA는 주로 클라이언트 측에서 라우팅을 처리합니다. URL을 사용하여 특정 뷰 또는 상태로 이동하고 해당 뷰를 렌더링합니다. 이는 사용자가 브라우저의 뒤로 가기/앞으로 가기 버튼을 사용하거나 URL을 직접 입력하여 특정 상태로 이동할 수 있게 합니다.

- Aajx를 쓴다는 것: 웹 페이지에서 서버와 데이터를 비동기적으로 교환할 수 있으므로, 페이지 전체를 다시 불러오지 않고도 칠요한 데이터를 업데이트하거나 동적으로 표시할 수 있다.

- fetch('파일명'): 인자로 전달된 데이터를 서버에게 요청하는 메서드

1) fetch API는 비동기(Asynchronous) 방식으로 구현된다.

→ 특정 작업이 실행되는 도중 다른 작업도 실행할 수 있다. (작업을 병렬적으로 수행)

- then( ): fetch 메서드로부터 데이터를 받은 후 인자에 전달(콜백함수)한 작업을 실행하는 메서드

/*
function callbackme(){
	console.log('response end')
}
*/
callbackme = function(){
	console.log('response end')
}
fetch('html').then(callbackme);


//익명함수를 통한 코드
fetch('html').then(function(){
	console.log('response end')
});

- fetch API에선 then의 인자값으로 response 객체를 줘야 한다.

1) 웹브라우저와 웹서버가 통신할 때 파일을 정상적으로 찾으면 200이라는 status값을 준다.

2) 요청한 파일이 존재하지 않으면 404를 리턴한다.

fetch('html').then(function(response){
	console.log('response')
});

- hash: URL을 통해 웹 요소의 특정 부분에 즉시 접근할 수 있게 해주는 기능

1) 요소: fragment

2) id값: fragment identifier

→ hash값에 따라 Ajax로 다른 페이지를 로드해서 시작되는 페이지를 세팅할 수 있다.

3) #를 해쉬, !를 뱅이라고 해서 #!를 해쉬뱅이라고 읽고 북마크 용도로 사용한다.

→ 최근에는 hashbang이 아닌 pjax라는 기술을 사용한다.

- Ajax를 사용하면 검색엔진 최적화가 잘 되지 않는다.

→ 네비게이션 기능이 활성화되지 않는다. (뒤로가기 등)

- 데이터를 수정할 때 index.html 파일을 수정하는 것이 아닌, 데이터가 담긴 별도의 파일만 수정하도록 하는 것이 좋다.

- 전체 실습 코드

<!doctype html>
<html>

<head>
  <title>WEB1 - Welcome</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="colors.js"></script>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1><a href="#welcome">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
  ">
  <ol id="nav">
    <!-- <li><a href="#!html" onclick="fetchPage('html')">HTML</a></li>
    <li><a href="#!css" onclick="fetchPage('css')">CSS</a></li>
    <li><a href="#!javascript" onclick="fetchPage('javascript')">JavaScript</a></li> -->
  </ol>
  <article>

  </article>
  <script>
    function fetchPage(name) {
      fetch(name).then(function (response) {
        response.text().then(function (text) {
          document.querySelector('article').innerHTML = text;
        })
      });
    }
    if (location.hash) {
      fetchPage(location.hash.substr(2));
    } else {
      fetchPage('welcome');
    }
    fetch('list').then(function (response) {
      response.text().then(function (text) {
        var items = text.split(',');
        var i = 0;
        var tags = '';
        while (i < items.length) {
          var item = items[i];
          item = item.trim();
          var tag = '<li><a href="#!'+item+'" onclick="fetchPage(\''+item+'\')">' + item + '</a></li>';
          tags = tags + tag;
          i++;
        }
        document.querySelector('#nav').innerHTML = tags;
      })
    });
  </script>
</body>

</html>

출처: https://www.youtube.com/playlist?list=PLuHgQVnccGMA9-1PvblBehoGg7Pu1lg6q

WEB3-Ajax

www.youtube.com

728x90