생활코딩 - WEB3: Ajax

부분적으로 웹 페이지를 갱신하는 기술인 Ajax를 생활코딩과 함께 배워봅시다.

클래스 소개
난이도
쉬움
카테고리
웹 프로그래밍 - 프로그래밍
태그
자바스크립트
추천 학습대상
- Ajax를 통해 시간과 돈, 네트워크 자원을 절약하고 싶은 분
- Ajax로 Single Page Application을 구현하고 싶은 분
- 페이지 reload를 줄여서 사용자 경험을 향상시키고 싶은 분
- Javascript에 대한 지식이 있으신 분

#구름EDU 수강자 분들을 위해 생활코딩(https://opentutorials.org)이 함께 합니다. 항상 좋은 지식을 전해주시는 생활코딩에 감사드립니다.


📝수업 소개


🔎매일 사용하는 검색사이트의 자동완성 기능, 어떤 원리로 실행되는지 생각해 보신 적 있나요? Google의 라이브 검색(또는 자동완성)이라고 불리는 기능은 Ajax를 이용합니다. 우리가 글자를 입력하는동안 Ajax가 바쁘게 서버와 통신해 준 결과 페이지 새로고침 없이도 추천 검색어를 볼 수 있게 되었지요. 

🛶Asynchronous Javascript and XML 즉 비동기적 Javascript와 XML라는 이름 답게 Ajax는 정지된 화면에서도 여러가지 일의 동시다발적 처리를 도와줍니다. 본 강의에서 Ajax의 API와 실습을 다루어보며 빠른 페이지를 구현하는 방법에 대해 알아봅시다.



🎯학습 목표


  • 웹 페이지의 정보를 부분적으로 변경할 수 있습니다.
  • 웹 브라우저와 서버가 어떤 정보를 주고받는지 이해하고, fetch API를 직접 적용해 봅니다.



📣참고사항


  • 자바스크립트를 잘 모르신다면 생활코딩의 WEB2: Javascript 수업을 먼저 들어보세요. 
  • index.html, color.js 이 두 가지의 소스코드 해석이 가능하신 분들은 바로 강의 수강을 시작하셔도 좋습니다.



강의자 소개


생활코딩(이고잉)

  • 약 10만 멤버로 구성된 개발 커뮤니티 생활코딩 운영
  • 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업을 제공
체험하기
모두 펼치기
교육 과정
모두 펼치기
  • 01
    오리엔테이션
  • 수업 소개
    수업의 목적 1
    수업의 목적 2
  • 02
    실습환경 준비
  • 실습환경 준비
  • 03
    동적으로 컨텐츠 변경하기
  • 동적으로 컨텐츠 변경하기
  • 04
    fetch API
  • fetch API 기본 사용법
    fetch API의 요청과 응답
    fetch API - response 객체
  • 05
    Ajax의 적용
  • Ajax의 적용
    리팩토링 - 함수화
  • 06
    초기 페이지 구현
  • fragment identifier를 이용한 초기 페이지 기능 구현
    fragment identifier를 이용한 초기 페이지 기능 적용
  • 07
    글목록 Ajax로 구현하기
  • 글목록 1
    글목록 2
  • 08
    fetch API polyfill
  • fetch API polyfill
  • 09
    수업을 마치며
  • 수업을 마치며
마지막 업데이트|2019년 12월 19일
강의자 소개
생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그래밍을 공부하는 이유에 대한 이유를 함께 생각해보면 좋을 것 같습니다.

강좌 후기
무료

평균평점
5.0
난이도
쉬움
수강기간
평생 무제한