[WEB] AJAX

타키탸키·2022년 11월 28일
0

WEB

목록 보기
2/4

개요

  • AJAX
    • 리로드 없이 웹 서버에 정보를 요청해서 부분적으로 정보를 갱신해주는 기술
      • 웹페이지에서 일부 정보가 달라졌음에도 전체 페이지를 리로드하는 것은 비효율적
    • 페이지 리로드를 줄여서 사용자 경험을 향상시킨다
      • 리로드 할 때마다 모든 정보를 다운로드하는 비효율을 줄인다
    • 페이지 전환 없이도 서버로부터 데이터를 부분적으로 가져와서 동적으로 페이지의 내용을 교체하는 방법
      • 페이지(문서) 단위에서 벗어남으로써 애플리케이션(동적 프로그램)의 대열에 합류
      • 검색이 되면서 애플리케이션의 역할을 수행할 수도 있다는 강점
  • AJAX를 적용하기 전 상태
    • 리로드(페이지 전환)를 하면 서버로부터 모든 파일을 다운로드한다
      • 전체 갱신
    • URL이 매번 바뀐다
  • AJAX를 적용한 후 상태
    • 리로드를 하면 바뀐 부분에 필요한 파일만 다운로드한다
      • 부분적 갱신
      • 변경한 부분에만 집중할 수 있다
      • 네트워크 자원 절약
    • URL이 바뀌지 않는다
  • AJAX와 재사용성
    • 하나의 기본적인 템플릿을 만들어 재사용 가능
      • 유지보수 시, 불필요한 반복 작업을 줄임
    • 바뀔 수 있는 부분과 고정될 부분을 구분
      • 바뀔 수 있는 부분만 AJAX를 통해 동적으로 변경시킨다
    • Single Page Application 구현
      • 하나의 페이지로 여러 정보 표현 가능
  • 실습 환경
    • AJAX는 서버와 통신하는 기술이므로 apach2/htdocs에 index.html 놓기
    • 보안 상의 이유로 파일을 직접 열면 안된다

fetch API

  • fetch API
    • AJAX를 구현하는 최신 기술 중 하나
    • 기존 방식에 비해 더 유연하고 분명한 기술
  • fetch API의 요청과 응답
    • 클라이언트가 fectch API 실행
      • ex:) fetch('javascript')
      • 웹 브라우저로 하여금 'javascript' 파일을 서버에 요청해달라는 의미
      • 'javascript'에 접속해서 데이터를 가져온다
    • 서버가 요청한 파일을 전송하며 웹 브라우저에 응답
  • 비동기
    • 웹 브라우저가 응답을 받을 때까지 마냥 기다리지 않음
      • 다른 작업을 함께 수행
    • 서버와의 통신이 끝났음을 알리는 콜백 함수 실행
      • 웹 브라우저의 응답 받기가 끝나면 실행됨
      • then(callback)

초기 페이지 구현

  • hash
    • 일종의 북마크 기능(anchor)
      • # 뒤에 있는 name으로 되어 있는 태그를 찾아서 이동
    • 페이지 안에서 태그 식별
      • ex:) localhost/temp.html#three
      • three라는 id를 가진 태그의 내용으로 이동
    • fragment(태그의 내용)와 fragment identifier(id)
  • location.hash
    • url의 hash 가져오기
    • #을 빼고 가져오고 싶으면 .substr(1) 붙이기
  • 단일 웹 애플리케이션 구현
    • hash 값에 따라서 AJAX로 다른 페이지를 로드해서 시작 페이지 셋팅 가능
      • 한 개의 웹 페이지에 서버에서 가져온 정보들을 그려주는 방식
      • URL은 그대로이기 때문에 뒤로가기 버튼을 누르면 정보가 통째로 날아간다
    • hashbang
      • 기존 북마크 기능(#)에 !를 붙여 URL처럼 보이도록 한 것
    • 현재 기술로는 페이지 갱신 없이 URL을 변경할 수 있는 방법이 없다
      • 페이지 갱신 없이 URL이 변경되는 것처럼 보이기 하기 위해 사용
  • AJAX로 구현한 단일 웹 애플리케이션의 문제점
    • 검색 엔진 최적화가 안 된다
      • 검색 엔진은 웹 페이지를 다운로드 받아서 동작
      • AJAX로 구현한 웹 애플리케이션의 내용은 백엔드에서 동적으로 가져오기 때문에 비어있다
    • PJAX를 대신 사용
      • AJAX 기술과 HTML5 pushState API를 활용하여 페이지를 로딩하는 기술
      • 주소가 바뀌므로 히스토리 관리가 가능해진다

fetch API polyfill

  • caniuse.com
    • 웹 기술이 지원되는 브라우저와 버전을 확인할 수 있는 사이트
  • polyfill
    • fetch API를 지원하지 않는 old 브라우저를 위한 기능
    • http://github.github.io/fetch에서 다운로드 후 사용 가능
    • index.html의 head에 아래 코드 추가
<head>
  <script src="fetch/fetch.js"></script>
</head>
profile
타키탸키
There's Only One Thing To Do: Learn All We Can
이전 포스트

[WEB] HTML과 Internet

다음 포스트

[WEB] POST와 PUT

0개의 댓글